jQuery 之路重走(4) jQuery中的DOM操作

前言:

这一篇,开始jQuery中的DOM操作,可以说,DOM操作是在上一篇选择器的基础上的升华,两者结合起来,完成jQuery强大的功能。


下来开始截图 大笑


jQuery 之路重走(4) jQuery中的DOM操作_第1张图片


1. 一个例子介绍一下DOM 

jQuery 之路重走(4) jQuery中的DOM操作_第2张图片


2. jQuery中的DOM 操作

2.1 查找节点

2.1.1查找元素节点

使用jQuery 在文档中数上查找节点非常容易:


2.1.2 查找属性节点

jQuery 之路重走(4) jQuery中的DOM操作_第3张图片

2.2 创建节点

2.2.1创建元素节点


2.2.2 创建文本节点

jQuery 之路重走(4) jQuery中的DOM操作_第4张图片

2.2.3 创建属性节点

jQuery 之路重走(4) jQuery中的DOM操作_第5张图片

2.3 插入节点

这是重点!

2.4 删除节点

如果文档中一个元素是多余的,或者需要删除等操作,可以用remove() 和empty() 两个操作。

2.4.1 remove() 方法

jQuery 之路重走(4) jQuery中的DOM操作_第6张图片

2.4.2 empty() 方法

jQuery 之路重走(4) jQuery中的DOM操作_第7张图片

2.5 复制节点


2.6 替换节点

如果要替换某个节点,jQuery提供了2个方法,分别是replaceWith() 和replaceAll(),两个方法功能一样,只不过一个放在前面一个放在后面。

jQuery 之路重走(4) jQuery中的DOM操作_第8张图片

2.7 包裹节点

jQuery 之路重走(4) jQuery中的DOM操作_第9张图片

2.7.1 wrapALL()方法

2.7.4 wrapInner()方法

2.8 属性操作

jQuery 之路重走(4) jQuery中的DOM操作_第10张图片

2.9 样式操作

2.9.1 获取样式和设置样式

2.9.2 追加样式

jQuery 提供了addClass() 方法来追加样式

jQuery 之路重走(4) jQuery中的DOM操作_第11张图片

2.9.3 移除样式


2.9.4 切换样式

jQuery 之路重走(4) jQuery中的DOM操作_第12张图片

2.9.5 判断是否含有某个样式

jQuery 之路重走(4) jQuery中的DOM操作_第13张图片

2.10 设置和获取HTML,文本和值

2.10.1 html()方法

jQuery 之路重走(4) jQuery中的DOM操作_第14张图片

2.10.2 text()方法


2.10.3 val() 方法

jQuery 之路重走(4) jQuery中的DOM操作_第15张图片

2.11 遍历节点

2.11.1 children() 方法

jQuery 之路重走(4) jQuery中的DOM操作_第16张图片

2.11.2 next()方法

jQuery 之路重走(4) jQuery中的DOM操作_第17张图片

2.11.3 prev()方法


2.11.4 siblings()方法

jQuery 之路重走(4) jQuery中的DOM操作_第18张图片

2.11.5 closest()方法

jQuery 之路重走(4) jQuery中的DOM操作_第19张图片

3.12 CSS-DOM操作

jQuery 之路重走(4) jQuery中的DOM操作_第20张图片

3.12.1 offset()方法

3.12.2 position()方法

jQuery 之路重走(4) jQuery中的DOM操作_第21张图片

2.12.3 scrollTop()方法和scrollLeft()方法


JQuery DOM完毕,截图累死哥了。

~~~~~~~~~~~


你可能感兴趣的:(jQuery 之路重走(4) jQuery中的DOM操作)