3.1 DOM操作的归类

貌似的话,DOM操作分为1个位置,即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.查找成分节点
    jQuery 1
  • 2.查找属性节点
    jQuery 2

3.2.2 创制节点

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

  • 2.创建文本节点
    开创文本节点便是在创立成分节点时一直把公文内容写出来。
    如:
    jQuery 5

  • 3.创办属性节点
    创制属性节点一与创立文本节点类似,也是直接在开创成分节点时三只成立。
    如:
    jQuery 6

3.2.3 插入节点

动态创设HTML成分并没有实际用处,还索要将新创制的要素插入文书档案中。将新成立的节点插入文书档案最不难易行的格局是,让它成为那一个文书档案的某部一节点的子节点。前面使用了三个布署节点的方法append(),它会在要素内部追加新创建的内容。
jQuery 7
jQuery 8
这么些插入节点的措施不仅能将新成立的DOM成分插入到文书档案中,也能对原有的DOM成分实行活动。
如:
jQuery 9
jQuery 10

3.2.4 删除节点

  • 1.remove()方法
    效率是从DOM中删去全数匹配的元素,传入的参数用于根据jQuery表达式来筛选成分。

当有个别节点用remove()方法删除后,该节点所包括的拥有后代节点将同时被剔除。那一个法子的重临值是二个对准已被去除的节点的引用,因而得以在此后再使用这个因素。
如:
jQuery 11

