3.一 DOM操作的归类

诚如的话,DOM操作分为三个方面,即DOM Core(焦点)、HTML-DOM和CSS-DDM.

  • 1.DOM Core
    DOM
    Core并不依附于JavaScript,任何1种帮忙DOM的主次设计语言都足以选取它。它的用处并非仅限于处理网页,也得以用来处理任何1种采纳标记语言编写出来的文档,例如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操作

叁.2.一 查找节点

  • 一.查找元穷秋点
    图片 1
  • 贰.查找属性节点
    图片 2

三.2.贰 创设节点

  • 一.创设成分节点
    $(html)方法会依照传入的HTML标识字符串,创立叁个DOM对象,并将以此DOM对象包装成二个jQuery对象后重返。
    如:
    图片 3
    图片 4

  • 2.创办理文件本节点
    始建文本节点就是在开立成分节点时直接把文件内容写出来。
    如:
    图片 5

  • 叁.创造属性节点
    成立属性节点一与创制文本节点类似,也是直接在创变成分节点时二头创立。
    如:
    图片 6

叁.二.三 插入节点

动态创制HTML成分并从未实际用处,还须要将新创设的因素插入文书档案中。将新创造的节点插入文书档案最简易的法子是,让它形成这些文书档案的某部一节点的子节点。后面使用了3个插入节点的方法append(),它会在要素内部追加新创立的剧情。
图片 7
图片 8
那么些插入节点的不二等秘书诀不但能将新创制的DOM成分插入到文书档案中,也能对本来的DOM成分进行活动。
如:
图片 9
图片 10

三.二.四 删除节点

  • 1.remove()方法
    功能是从DOM中剔除全数匹配的元素,传入的参数用于依据jQuery表达式来筛选成分。

当有个别节点用remove()方法删除后,该节点所蕴藏的全数后代节点将同时被删去。这几个方法的重临值是1个对准已被剔除的节点的引用,由此得以在此后再使用那几个因素。
如:
图片 11

