contains的用法及find()与filter()的区别

来源：动视网责编：小采时间：2020-11-27 20:20:38

contains的用法及find()与filter()的区别

contains的用法及find()与filter()的区别:$('div').filter('.div1');//选择div标签中class属性为div1的div元素$('div').find('em');//选择div标签中的em标签的元素filter()是根据括号中的属性来进行筛选比如：$("div").f

推荐度：

点击下载本文 文档为doc格式

导读contains的用法及find()与filter()的区别:$('div').filter('.div1');//选择div标签中class属性为div1的div元素$('div').find('em');//选择div标签中的em标签的元素filter()是根据括号中的属性来进行筛选比如：$("div").f

$('div').filter('.div1');//选择div标签中class属性为div1的div元素

$('div').find('em');//选择div标签中的em标签的元素

filter()是根据括号中的属性来进行筛选比如：$("div").filter("p") 这样是不允许的。filter括号里只一些属性，或者包含什么的，不能是一个元素，例如"p"

而find()是获取某些元素。

<pre class="javascript" name="code"><html>
<head>
 <script src="jquery-2.1.3.js"></script>
</head>
<body>
 <div class="css"> <p class="rain">测试1</p> </div>
 <div class="rain"> <p>测试2</p> </div>
 <ul>
 <li>中国</li>
 <li>美国</li>
 <li>德国</li>
 </ul>
</body>
</html>
<script type="text/javascript">
 $(function () {
 //find()会在div元素内 寻找 class为rain 的元素。
 var a = $("div").find(".rain"); //相当于 var a= $("div[class=rain]");
 alert(a.length); //打印出：1
 var b = $("div").find("p"); //相当于 var b=$("div p");
 var c = $("div").children("p") //相当于 var c=$("div > p")
 
 
 //在li元素集合中筛选出包含"中国"，或者包含"美国"的a元素，并计算这样的a有几个。
 var li_Count = $("li").filter(":contains(中国),:contains(美国)").length;
 alert(li_Count) //打印出：2
 var li_Value = $("li").filter(":contains(中国),:contains(美国)").text();
 alert(li_Value); //打印出：中国美国
 //find()会在div元素内 寻找 class为rain 的元素。
 $("div").filter(".css").css("color", "red"); //相当于 $("div[class=css]").css("color", "red");
 })
</script>

<pre class="javascript" name="code"><html>
<head>
 <script src="~/Scripts/jquery-1.8.2.js"></script>
</head>
<body>
 <ul class="level-1">
 <li class="item-i">I</li>
 <li class="item-ii">
 II
 <ul class="level-2">
 <li class="item-a">A</li>
 <li class="item-b">
 B
 <ul class="level-3">
 <li class="item-1">1</li>
 <li class="item-2">2</li>
 <li class="item-3">3</li>
 <li id="abc">4</li>
 </ul>
 </li>
 <li class="item-c">C</li>
 </ul>
 </li>
 <li class="item-iii">III</li>
 </ul>
 
 <div class="css">
 <p class="rain">测试1</p>
 </div>
 <div class="rain">
 <p>测试2</p>
 </div>
</body>
</html>
<script type="text/javascript">
 //----------------------------------------------children()获得选中元素的一下级的子元素
 //children及find方法都用是用来获得element的子elements的，但children方法获得的仅仅是元素一下级的子元素，而find方法获是得所有下级元素
 $("ul.level-1").children().css('border', '1px solid green');//取得匹配元素的子元素集合,只考虑子元素不考虑后代元素;
 //相当于 
 $("ul.level-1 > li").css('border', '1px solid green');
 
 
 //----------------------------------------------find() --获取选中元素的所有下级元素 :(指定的对象集合下进行查找)
 //将ul 标签下calss属性值level-3的标签的背景颜色设为红色【即:获取ul标签的所有后代，根据find()方法括号里面的参数(选择器)来过滤，即根据find()方法括号里的选择器来取我们需要的元素】
 $("ul").find(".level-3").css("background", "red");
 $("ul").find(".item-2").css("color", "red"); //将ul 标签下面class属性值为item-2的标签的字体颜色设为红色 ; 所以这条语句等价于下面的这条语句
 $("ul .item-2").css("color", "red"); //将ul 标签下面class属性值为item-2的标签的字体颜色设为红色 （注意ul与.之前有一个空格，如果去掉那个空格意思就变成了 将class属性值为item-2的ul标签的字体颜色设置为红色了）
 //----------------------------------------------filter() --获取具有某些属性值的标签 :(指定的对象集合进行过滤)
 $("li").filter(".item-1") //获取class属性值为item-1的li元素
 $("li").filter(":even").css("background", "red"); //获取所有偶数号的li元素,并将它们的背景颜色设为红色
 $("li").filter(".item-1,#abc").css("background-color", "yellow"); //获取class属性值为item-1的所有li标签 ，同时获取id属性值为abc的所有li标签
 $("p").filter(".selected, :first");//获取class属性值为selected的所有P标签，同时获取第一个P标签
 //----------------------------------------------has() --获取标签里包含了某些标签的标签 (has是判断标签的)
 $("div").has("p") //获取div标签中包含了p标签的div标签
 $("div").has("p").length; //获取 div标签里包含p标签的的长度。即：div标签里面包含了p标签的div的个数，即：像这样的div有几个。其实它就是获取div的个数， 如果这个打印一下的话，打印

结果为 2 $("div").has("p").text()//获取div标签中包含了p标签的div的text值 //打印一下，结果为“测试1 测试2” //----------------------------------------------:contains() --获取标签里包含了某些文字的标签 (contains是判断文本的) //jQuery:has()和jQuery:contains()两个方法比较类似。不同点在于：has是判断标签的 contains是判断文本的 $("div p:contains('测试')").text(); //获取div标签下包含“测试”的p标签的text值 //打印一下，结果为“测试1 测试2” //alert($("p").contains("测试").text()); //不能这么用，提示错误“contains不是一个函数” </script>

contains的用法及find()与filter()的区别

推荐度：

点击下载本文 文档为doc格式

标签：的区别 filter contains

热门焦点

contains的用法及find()与filter()的区别

contains的用法及find()与filter()的区别

contains的用法及find()与filter()的区别

最新推荐

猜你喜欢

热门推荐