全栈工程师开发手册 (作者:栾鹏)

jquery系列教程2-DOM操作全解

jquery遍历元素

jquery元素的函数包括children、find、parent、parents、parentsUntil、next、prev、siblings、closest、filter、not,具体功能如代码中注释。

代码如下:

var $body_child = $("body").children();         //children获取一级子元素,不获取其他后代元素
$body_child=$("body").find("div"); //find获取所有后代元素,括号内进行筛选
var $body = $body_child[0].parent(); //parent获取直接父元素
var $div_parents = $body_child[0].parents('body'); //parents获取所有祖先元素列表,一直到html根节点,可以通过参数在父元素进一步筛选
$div_parents = $body_child[0].parentsUntil("body"); //两个元素之间的所有祖先元素
var $div1 = $body_child[0].next(); //next后一个同辈元素,nextAll后面的所有同胞元素,nextUntil介于两个元素之间的所有同胞元素
var $div2 = $body_child[2].prev(); //prev前一个同辈元素,prevAll之前的所有同胞元素,prevUntil()介于两个元素之间的所有同胞元素
var $alldiv = $body_child[2].siblings(); //所有兄弟元素
var $div3 = $("#div3 label").closest("div"); //查找距离目标元素最近的满足指定选择器参数的元素。由目标元素依次向父元素查询,不查询同胞元素
var $alldiv = $("div").filter(".divclass"); //filter过滤元素,满足的留下,参数为选择器
$alldiv = $("div").not(".divclass"); //not过滤元素,不满足的留下,参数为选择器