Heim >Web-Frontend >js-Tutorial >Die Verwendung von enthält und der Unterschied zwischen find() und filter()

Die Verwendung von enthält und der Unterschied zwischen find() und filter()

伊谢尔伦Original: 2017-06-17 15:32:514462Durchsuche

$('div').filter('.div1');//Wählen Sie das div-Element $('div') aus, dessen Klassen-

-Attribut

div1 im div ist tag. find('em');//Wählen Sie das Element des em-Tags im div-Tag aus.

filter() basiert auf den Attributen in Klammern. Beispiel: $("div").filter ("p") Dies ist nicht zulässig. Es gibt nur einige Attribute in den Filterklammern oder was sie enthalten, die kein Element sein können, wie zum Beispiel „p“

und find() dient dazu, bestimmte Elemente abzurufen.

<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>

Das obige ist der detaillierte Inhalt vonDie Verwendung von enthält und der Unterschied zwischen find() und filter(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Verwenden Sie jQuery, um Änderungen der DOM-Elementgröße zu überwachenNächster Artikel：Verwenden Sie jQuery, um Änderungen der DOM-Elementgröße zu überwachen

In Verbindung stehende Artikel

Mehr sehen