取得某个元素的父元素或者祖先元素都是基本的操作,而这里正是需要用到jQuery的DOM遍历方法的地方。通过这些方法,我们可以轻而易举地在DOM树中上下左右地自由漫步。
<3.1> .filter(expr|obj|ele|fn)语法:Queryfilter(expr|obj|ele|fn)
定义:筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式
示例:
HTML代码:
>And Again</p>
jQuery代码:
).filter()
结果:
>And Again</p> ]
更详细的说明查看具体API
<3.2> .next()和.nextAll语法:next([expr]) nextAll([expr])
定义:取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。这个函数只返回后面那个紧邻的同辈元素,而不是后面所有的同辈元素(可以使用nextAll)。可以用一个可选的表达式进行筛选。
示例:
HTML代码:
1 <p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>
jQuery代码:
).next()
结果:
1 [ <p>Hello Again</p>, <div><span>And Again</span></div> ]
<3.3> .prev()和.prevAll语法:prev([expr]) prevAll([expr])
定义:取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到,而不是前面所有的同辈元素(prevAll)。
示例:
HTML代码:
1 <p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
jQuery代码:
).prev()
结果:
1 [ <div><span>Hello Again</span></div> ]
<3.4> .siblings()语法:siblings([expr])
定义:取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。
示例:
HTML代码:
>Hello Again</p><p>And Again</p>
jQuery代码:
).siblings()
结果:
>Hello Again</p> ]
<3.5> .andSelf()语法:andSelf()
定义:加入先前所选的加入当前元素中,对于筛选或查找后的元素,要加入先前所选元素时将会很有用。
示例:(选取所有div以及内部的p,并加上border类)
HTML代码:
1 <div><p>First Paragraph</p><p>Second Paragraph</p></div>
jQuery代码:
).find().andSelf().addClass();
结果:
> >First Paragraph</p> >Second Paragraph</p> 4 </div>
<3.6> .parent([expr]) 和 .children([expr])定义:
parents()将查找所有祖辈元素,而children()只考虑子元素而不考虑所有后代元素。
.parent([expr]) —— 取得一个包含着所有匹配元素的唯一父元素的元素集合。(可以使用可选的表达式来筛选。)
.children([expr]) —— 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。(可以使用可选的表达式来筛选。)
示例1:(查找每个段落的父元素)
HTML代码:
1 <div><p>Hello</p><p>Hello</p></div>
jQuery代码:
).parent()
结果:
1 [ <div><p>Hello</p><p>Hello</p></div>]
示例2:(查找DIV中的每个子元素。)
HTML代码:
1 <p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
jQuery代码:
).children()
结果:
1 [ <span>Hello Again</span> ]
4.访问DOM元素有时候我们可能需要在代码中直接访问DOM元素(get(index)),例如,获取id="my-element"属性的元素的标签名:
)[0].tagName;
参考资料:
《jQuery基础教程(第三版)》
jQuery 1.8.0 API文档 (点击下载)