jQuery的DOM

jQUery中的DOM操作

一.DOM简介

DOM(Document Object Model—文档对象模型): 一种与浏览器、平台、语言无关的接口, 使用该接口可以轻松地访问页面中所有的标准组件

DOM操作的分类:

• DOM Core: DOM Core并不专属于JS, 任何一种支持DOM的程序设计语言都可以使用它. 它的用途并非仅限于处理网页, 也可以用来处理任何一种用标记语言编写的文档, 如:XML
• HTML DOM: 使用JS和DOM为HTML文件编写脚本时, 有许多专属于HTML-DOM的属性
• CSS-DOM: 针对于CSS操作, 在JS中, CSS-DOM主要用于获取和设置style对象的各种属性

二.jQuery操作HTML-DOM

1.查找结点

1. 查找属性结点: 通过jQuery选择器完成
2. 操作属性节点: 查找到元素对应节点后, 通过jQuery对象的attr()方法来获取它的各属性值
3. 操作文本节点: 通过text()方法

2.创建节点

使用jQuery的工厂函数$(str); 会根据传入的html格式str字符串, 创建一个DOM对象, 并把这个DOM对象包装成一个jQuery对象返回.

注意:

1. 创建的新元素节点不会被自动添加到文档中, 需要手动调用jQuery的方法插入到当前文档.
2. 当创建单个元素时, 标签开始, 必须要结束该标签.例: $("
   ")

创建文本节点就是在创建元素节点时直接将文本内容写进去; 创建属性节点也是这样.

3.插入节点

这些方法插入的节点都将成为文档中某个节点的子节点.

以上方法不但能将新创建的DOM元素插入到文档中, 也能对原有的DOM元素进行移动.

1
2
3
4
5
6

//下面两种方法等价:
$("#id").append("<p>我是追加的内容</p>");
$("<p>我是追加的内容</p>").appendTo($("#id"));
//prepend与prependTo和上述方法类似
//after与insertAfter和上述方法类似
//before与insertBefore和上述方法类似

4.删除节点

remove(): 从DOM中删除所有匹配的元素, 传入的参数用于根据jQuery表达式来筛选元素. 当某个节点用remove()方法删除后, 该节点以及所包含的所有后代节点将被同时删除. 这个方法的返回值是一个指向已被删除的节点的引用.

empty(): 清空节点—清空元素中的所有后代节点(不包括属性节点).

5.复制节点

clone(): 克隆匹配的DOM元素, 返回值为克隆后的副本. 此时复制的节点不具有任何行为.

clone(true): 复制元素的同时也可复制元素中的事件.

6.替换节点

replaceWith(): 将所有匹配到的元素都替换为指定的HTML或DOM元素

replaceAll(): 颠倒了的replaceWith()方法, 与append()与appendTo()方法类似

注意: 若在替换之前, 已在元素上绑定了事件, 替换之后原先绑定的事件会与原来的元素一起消失.

若想互换文档中的两个节点的话, 要先克隆其中一个节点.

7.包裹节点

做一些网页特效时, 往往会用到这些方法.

wrap(): 将匹配到的所有元素一个个用其他元素包裹起来

wrapAll(): 将匹配到的所有元素作为整体用一个元素包裹起来

wrapInner(): 将每一个匹配元素的内容用其他结构化标记包裹起来

1
2
3

//例:
$("li").wrap("<font color='red'></font>");
//之后所有的li将变为:<font color='red'><li>...</li></font>

三.jQuery操作CSS-DOM

1.操作class属性

获取和设置class属性都可以使用attr()方法, 也可以使用专门的

2.操作元素样式

操作元素的css样式, 均可通过 css() 方法实现

1. 通过opacity属性操作元素透明度: css(“opacity”,value);
2. 通过width和height属性操作元素宽高, 也可直接用width()和height()方法操作

获取元素在当前视窗中的相对位移: offset()方法. 其返回的对象包含两个属性: top和left. 该方法只对可见元素有效