VB.net 2010 视频教程 VB.net 2010 视频教程 VB.net 2010 视频教程
  • JavaScript教程之jQuery 遍历 - 后代

  • 2017-05-09 21:50 来源:未知

新疆25选7中5号多少钱: jQuery 遍历 - 后代


新疆25选7开奖号码 www.d1dx0.cn 后代是子、孙、曾孙等等。

通过 jQuery,您能够向下遍历 DOM 树,以查找元素的后代。


向下遍历 DOM 树

下面是两个用于向下遍历 DOM 树的 jQuery 方法:

  • children()
  • find()

jQuery children() 方法

children() 方法返回被选元素的所有直接子元素。

该方法只会向下一级对 DOM 树进行遍历。

下面的例子返回每个 <div> 元素的所有直接子元素:

实例

$(document).ready(function(){ $("div").children(); });

尝试一下 »

如:
 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.descendants *
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="//cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("div").children().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>
 
<div class="descendants" style="width:500px;">div (当前元素) 
  <p>p (儿子元素)
    <span>span (孙子元素)</span>     
  </p>
  <p>p (儿子元素)
    <span>span (孙子元素)</span>
  </p> 
</div>
 
</body>
</html>

 


您也可以使用可选参数来过滤对子元素的搜索。

下面的例子返回类名为 "1" 的所有 <p> 元素,并且它们是 <div> 的直接子元素:

实例

$(document).ready(function(){ $("div").children("p.1"); });

尝试一下 »

如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.descendants *
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="//cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("div").children("p.1").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>
 
<div class="descendants" style="width:500px;">div (当前元素) 
  <p class="1">p (儿子元素)
    <span>span (孙子元素)</span>     
  </p>
  <p class="2">p (儿子元素)
    <span>span (孙子元素)</span>
  </p> 
</div>
 
</body>
</html>

 

jQuery find() 方法

find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。

下面的例子返回属于 <div> 后代的所有 <span> 元素:

实例

$(document).ready(function(){ $("div").find("span"); });

尝试一下 »

如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.descendants *
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="//cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("div").find("span").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>
 
<div class="descendants" style="width:500px;">div (当前元素) 
  <p>p (儿子元素)
    <span>span (孙子元素)</span>     
  </p>
  <p>p (儿子元素)
    <span>span (孙子元素)</span>
  </p> 
</div>
 
</body>
</html>


下面的例子返回 <div> 的所有后代:

实例

$(document).ready(function(){ $("div").find("*"); });
如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.descendants *
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="//cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("div").find("*").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>
 
<div class="descendants" style="width:500px;">div (当前元素) 
  <p>p (儿子元素)
    <span>span (孙子元素)</span>     
  </p>
  <p>p (儿子元素)
    <span>span (孙子元素)</span>
  </p> 
</div>
 
</body>
</html>
相关教程
  • 坚持思想建党 推进理论强党 2018-12-18
  • 苏57空中姿态控制能力瞬间救场, F22隐身战机无法超越! 2018-12-18
  • 河北省对中央环保督察“回头看”问题整改进行部署 强化标本兼治 防止整改问题反弹 2018-12-18
  • 文天祥就义秘闻:时人写“生祭文”催其速死成就英名 2018-12-18
  • 在学习中进步。[奋斗] 2018-12-17
  • 香港海关加强查检堵截涉世界杯赛事侵权物品 2018-12-17
  • 中兴展台图赏:可折叠手机AXON M吸睛丨CES2018 2018-12-17
  • 逛博物馆 淳化大鼎的身世之谜:是何方显贵之物? 2018-12-16
  • 大陆首批台湾乘务员晋升乘务长 2018-12-16
  • 端午假期国内游客超8900万人次 全域旅游见成效 2018-12-15
  • 好,那我领教一下,回答我提出的问题 2018-12-15
  • 藏医保健常识:保肝护肝有讲究 2018-12-15
  • 回复@海之宁:所以那时候跟着混的人很多!反正又不是自己的,搞好了也没啥好处,搞砸了也不会挨罚…… 2018-12-14
  • 候选企业:江苏洋河酒厂股份有限公司 2018-12-14
  • 偶像玄幻剧陆续定档暑期 荧屏满溢青春气息 2018-12-14
  • 841| 623| 530| 982| 611| 976| 361| 915| 979| 163|