Introduction
jQuery选择器选择出来的结果很多时候是一个DOM元素集而非单个元素,jQuery可以灵活的访问和修改DOM元素集,但是所谓的灵活是需要大量的函数的。
由于篇幅和排版问题,本文的demo只是示意用法,完整的用法还请参考在线文档。
从DOM集合中选择元素
get([index])
获取DOM元素集中一个或者多个匹配元素,如:
var ret = $('h3').get(0);
index([element])
和get()相反,index()将获取元素在元素集中的序号,如:
var ret = $('#content').index($('h3'));
将选取h3集合中的第一个元素。
first()
获取DOM元素集中第一个元素,如:
var ret = $('h3').first();
或者
var ret = $('h3:first');
last()
获取DOM元素集中最后一个元素,如:
var ret = $('h3').last();
或者
var ret = $('h3:last');
toArray()
将获取的DOM元素集转换成数组,如:
var ret = $('h3').toArray();
根据相对关系选择元素
children([selector])
获取DOM元素集中,符合选择器条件的子元素集,如:
var ret = $('#context').children($('h3'));
parent([selector])
和children()相反,获取DOM元素集中,符合选择器条件的父元素集,如:
var ret = $('h3').parent($('#context'));
closest([selector])
获取DOM元素集中,符合选择器条件的第一个父/祖先元素,如:
var ret = $('#context').closest($('h3'));
contents()
获取DOM元素集中的子元素,包含注释和文本,如:
var ret = $('#context').contexts();
find([selector])
获取DOM元素集中满足选择器条件的所有元素,如:
var ret = $('#context').find($('h3'));
next([selector])
获取DOM元素集中,当前元素后面的满足选择器条件的下一个元素,如:
var ret = $('#context').next($('h3'));
prev([selector])
和next()相反,获取DOM元素集中,当前元素前面的满足选择器条件的下一个元素,如:
var ret = $('#context').prev($('h3'));
nextAll([selector])
类似next(),获取DOM元素集中,当前元素后面的满足选择器条件的所有元素,如:
var ret = $('#context').nextAll($('h3'));
prevAll([selector])
类似prev(),获取DOM元素集中,当前元素前面的满足选择器条件的所有元素,如:
var ret = $('#context').prevAll($('h3'));
nextUntil([selector])
获取DOM元素集中,直到遇到选择器条件的元素之前的同辈元素,如:
var ret = $('#context').nextUntil($('h3'));
prevUntil([selector])
获取DOM元素集中,直到遇到选择器条件的元素之后的同辈元素,如:
var ret = $('#context').prevUntil($('h3'));
siblings([selector])
获取DOM元素集中,满足选择器条件的所有兄弟元素,如:
var ret = $('#context').siblings($('h3'));
从next开始可能比较绕口,要真正理解其中的差别,需要在实际运用中加以理解。
Summary
本文简要的列出了jQuery集合中筛选DOM元素的函数,列举只是表明常用的函数的范围,更多细节还请参考W3C的jQuery教程。