肉渣教程

jQuery 后代

上一节 下一节

jQuery遍历 - 后代(Descendants)

子元素、子元素的子元素、子元素的子元素的子元素……都是后代。

向下遍历DOM树

jQuery提供了2种常用的方法来向下遍历DOM树:

  • children()
  • find()

jQuery children()方法

jQuery中的children()方法会返回指定元素所有的子元素。(备注:元素可能有不只一个子元素;但是孙元素不是子元素)

$(document).ready(function(){
    $("div").children().css({"color": "red", "border": "2px solid red"});
});

运行一下


还可以给children()方法传入一个过滤条件,从而选择出子元素中符合传入条件参数的子元素,如下例所示,会从子元素中选择出class类名为jerk的p元素。

$(document).ready(function(){
    $("div").children("p.jerk").css({"color": "red", "border": "2px solid red"});
});

运行一下

jQuery find()方法

jQuery中的find()方法会返回指定元素中所有符合筛选条件的后代元素。(筛选条件是必选参数)如下例所示,当筛选条件为*时,即返回指定元素中所有的后代元素。

$(document).ready(function(){
    $("div").find("*").css({"color": "red", "border": "2px solid red"});
});

运行一下


当筛选条件为span时,则返回指定元素中后代元素中所有的span元素。

$(document).ready(function(){
    $("div").find("span").css({"color": "red", "border": "2px solid red"});
});

运行一下


jQuery 后代

上一节 下一节