锋利的jQuery之jQuery DOM操作

1.查找节点

1.1查找元素节点

1.2查找属性节点

 

2.创建节点

2.1创建元素节点

2.2创建文本节点

2.3创建属性节点

 

3.插入节点

append()向每个匹配的元素内部追加内容

appendTo()将所有匹配的元素添加到指定的元素

prepend()在每个匹配的元素内部前置内容

prependTo()将所有匹配的元素前置到指定元素

after()在每个匹配的元素后插入内容

insertAfter()将所有匹配的元素插入到指定元素后

before()在每个匹配的元素前插入内容

insertBefore()将所有匹配的元素插入指定元素之前

 

4.删除节点

4.1 remove()方法

从DOM中删除所有匹配的元素，该节点的子节点也会被删除。返回值为被删除的元素。

remove方法也可以传入参数进行选择性的删除。

4.2 detach()方法

该方法与remove方法的区别是，所有绑定的事件，附加的数据都会保留。

4.3 empty()方法

empty方法是清除节点的内容，包括所有的子节点。

 

5.复制节点

clone()方法用来复制节点。不传参数或传入参数与false等价时，该方法只是简单的复制元素节点，新生成的元素节点不具有任何行为。如果需要新复制的节点与被复制节点有同样的行为，测需要传入参数true。

 

6.替换节点

replaceWith()将所有匹配的元素替换成指定的HTML或DOM元素。

replaceAll()与replaceWith方法的功能类似，只不过两者的操作顺序刚好颠倒。

比如，a.replaceWith(b)与b.replaceAll(a)等价。

替换后的元素不具有任何行为，无论被替换的元素是否有绑定事件。

 

7.包裹节点

wrap()将所有匹配的元素单独用元素包裹。

wrapAll()将所有匹配的元素用一个元素包裹。如果被包裹的多个元素间有其他元素，其他元素会被放到包裹元素之后。

wrapInner()将所有匹配元素的子内容（包括文本节点）用其他结构化的标记包裹起来。

 

8.属性操作

attr()获取（传入属性名作为参数）和设置（传入属性名值对作为参数）元素属性

removeAttr()删除元素属性

prop()V1.6新增，获取和设置匹配元素中的一个元素的属性

removeProp()V1.6新增，删除元素的属性

 

9.样式操作

9.1获取样式和设置样式

$element.attr("class"[, "newClass"])

9.2追加式样

$element.addClass("newClass")

9.3移除样式

$element.removeClass("class")

9.4切换样式

$element.toggle(f1,f2)

9.5判断是否含有某个样式

$element.hasClass("class")

$element.is(".class")

 

10.设置和获取HTML、文本和值

html()方法，用来读取（无参数）和设置（传入字符串作为参数）某个元素中的HTML内容。

text()方法，用来读取（无参数）和设置（传入字符串作为参数）某个元素中的文本内容。

val()方法，用来获取（无参数）和设置（传入元素的value作为参数）元素的值。

 

11.遍历节点

children()方法，获取匹配元素的子元素的集合。该方法只考虑子元素，不考虑其他后代元素。

next()方法，获取匹配元素后面紧临的兄弟元素。

prev()方法，获取匹配元素前面紧临的兄弟元素。

siblings()方法，获取匹配元素前后所有的兄弟元素。

closest()方法，获取最近的匹配元素。

parent(),parents()与closest()方法比较：

parent()获取集合中每个匹配元素的父元素

parents()获取集合中每个匹配元素的祖先元素

closest()从元素自身开始，逐级向上级元素匹配，返回最先匹配到的元素

 

12.CSS-DOM操作

读取和设置style对象的各种属性。

$element.css()，获取（传入属性名作为参数）和设置（传入属性名值对作为参数）css样式。

$element.css("height")与$element.height()的不同，前者获取的高度值与样式的设置有关，可能会得到"auto"等字符串；而后者获取的高度则是元素在页面中的实际高度，与样式的设置无关，且不带单位。

offset()方法，获取元素相对于document的偏移，返回的对象包含两个属性，top和left。该方法仅对可见元素有效。

position()方法，获取元素相对于最近一个position属性为absolute或relative的父元素的相对偏移。返回对象包含两个属性，top和left。

scrollTop()和scrollLeft()方法，获取（无参数）和设置（数值参数）元素的滚动条距离顶端和左侧的距离。

 

 

评论

4 楼 micro-feng 2014-09-12  

1927105 写道

micro-feng 写道

,怎么说呢，相对于document的偏移量就是指相对于视窗的偏移吧？

不对，视窗是指可视区域

嗯，我理解你的意思，一个页面可能会存在多个document吧，那我改一下吧。

3 楼 1927105 2014-09-11  

micro-feng 写道

,怎么说呢，相对于document的偏移量就是指相对于视窗的偏移吧？

不对，视窗是指可视区域

2 楼 micro-feng 2014-09-05  

,怎么说呢，相对于document的偏移量就是指相对于视窗的偏移吧？

1 楼 1927105 2014-09-05  

引用

offset()方法，获取元素在当前视窗中的偏移

这段写错了，应该是相对于document。
获取相对于视窗的偏移量，应该用getClientRect()或者getBoundingClientRect()