jQuery对DOM元素的向下遍历

来源：互联网发布：linux wget命令找不到编辑：程序博客网时间：2024/05/16 18:36

这个章节主要写的是jquery中向下遍历，其中可以使用children（）和find（）方法

具体实现如下：

<script src="../JS/Extend.js"></script> <script src="../JS/my.js"></script> <link type="text/css" rel="stylesheet" href="../CSS3/my.css"> </head><body><div id="div1"> <div id="div2">  <p id="p1">   <a>hello world</a>  </p> </div></div> #div1{ width:500px; height:200px; border:3px solid coral;} #div2{ width:400px; height:150px; margin-top:10px; margin-left:10px; border: 3px solid coral;} #p1{ margin-left:10px; margin-top:10px; width:150px; height:80px; border:3px solid coral;}

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

$(document).ready( function (){ $("#div1").children().css({border:"3px solid black"});});

看到此时div1的儿子div2的边框颜色变成了黑色

find()方法的元素遍历:返回被选元素的后代元素，一路向下直到最后一个后代

$(document).ready( function (){ $("#div1").find("a").css({border:"3px solid grey"});});

可以看到此时div1的重孙子a元素出现了灰色边框。

.children()与.find()方法的区别是:children只能对元素的儿子元素进行修改，而find则可以对其所有的子元素进行修改.

在这里补充一个知识点：

我们经常能够用jquery 获取一组dom对象，但是我们只想操作第一个元素时，有什么好方法来用 jquery 第一个元素的呢，用jquery 第一个元素很简单，用到了筛选的方法，假设有这样一段一组列表：

<ul><li>11</li><li>22</li><li>33</li><li>44</li><li>55</li></ul>

我们要取到11 所在的 li 元素，有一下几种方法：

$('ul').find('li:first');$('ul li:first');$('ul li').eq(0);

阅读全文

0 0