3.1 DOM操作的归类

一般的话,DOM操作分为3个方面,即DOM Core(核心)、HTML-DOM和CSS-DDM.

  • 1.DOM Core
    DOM
    Core并无依附于JavaScript,任何一样栽支持DOM的顺序设计语言都好运用它。它的用并非仅仅限于处理网页,也可以就此来处理外一样栽采取标志语言编写出来的文档,例如XML。

JavaScript中的getElmentById(), getElementsByTagName(),
getAttribute()和setAttribute()等方式,这些还是DOM Core的有。

  • 2.HTML-DOM
    发现抱某些对象、属性既好就此DOM
    Core来实现,也足以以HTML-DOM实现。相比较而言HTML-DOM的代码通常比较简略,不过它们不得不用来拍卖Web文档。
    如:

document.formselement.src
  • 3.CSS-DOM
    CSS-DOM是本着CSS
    的操作。在JavaScript中,CSS-DOM技术之上要作用是沾和安装style对象的各种性能。通过转移style对象的各种性能,可以假设网页呈现出各种不同的意义。
    如:
    element.style.color = "red";

3.2 jQuery中的DOM操作

3.2.1 查找节点

  • 1.查找元素节点
    图片 1
  • 2.查找属性节点
    图片 2

3.2.2 创建节点

  • 1.创办元素节点
    $(html)方法会根据传入的HTML标记字符串,创建一个DOM对象,并将以此DOM对象包装成一个jQuery对象后回。
    如:
    图片 3
    图片 4

  • 2.创建文本节点
    创造文本节点就是于创立元素节点时一直将文件内容写出来。
    如:
    图片 5

  • 3.开立属性节点
    创立属性节点一和创造文本节点类似,也是直以创立元素节点时一并创造。
    如:
    图片 6

3.2.3 插入节点

动态创建HTML元素并没实际用处,还需要以新创建的因素插入文档中。将新创办的节点插入文档最简便易行的方式是,让它们化是文档的某个一节点的子节点。前面使用了一个栽节点的方法append(),它见面当要素中多新创的始末。
图片 7
图片 8
这些插入节点的法门不仅会用新创造的DOM元素插入到文档中,也克对原有的DOM元素进行移动。
如:
图片 9
图片 10

3.2.4 删除节点

  • 1.remove()方法
    作用是从DOM中删去所有匹配的素,传入的参数用于因jQuery表达式来罗元素。

当有节点用remove()方法去后,该节点所涵盖的具备后代节点将以于删。这个措施的返回值是一个针对性已经让删去的节点的援,因此可以在之后再次利用这些因素。
如:
图片 11

