JQuery_dom属性操作、节点遍历及包裹

 JQuery中对dom属性的操作和遍历节点。

1. attr()属性操作

 attr()的作用是获取属性和设置属性。

<1>当为该方法传递一个参数时, 即为某元素的获取指定属性。

<2>当为该方法传递两个参数时, 即为某元素设置指定属性。

<3>jQuery 中有很多方法都是一个函数实现获取和设置. 如: attr(), html(), text(), val(), height(), width(), css() 等。

<4>removeAttr(“属性名”): 删除指定元素的指定属性。

2. 样式操作

<1>获取 class 和设置 class

 class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成。

<2>追加样式：addClass（）

<3>移除样式

 removeClass() — 从匹配的元素中删除全部或指定的 class。

<4>切换样式

 toggleClass() — 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它。

注意：

 在使用toggleClass的时候，我们会很经常不小心把它写成toggle，这两个方法具有很大的不同。toggle这个函数的作用是：回判断当前元素是否为隐藏，如果为隐藏状态，则调用JQuery的show方法，进行显示。如果为显示状态，则就会调用JQuery的hide方法进行隐藏。

<5>判断是否含有某个样式

 hasClass() — 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false。

3. 遍历节点

children()

:取得匹配元素的所有子元素组成的集合，该方法只考虑子元素而不考虑任何后代元素。

next()

:取得匹配元素后面紧邻的同辈元素下一个元素。经常应用于图片切换。

prev()

取得匹配元素前面紧邻的同辈元素上一个元素。经常用于图片切换。

siblings

:取得匹配元素前后所有的同辈元素。

4. 节点包裹

<1>wrap()

 将匹配到的元素使用指定标签进行逐个包裹。

<strong title="jQuery">jQuery</strong>
<strong title="jQuery">jQuery</strong>
//jQuery代码如下
$("strong").wrap("<b></b>");

//得到的结果如下
<b><strong title="jQuery">jQuery</strong></b>
<b><strong title="jQuery">jQuery</strong></b>

<2>wrapAll()

 将匹配到的元素使用指定标签进行整体包裹

<strong title="jQuery">jQuery</strong>
<strong title="jQuery">jQuery</strong>
//jQuery代码如下：
$("strong").wrapAll("<b></b>");

//得到的结果如下
<b>
<strong title="jQuery">jQuery</strong>
<strong title="jQuery">jQuery</strong>
</b>

<3>wrapInner()

 将匹配到的元素使用指定标签进行内部逐个包裹。

<strong title="jQuery">jQuery</strong>
//jQuery代码如下：
$("strong"). wrapInner("<b></b>");

//得到的结果如下
<strong title="jQuery"><b>jQuery</b></strong>

5.