Rumah >hujung hadapan web >tutorial js >contains的用法及find()与filter()的区别

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

伊谢尔伦asal: 2017-06-17 15:32:514463semak imbas

$('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(&#39;border&#39;, &#39;1px solid green&#39;);//取得匹配元素的子元素集合,只考虑子元素不考虑后代元素;
    //相当于 
    $("ul.level-1 > li").css(&#39;border&#39;, &#39;1px solid green&#39;);
    
    
    //----------------------------------------------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(&#39;测试&#39;)").text(); //获取div标签下包含“测试”的p标签的text值  //打印一下，结果为“测试1 测试2”
    //alert($("p").contains("测试").text()); //不能这么用，提示错误“contains不是一个函数”
</script>

Atas ialah kandungan terperinci contains的用法及find()与filter()的区别. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：使用jQuery监听DOM元素大小变化Artikel seterusnya：分享一个Query分页插件代码

Artikel berkaitan

Lihat lagi