另外remove()方法为可透过传递参数来选择性地抹元素,jQuery代码如:
图片 12

  • 2.empty()方法
    从严来讲,empty()方法并无是去除节点,而是清空节点,它能够清空元素中的具有后代节点。
    图片 13
    图片 14
    元素<li>并没删,只是其中的元素节点被剔除了`

3.2.5 复制节点

货物拖动功能就是是用之复制节点,将用户选择的货物所处的节点元素复制一潮,并拿那从鼠标移动,从而达成以下购物效果。
图片 15
每当页面中单击“菠萝”后,列表最下方出现新节点“菠萝”:
图片 16
动态绑定
复制节点后,被复制的新因素并无备其他表现。如果需要新元素也有复制功能(本例中凡单击事件),可以采取如下jQuery代码:
图片 17
在clone[)方法被传送了一个参数true,它的意思是复制元素的而复制元素被所绑定的事件。因此该因素的副本一吧一样具有复制功能(本例中凡单击事件)。

3.2.6 替换节点

倘要替换某个节点,jQuery提供了相应的不二法门,即replaceWith()和replaceAll()。
图片 18
艺术replaceAll())与replaceWith()方法的意向,只是颠簸倒了操作元素:
图片 19
图片 20

3.2.7 包裹节点

苟只要用某节点用别样标志包裹起来,jQuery提供了对应的方,即wrap()。该措施对于用在文档中插入额外的结构化标记非常有因此,而且它们不会见毁掉原有文档的语义。
图片 21
结果为:
图片 22

包节点操作还有其它两独主意,即wrapAll()和wraplnner():

  • 1.wrapAll()方法
    图片 23
    图片 24
    赢得的结果吗:
    图片 25

    倘若采用wrap()方法,得到的结果吧:
    图片 26

  • 2.wrapInner()方法
    该方式将梅一个郎才女貌的因素的道岔内容(包括文件节点)用别样结构化的符包裹起来。例如可以下其来包裹<strong>标签的分内容,jQuery代码如下:
    图片 27
    结果为:
    图片 28

3.2.8 属性操作

  • 1.抱属性与装置属性
    若如得到<p>素的性能title,那么就待给attr()方法传递一个参数,即属性名称。
    图片 29
    苟要是设置<p>要素的属性title的价值,也得下及一个艺术,不同的是,需要传递两个参数就属性名称和呼应之价。
    图片 30
    一次性设置多独特性:
    图片 31

    Note:
    jQuery中的众智都是跟一个函数实现获取(getter)和装(
    setter)的,例如地方的att()方法,既能设置元素属性之值,也克得到元素属性的价值。类似的还有html(),
    text(), height(), width(), val()和css()等办法。

  • 2.勾属性
    removeAttr()方法:
    图片 32

3.2.9 体裁操作

  1. 收获样式与装样式
    图片 33
    class也是<p>素的特性,因此获得class和设置class都得使attr()方法来好。
    如:
    图片 34

图片 35
在大部情况下,它是以原来的class替换为新的class,而未是以原先的笨础上增加新的class。

  • 2.追加体
    addClass()方法:
    图片 36
    其中,another为:
    图片 37
    设若对有元素与多单样式,CSS有以下规定:
    (1)如果被一个因素添加了大半独class值,那么就算一定给联合了它的体裁。
    (2)如果发例外之class设定了平样式属性,则后者覆盖前者。
    图片 38

  • 3.移除样式
    removeClass()
    图片 39
    移除多个样式:
    图片 40
    移除全部样式:
    图片 41

  • 4.切换样式
    toggleClass()
    一经类名存在则去其,如果类名不设有则增长它。
    如:
    图片 42

  • 5.论断是否含有某个样式
    hasClass()
    hasClass()可以就此来判断元素被是否带有某个class,如果生,则归true,否则回false.
    图片 43

3.2.10 设置及获得HTML、文本及价值

  • 1.html()方法
    这个道类似于1a}aScript中之innerHTML属性,可以用来读取或者设置有元素被的HTML内容。
    图片 44
    图片 45
    结果为:
    图片 46
    一经用安装有元素的HTML代码,那么为足以以该法,不过要为其传递一个参数。例如要安装<p>素的HTML代码,可以采用如下代码:
    图片 47
  • 2.text()方法
    斯方法类似于JavaScript中之innerText属性,可以川来读取或者设置有元素被的文本内容。
    图片 48
    图片 49
    结果为:
    图片 50
    同html()方法同样,如果需要也某个元素设置文本内容,那么为待为text()方法传递一个参数。

  • 3.val()方法
    斯办法类似于JavaScript中的value属性,可以就此来装以及落元素的值。无论元素是文本框,下拉列表还是单选框,它还足以回元素的价。如果元素也多选,则归一个富含有选择的值的数组。
    图片 51
    当地址框获取鼠标焦点时,如果地方框的价值吗“请输入邮箱地址::
    “,则将地方框中的价值清空。可以应用如下的jQuery代码:
    图片 52
    图片 53

当地址框失去鼠标焦点时,如果地方框的价为空,则以地点框的价值设置为“清输入邮箱地址”。可以使用如下的jQuery代码:

图片 54

focus()方法相当于JavaScript中之。onfocus()方法,作用是拍卖得焦点时的事件。
blur()方法相当于JavaScript中的。onblur()方法,作用是处理失去焦点时的事件。

经过者的事例可以发现val()方法不但能设置元素的价,同时为会获取元素的值。另外,val()方法还有另外一个于是处,就是它能够如select
( 下拉列表框),
checkbox(多选框)和radio(单选框)相应的选项项为入选,在表单操作着会常用到。
图片 55
欠网页遭到有些要素是默认选中的,可以经Val()方法来转它们的选取着起。
图片 56
图片 57

Note:
于jQuery中,val()方法是起最终一个抉择往前方读取,如果选择的value或者text中随机一项符合就会叫入选。例如:
图片 58
任凭以var("选择1号")还是val("选择2号"),最终都见面选中后面的一个option。

3.2.11 遍历节点

  • 1.children()方法
    欠措施用于获取匹配元素的子元素集合。

    Note
    children()方法只有考虑子元素而非考虑其他后代元素。

  • 2.next()方法
    该法用于取匹配元素后面紧邻的同辈元素。

  • 3.prev()方法
    欠方式用于取匹配元素前面紧邻的同辈元素。

  • 4.siblings()方法
    拖欠办法用于取匹配元素前后有的同辈元素。

  • 5.closest()方法
    它们用来赢得近年来底匹配元素。首先检查时因素是否配合,如果配合则直接返网元素本身。
    假设为点击的靶子元素的近期的 li 元素添加颜色,可以使用如下代码:
    图片 59

除却,在jQuery中还有许多遍历节点的方,例如find(), filter()
nextAll(),prevAll(),
parent()和parents()等,此处不再赘言,读者可以查附录的jQuery速查表文档。

3.2.12 CSS-DOM操作

CSS-DOM技术简单的话就是读取和设置style对象的各种性能。
图片 60
图片 61
图片 62

Note:
(1)如果值是数字,将会晤被自动转发为像素值。
(2)在css()方法吃,如果属性被寓 “-”
符号,例如font-size和background-color属性,如果以安装这些性之值的时不牵动引号,那么快要用驼峰式写法,例如:
图片 63
设若带来上了引号,既好写成“font-size”,也堪形容成
“fontSize”.总的建议大家长引号,养成好的惯。

另外,在CSS-DOM中,还有以下几个经常以的方法。

  • 1.offset()方法
    她的来意是取元素于手上视窗的相对偏移,其中返回的目标涵盖两单特性,即top和left只针对可见元素有效。
  • 2.position()方法
    它们的用意是赢得元素相对于近日的一个position样式属性设置也relative或者absolute的太爷节点的相对偏移,与offset()一样,它回到的对象也包括个别单特性,即top和left。
  • 3.scollTop()和scrollLeft()方法
    就半独方法的打算分别是得到元素的滚条距顶端的离开及距离左侧的离。

相关文章

网站地图xml地图