锋利的jQuery之jQuery DOM操作

2014-10-07 assassin5578

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()方法,获取(无参数)和设置(数值参数)元素的滚动条距离顶端和左侧的距离。

 

 


用户评论
开源开发学习小组列表