别的remove()方法也足以由此传递参数来采用性地删除成分,jQuery代码如:
图片 12

  • 2.empty()方法
    从严来讲,empty()方法并不是删除节点,而是清空节点,它能清空成分中的全体后代节点。
    图片 13
    图片 14
    元素<li>并不曾去除,只是个中的成分节点被删除了`

叁.2.5 复制节点

商品拖动功用正是用的复制节点,将用户挑选的物品所处的节点成分复制1回,并将其随从鼠标移动,从而达到以下购物效果。
图片 15
在页面中单击“黄梨”后,列表最下方现身新节点“黄梨”:
图片 16
动态绑定
复制节点后,被复制的新因素并不有所别的表现。假若需求新成分也富有复制功能(本例中是单击事件),能够使用如下jQuery代码:
图片 17
在clone[)方法中传递了一个参数true,它的意义是复制成分的还要复制成分中所绑定的轩然大波。由此该因素的别本壹也一致持有复制成效(本例中是单击事件)。

三.贰.六 替换节点

倘若要替换有些节点,jQuery提供了相应的办法,即replaceWith()和replaceAll()。
图片 18
艺术replaceAll())与replaceWith()方法的意义,只是颠倒了操作成分:
图片 19
图片 20

叁.二.7 包裹节点

固然要将有些节点用别样标记包裹起来,jQuery提供了相应的措施,即wrap()。该格局对于急需在文书档案中插入额外的结构化标志卓殊有用,而且它不会毁掉原有文书档案的语义。
图片 21
结果为:
图片 22

包装节点操作还有其余多个措施,即wrapAll()和wraplnner():

  • 1.wrapAll()方法
    图片 23
    图片 24
    收获的结果为:
    图片 25

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

  • 2.wrapInner()方法
    该办法将梅二个合营的因素的子内容(包蕴文件节点)用此外结构化的暗号包裹起来。例如能够接纳它来包裹<strong>标签的子内容,jQuery代码如下:
    图片 27
    结果为:
    图片 28

三.2.八 属性操作

  • 一.获得属性和安装属性
    设若要获得<p>要素的本性title,那么只须要给attr()方法传递3个参数,即属性名称。
    图片 29
    假诺要安装<p>要素的品质title的值,也足以动用同3个方法,不一样的是,供给传递四个参数即属性名称和对应的值。
    图片 30
    2次性设置多少个本性:
    图片 31

    Note:
    jQuery中的许多方式都是同2个函数完结获取(getter)和安装(
    setter)的,例如地点的att()方法,既能设置成分属性的值,也能博取元素属性的值。类似的还有html(),
    text(), height(), width(), val()和css()等艺术。

  • 二.剔除属性
    removeAttr()方法:
    图片 32

叁.二.玖 体裁操作

  1. 收获样式和设置样式
    图片 33
    class也是<p>要素的属性,由此赢得class和设置class都能够选用attr()方法来成功。
    如:
    图片 34

图片 35
在大部情景下,它是将原先的class替换为新的class,而不是在本来的笨础上扩充新的class。

  • 2.追加体制
    addClass()方法:
    图片 36
    其中,another为:
    图片 37
    若对某成分赋予多少个样式,CSS有以下规定:
    (一)借使给一个因素加多了四个class值,那么就约等于联合了它们的样式。
    (二)如若有两样的class设定了扳平样式属性,则后者覆盖前者。
    图片 38

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

  • 四.切换样式
    toggleClass()
    若果类名存在则删除它,如若类名不设有则增进它。
    如:
    图片 42

  • 伍.剖断是不是包蕴有些样式
    hasClass()
    hasClass()能够用来判定成分中是还是不是带有有个别class,倘若有,则赶回true,不然重回false.
    图片 43

三.二.10 设置和获得HTML、文本和值

  • 1.html()方法
    此格局类似于1a}aScript中的innerHTML属性,能够用来读取或许安装有些成分中的HTML内容。
    图片 44
    图片 45
    结果为:
    图片 46
    要是须要设置某成分的HTML代码,那么也足以动用该措施,不过须要为它传递3个参数。例如要设置<p>要素的HTML代码,能够利用如下代码:
    图片 47
  • 2.text()方法
    此办法类似于JavaScript中的innerText属性,能够川来读取可能安装某些成分中的文本内容。
    图片 48
    图片 49
    结果为:
    图片 50
    与html()方法一致,若是急需为某成分设置文本内容,那么也急需为text()方法传递三个参数。

  • 3.val()方法
    此措施类似于JavaScript中的value属性,能够用来安装和获得成分的值。无论成分是文本框,下拉列表依然单选框,它都得以再次回到成分的值。就算成分为多选,则赶回2个包罗全体采取的值的数组。
    图片 51
    地面址框获取鼠标核心时,借使地点框的值为“请输入邮箱地址::
    “,则将地址框中的值清空。能够动用如下的jQuery代码:
    图片 52
    图片 53

本地址框失去鼠标宗旨时,借使地点框的值为空,则将地点框的值设置为“清输入邮箱地址”。可以动用如下的jQuery代码:

图片 54

focus()方法相当于JavaScript中的。onfocus()方法,功效是处理拿到宗旨时的风浪。
blur()方法约等于JavaScript中的。onblur()方法,成效是拍卖失去核心时的事件。

透过地点的事例能够窥见val()方法不但能安装成分的值,同时也能获得成分的值。此外,val()方法还有别的二个用处,正是它能使select
( 下拉列表框),
checkbox(多选框)和radio(单选框)相应的选项被入选,在表单操作中会常常用到。
图片 55
该网页中有个别要素是私下认可选中的,能够透过Val()方法来改换它们的选中项。
图片 56
图片 57

Note:
在jQuery中,val()方法是从最终2个挑选往前读取,如若采取的value恐怕text中四意一项符合就会被选中。例如:
图片 58
任凭使用var("选择1号")还是val("选择2号"),最后都会选中前面包车型地铁3个option。

3.2.1一 遍历节点

  • 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:
(一)假设值是数字,将会被自动转载为像素值。
(二)在css()方法中,假诺属性中包罗 “-”
符号,例如font-size和background-color属性,假如在安装这个属性的值的时候不带引号,那么就要用驼峰式写法,例如:
图片 63
假如带上了引号,既能够写成“font-size”,也能够写成
“fontSize”.总之提议我们增多引号,养成出色的习惯。

此外,在CSS-DOM中,还有以下多少个平时应用的艺术。

  • 1.offset()方法
    它的效果是赢得元素在此时此刻视窗的对峙偏移,个中重临的靶子涵盖三个性格,即top和left只对可见成分有效。
  • 2.position()方法
    它的法力是获得成分相对于如今的2个position样式属性设置为relative可能absolute的五伯节点的相对偏移,与offset()同样,它回到的对象也囊括七个特性,即top和left。
  • 3.scollTop()和scrollLeft()方法
    这八个章程的功力分别是赢得成分的轮转条距顶端的相距和距右侧的相距。

相关文章

网站地图xml地图