jQuery遍历节点-find()方法使用说明

find(selector)

此方法用于在匹配元素的后代元素中按照选择器表达式进行筛选。
记住：使用此方法必须得传入选择器表达式参数，不然是获取不到任何元素的，也就失去了使用此方法的意义了。

我最近才想明白，利用jquery方法如何找到一个元素中的所有的后代元素。使用这个.find()方法就可以轻松地做到。
来看例子：

 代码如下 复制代码

<div id="level_one">
    我是最外一层的div纯文本内容
    <div>
        我是第二层div的纯文本内容
        <span>jquery基础教程</span>
        <span class="item">jquery教程</span>
    </div>
    <div>
        我也是第二层div的纯文本内容
        <span class="item">PHP学习</span>
        <span>PHP教程</span>
    </div>
</div>

$("#level_one").find("*").length;//这个就是获取id为“level_one”的div中的所有的元素的个数，结果为6。
$("#level_one").find("div").length;//会获取到2个元素
$("#level_one").find("span").length;//会获取到4个元素
$("#level_one").find("span.item").length;//会获取到2个元素

例1

 代码如下 复制代码

<style>
#level_one{width:240px;height:360px;border:2px solid #0000FF;padding:10px;float:left}
#level_one div{width:200px;height:150px;border:1px solid #FF0000;margin:10px;}
#level_one div span{float:left;width:150px;height:30px;border:1px solid #999000;margin:10px;}
</style>
<div id="level_one">
 我是最外一层的div纯文本内容
 <div>
  我是第二层div的纯文本内容
  <span>jquery基础教程</span>
  <span>jquery教程</span>
 </div>
 <div>
  我也是第二层div的纯文本内容
  <span>PHP学习</span>
  <span>PHP教程</span>
 </div>
</div>
<input type="button" id="test1" value="获取div#level_one的所有后代元素">
<input type="button" id="test2" value="获取div#level_one的中的span">
<input type="button" id="test3" value="获取div#level_one的中的div">

<script>
$(function(){
 $("#test1").click(function(){
  alert($("#level_one").find("*").length);
 });
 $("#test2").click(function(){
  alert($("#level_one").find("span").length);
 });
 $("#test3").click(function(){
  alert($("#level_one").find("div").length);
 });
})
</script>

其实上面的jquery代码和下面的jquery代码的效果是一样的。

 代码如下 复制代码

$("#level_one *").length;//会获取到6个元素
$("#level_one div").length;//会获取到2个元素
$("#level_one span").length;//会获取到4个元素
$("#level_one span.item").length;//会获取到2个元素

exp1

 代码如下 复制代码

<style>
#level_one{width:240px;height:360px;border:2px solid #0000FF;padding:10px;float:left}
#level_one div{width:200px;height:150px;border:1px solid #FF0000;margin:10px;}
#level_one div span{float:left;width:150px;height:30px;border:1px solid #999000;margin:10px;}
</style>
<div id="level_one">
 我是最外一层的div纯文本内容
 <div>
  我是第二层div的纯文本内容
  <span>jquery基础教程</span>
  <span class="item">jquery教程</span>
 </div>
 <div>
  我也是第二层div的纯文本内容
  <span class="item">PHP学习</span>
  <span>PHP教程</span>
 </div>
</div>
<font color="#FF0000">点击下面的button都是在id为level_one的div中筛选元素</font><br>
<input type="button" id="test1" value="获取所有后代元素的个数"><br>
<input type="button" id="test2" value="获取span的个数"><br>
<input type="button" id="test3" value="获取div的个数"><br>
<input type="button" id="test4" value="获取class为item的span的个数"><br>
<script>
$(function(){
 $("#test1").click(function(){
  alert($("#level_one *").length);
 });
 $("#test2").click(function(){
  alert($("#level_one span").length);
 });
 $("#test3").click(function(){
  alert($("#level_one div").length);
 });
 $("#test4").click(function(){
  alert($("#level_one span.item").length);
 });
})
</script>
时间： 2024-09-27 13:57:17

jQuery遍历节点-find()方法使用说明的相关文章

jQuery遍历节点树方法分析_jquery

本文实例讲述了jQuery遍历节点树方法.分享给大家供大家参考,具体如下: demo.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.10.1.min.js" type=&

jquery 遍历节点-parent()方法

jquery a遍历节点-parent()方法 .parent([selector])方法返回的是每一个匹配的元素的父元素的集合. 这里selector是可选参数,是用于过滤父元素的选择器表达式. HTML代码:  <DIV class=demo>   <DIV><p><A title=jquery href="/">jquery</A>学习</p></DIV>   <DIV class=sele

jQuery遍历节点-closest()方法使用详解

closest() 此方法获取第一个相匹配的祖先元素,注意:起始点包括自身元素. 另外这个方法是必须要传入一个选择器表达式参数的,如果不传入参数的话,就会返回一个空的jquery对象. 要注意这个方法和jquery中的parents()方法的区别. 下面来看实例:  代码如下 复制代码 <div class="demo">梦三秋博客     <ul>         <li>第一个li</li>         <li class=

jQuery基础教程之遍历节点siblings()方法使用说明

siblings()方法 .siblings([selector]) 此方法获取每个匹配元素的前后所有的同辈元素,然后作为一个jquery包装集返回.另外还可以传递一个选择器表达式参数给它,在这些同辈元素中进行筛选. 接下来看两个例子:  代码如下 复制代码 <ul>     <li>第一个li</li>     <li class="li2">第二个li</li>     <li>第三个li</li>

Jquery遍历节点的方法小集_jquery

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

jQuery 遍历节点之next()方法

next()方法 next([selector]) 此方法取得每个匹配的元素的后一个同辈元素的元素集合. 可以用一个可选的表达式进行筛选.只有紧邻的同辈元素会被匹配到,而不是后面所有的同辈元素. 如果想取得每个匹配元素的前一个同辈元素的元素集合,那么请看这篇文章jQuery教程基础篇之DOM操作-遍历节点-prev()方法 nextAll()方法和nextUntil()方法同jquery%e6%95%99%e7%a8%8b%e5%9f%ba%e7%a1%80%e7%af%87%e4%b9%8bd

jQuery遍历json的方法分析_jquery

本文实例分析了jQuery遍历json的方法.分享给大家供大家参考,具体如下: 复制代码 代码如下: var obj = {"status":1,"bkmsg":"\u6210\u529f","bkdata":["\u5415\u5c1a\u5fd7","1387580400","\u6dfb\u52a0\u8bb0\u5f55"]}{"status&quo

jquery parent()与parents()方法使用说明

遍历节点-parents()方法 .parents([selector])方法返回的是每一个匹配的元素的祖先元素的集合,这些祖先元素中,会包含html这个元素,我们还可以通过传入一个参数来对这些祖先元素进行筛选. 但是在jquery1.4.4 API中文chm文档中却是这样说的: 取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素).可以通过一个可选的表达式进行筛选. 但是我测试过了根元素html的确是可以取到的. 下面来看测试代码:  代码如下 复制代码 <HTML>   <

jquery 遍历数组 each 方法详解_jquery

JQuery拿取对象的方式 $('#id') :通过元素的id $('tagName') : 通过元素的标签名 $('tagName tagName') : 通过元素的标签名,eg: $('ul li') $('tagName#id): 通过元素的id和标签名 $(':checkbox'):拿取input的 type为checkbox'的所有元素: Eg: <input type="checkbox" name="appetizers" value="