【jQuery中的DOM操作】
1、查找节点(元素、属性)
var $li = $("ul li:eq(1)"); //获取<ul>里的第二个<li>节点
var li_text = $li.text(); //获取元素节点的内容
使用attr()方法来获取元素的各种属性的值,attr()方法的参数可以是一个或两个,一个时,为要查询的属性名字,两个时为属性加值:var p_txt = $div.attr("name","bob");
2、创建节点
使用jQuery的工厂函数$()来完成,$(html)根据传入的html的标记字符串,创建一个DOM对象,并将这个DOM对象包装成jQuery对象后返回。: var $li = $("<li></li>"); (还可以在<li></li>中加完本内容后属性值,用append()方法插入页面中)
3、插入节点
主要方法为append()方法,在元素内部追加新创建的节点,除此之外,还有如下方法:
appendTo() | 将所有匹配的元素追加到指定的元素中,使用方法实际上是颠倒了常规的,$(A).appendTo(B),是将A追加到B中。 |
prepend() | 向每一个匹配的元素内部前置内容 |
prependTo() | 将所匹配的元素前置到指定的元素之前,$(A).prependTo(B),是将A前置到B前面。 |
after() | 在每个匹配的元素之后插入内容 |
insertAfter() | 将所有匹配的元素插入指定的元素后,$(A).insertAfter(B),是将A插入到B后。 |
before() | 在每个匹配元素之前插入内容 |
insertBefore() | 将所匹配的元素插入到指定的元素之前,$(A).insertBefore(B),是将A插入到B前面。 |
append() | 在已有的匹配元素 |
4、删除节点
remove()方法:作用是从DOM中删除所有的匹配元素,传入的参数用于根据jQuery表达式来筛选元素。也可以通过传递参数来选择性的删除元素。元素用remove()方法删除后还是可以继续使用。
detach()方法:和remove()方法相同,与remove不一样的是他所有绑定的事件、附加的数据都会保留下来。
empty()方法:该方法不是用来删除节点的,是用来清空节点的,也能清空元素中的所有后代节点。
5、复制节点
clone():传递一个参数true,他的含义是复制元素的同时复制元素有绑定的事件。(用于选购商品、商品拖动功能等)
6、替换节点
replaceWith()和replaceAll()方法:作用是将所有的匹配元素都替换成指定的HTML,replaceAll()方法颠倒了replaceWith的操作:$("p").replaceWith("<li>~</li>"); $("<li>~</li>").replaceAll("p");
7、包裹节点
wrap()方法:该方法对于需要在文档中插入额外的结构化标记很有用,将所有元素单独包裹,(使用wrap()中的东西包裹其他元素)
wrapAll()方法:将所有匹配的元素用一个元素包裹起来
wrapInner()方法:该方法将每一个匹配的元素的子内容,包括文本节点。
8、属性操作
获取属性和设置属性
获取属性只需要给attr()传递一个参数,即属性名称,设置属性,传两个参数,即属性和属性值。
删除属性
removeAttr()方法,在jQuery1.6中新增了prop()和removeProp().
9、样式操作
attr()和addClass()方法,用来设置 和获取元素的class,添加属性和样式。
addClass()方法用来追加样式。
移除样式
removeClass():用来移除样式,当他不带参数时,就会class的值全部删除,
切换样式:toggle()方法
判断是否含有某个样式:hasClass()方法。
10、设置和获取html、文本和值
html()方法:类似于innerHTML属性,用于获取元素的html代码。
text()方法:用于读取或设置某个元素的文本内容。
val()方法:类似于value属性,用来设置和获取元素的值。
11、遍历节点
children()方法:用于获取匹配元素的子元素集合。
next()方法:用于取得匹配元素后面紧邻的同辈元素。
prev()方法:用于取得匹配元素前面紧邻的同辈元素
siblings()方法:用于取得匹配元素前后所有的同辈元素
closest()方法:用于取得最近的匹配元素。
【css-DOM操作】
css()方法获取样式属性,
offset()方法:获取元素在当前视窗的相对偏移量。
position()方法:获取元素相随最进的一个position样式属性设置relative或者absolute的祖父节点的偏移量。
jQuery对于DOM文本的操作在开发中应用十分广范,需要早不断地练习和理解中掌握。