其它remove()方法也得以通过传递参数来选拔性地删除元素,jQuery代码如:
jQuery 12

  • 2.empty()方法
    从严来讲,empty()方法并不是剔除节点,而是清空节点,它能清空成分中的全数后代节点。
    jQuery 13
    jQuery 14
    元素<li>并从未去除,只是当中的因素节点被去除了`

3.2.5 复制节点

商品拖动作用正是用的复制节点,将用户挑选的货物所处的节点成分复制三次,并将其随从鼠标移动,从而达到以下购物效果。
jQuery 15
在页面中单击“菠萝”后,列表最下方出现新节点“菠萝”:
jQuery 16
动态绑定
复制节点后,被复制的新因素并不有所别的表现。借使急需新成分也具备复制功能(本例中是单击事件),能够使用如下jQuery代码:
jQuery 17
在clone[)方法中传送了二个参数true,它的意义是复制成分的同时复制成分中所绑定的轩然大波。由此该因素的副本一也一致持有复制功效(本例中是单击事件)。

3.2.6 替换节点

一经要替换有些节点,jQuery提供了对应的办法,即replaceWith()和replaceAll()。
jQuery 18
情势replaceAll())与replaceWith()方法的效益,只是颠倒了操作成分:
jQuery 19
jQuery 20

3.2.7 包裹节点

假若要将某些节点用任何标志包裹起来,jQuery提供了相应的点子,即wrap()。该办法对于急需在文书档案中插入额外的结构化标记十三分有用,而且它不会毁掉原有文书档案的语义。
jQuery 21
结果为:
jQuery 22

打包节点操作还有其余多个主意,即wrapAll()和wraplnner():

  • 1.wrapAll()方法
    jQuery 23
    jQuery 24
    取得的结果为:
    jQuery 25

    若接纳wrap()方法,获得的结果为:
    jQuery 26

  • 2.wrapInner()方法
    该办法将梅二个协作的要素的子内容(包蕴文件节点)用其它结构化的标志包裹起来。例如能够采纳它来包裹<strong>标签的子内容,jQuery代码如下:
    jQuery 27
    结果为:
    jQuery 28

3.2.8 属性操作

  • 1.到手属性和设置属性
    假若要收获<p>要素的个性title,那么只需求给attr()方法传递一个参数,即属性名称。
    jQuery 29
    万一要安装<p>要素的质量title的值,也足以接纳同一个措施,不一样的是,必要传递七个参数即属性名称和对应的值。
    jQuery 30
    2次性设置多少个属性:
    jQuery 31

    Note:
    jQuery中的很多主意都以同一个函数完成获取(getter)和装置(
    setter)的,例如地方的att()方法,既能设置成分属性的值,也能博取元素属性的值。类似的还有html(),
    text(), height(), width(), val()和css()等办法。

  • 2.剔除属性
    removeAttr()方法:
    jQuery 32

3.2.9 体制操作

  1. 获取样式和装置样式
    jQuery 33
    class也是<p>要素的习性,因而收获class和装置class都得以选取attr()方法来形成。
    如:
    jQuery 34

jQuery 35
在大部地方下,它是将本来的class替换为新的class,而不是在原来的笨础上加码新的class。

  • 2.追加体裁
    addClass()方法:
    jQuery 36
    其中,another为:
    jQuery 37
    若对某成分赋予多少个样式,CSS有以下规定:
    (1)借使给贰个因素添加了多少个class值,那么就约等于统一了它们的体制。
    (2)要是有例外的class设定了平等样式属性,则后者覆盖前者。
    jQuery 38

  • 3.移除样式
    removeClass()
    jQuery 39
    移除两个样式:
    jQuery 40
    移除全体体裁:
    jQuery 41

  • 4.切换样式
    toggleClass()
    倘诺类名存在则删除它,假设类名不设有则增进它。
    如:
    jQuery 42

  • 5.断定是或不是包蕴某些样式
    hasClass()
    hasClass()能够用来判定成分中是不是包涵某些class,假如有,则赶回true,不然再次来到false.
    jQuery 43

3.2.10 设置和收获HTML、文本和值

  • 1.html()方法
    此方法类似于1a}aScript中的innerHTML属性,能够用来读取大概安装有个别成分中的HTML内容。
    jQuery 44
    jQuery 45
    结果为:
    jQuery 46
    万一急需安装某元素的HTML代码,那么也得以选拔该形式,不过须要为它传递二个参数。例如要安装<p>要素的HTML代码,能够选用如下代码:
    jQuery 47
  • 2.text()方法
    此办法类似于JavaScript中的innerText属性,能够川来读取恐怕设置某些成分中的文本内容。
    jQuery 48
    jQuery 49
    结果为:
    jQuery 50
    与html()方法一致,如若要求为某成分设置文本内容,那么也亟需为text()方法传递二个参数。

  • 3.val()方法
    此措施类似于JavaScript中的value属性,能够用来设置和收获成分的值。无论元素是文本框,下拉列表依然单选框,它都足以回去成分的值。假如成分为多选,则赶回3个带有全数选取的值的数组。
    jQuery 51
    地方址框获取鼠标大旨时,如若地点框的值为“请输入邮箱地址::
    “,则将地点框中的值清空。能够运用如下的jQuery代码:
    jQuery 52
    jQuery 53

地面址框失去鼠标主旨时,倘若地点框的值为空,则将地点框的值设置为“清输入邮箱地址”。能够利用如下的jQuery代码:

jQuery 54

focus()方法也便是JavaScript中的。onfocus()方法,功能是拍卖获得主旨时的轩然大波。
blur()方法相当于JavaScript中的。onblur()方法,功用是处理失去核心时的事件。

通过下面的例证能够窥见val()方法不仅能设置成分的值,同时也能得到元素的值。其它,val()方法还有此外贰个用处,正是它能使select
( 下拉列表框),
checkbox(多选框)和radio(单选框)相应的选项被入选,在表单操作中会平时用到。
jQuery 55
该网页中一些要素是暗许选中的,可以通过Val()方法来改变它们的选中项。
jQuery 56
jQuery 57

Note:
在jQuery中,val()方法是从最终贰个精选往前读取,假若采用的value恐怕text中肆意一项符合就会被选中。例如:
jQuery 58
甭管使用var("选择1号")jQuery,还是val("选择2号"),最后都会入选后边的多少个option。

3.2.11 遍历节点

  • 1.children()方法
    该方法用于获取匹配成分的子成分集合。

    Note
    children()方法只考虑子成分而不考虑任何后代成分。

  • 2.next()方法
    该措施用于获取匹配成分后边紧邻的同辈成分。

  • 3.prev()方法
    该措施用于获取匹配成分后边紧邻的同辈成分。

  • 4.siblings()方法
    该办法用于获取匹配元素前后全部的同辈成分。

  • 5.closest()方法
    它用来收获近来的匹配成分。首先检查当前因素是不是匹配,如果匹配则直接返网成分自身。
    如给点击的靶子成分的近来的 li 成分添加颜色,能够接纳如下代码:
    jQuery 59

除开,在jQuery中还有众多遍历节点的章程,例如find(), filter()
nextAll(),prevAll(),
parent()和parents()等,此处不再赘述,读者能够查看附录的jQuery速查表文书档案。

3.2.12 CSS-DOM操作

CSS-DOM技术一言以蔽之就是读取和安装style对象的种种品质。
jQuery 60
jQuery 61
jQuery 62

Note:
(1)要是值是数字,将会被自动转接为像素值。
(2)在css()方法中,如若属性中带有 “-”
符号,例如font-size和background-color属性,假若在设置这一个属性的值的时候不带引号,那么就要用驼峰式写法,例如:
jQuery 63
一旦带上了引号,既能够写成“font-size”,也足以写成
“fontSize”.由此可知建议大家添加引号,养成优良的习惯。

除此以外,在CSS-DOM中,还有以下多少个平常采用的主意。

  • 1.offset()方法
    它的效能是获得元素在当下视窗的周旋偏移,在那之中再次回到的靶子涵盖八个属性,即top和left只对可知元素有效。
  • 2.position()方法
    它的成效是获得成分相对于方今的3个position样式属性设置为relative或然absolute的祖父节点的相对偏移,与offset()一样,它回到的靶子也蕴涵七个本性,即top和left。
  • 3.scollTop()和scrollLeft()方法
    那五个主意的成效分别是收获成分的轮转条距顶端的偏离和距右侧的相距。

相关文章

网站地图xml地图