jQuery中的DOM操作

【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()方法，在元素内部追加新创建的节点，除此之外，还有如下方法：

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文本的操作在开发中应用十分广范，需要早不断地练习和理解中掌握。