首页 » jQuery » JQuery_dom属性操作、节点遍历及包裹

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

原文 http://blog.csdn.net/pseudonym_/article/details/76268401

2017-07-28 17:20:04阅读(620)

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.

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