jQuery遍历节点-find()方法使用说明
2013-09-05 20:25
671 查看
find()方法在jquery是匹配元素的后代元素中按照选择器表达式进行筛选,它可以根据传入的参数进入筛选遍历,下面我来给各位同学详细介绍。find(selector)
此方法用于在匹配元素的后代元素中按照选择器表达式进行筛选。
记住:使用此方法必须得传入选择器表达式参数,不然是获取不到任何元素的,也就失去了使用此方法的意义了。
我最近才想明白,利用jquery方法如何找到一个元素中的所有的后代元素。使用这个.find()方法就可以轻松地做到。
来看例子:
其实上面的jquery代码和下面的jquery代码的效果是一样的。
此方法用于在匹配元素的后代元素中按照选择器表达式进行筛选。
记住:使用此方法必须得传入选择器表达式参数,不然是获取不到任何元素的,也就失去了使用此方法的意义了。
我最近才想明白,利用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>
相关文章推荐
- jQuery遍历节点-find()方法使用说明
- jQuery基础教程之遍历节点siblings()方法使用说明
- Jquery节点遍历next与nextAll方法使用示例
- jQuery基础教程之DOM操作-遍历节点-find()方法
- jQuery遍历节点-closest()方法使用详解
- Jquery节点遍历next与nextAll方法使用示例
- JQuery中节点遍历方法实例
- jQuery常用遍历节点方法
- jQuery使用each方法与for语句遍历数组示例
- jquery数组封装使用方法分享(jquery数组遍历)
- jQuery find和children方法使用
- JQuery中节点遍历方法实例
- jQuery 遍历 - find() 方法
- jQuery基础教程之DOM操作-遍历节点-filter()方法
- Jquery遍历节点的方法小集
- hibernateTemplate.find方法的使用,查的list不是空,但是遍历时却是null
- jQuery遍历节点方法汇总
- Visual Studio 2017中使用正则修改部分内容 如何使用ILAsm与ILDasm修改.Net exe(dll)文件 C#学习-图解教程(1):格式化数字字符串 小程序开发之图片转Base64(C#、.Net) jquery遍历table为每一个单元格取值及赋值 。net加密解密相关方法 .net关于坐标之间一些简单操作
- 使用jquery获取父元素或父节点的方法
- JQuery中each()的使用方法说明