jQuery篩選

HTML代碼:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title></title>  
    <style>  
        p{  
            width: 100px;  
            height: 100px;background-color: #ffa24a;  
            margin-bottom: 20px;  
        }  
    </style>  
<script src="js/jQuery-2.2.2-min.js"></script>  
</head>  
<body>  
<ul>  
    <li>黃燜雞</li>  
    <li>面條</li>  
    <li>空盤子</li>  
</ul>  
<p class="box">  
    <span class="span">span</span>  
</p>  
<p class="box1">  
    <span>span</span>  
</p>
</body>  
</html> 

jQuery代碼:

    /*不推薦:js和jquery混合使用*/  
    console.info($("li")[0]);  
  
    console.info($("li").html());  
  
    /*獲取到集合中指定下標的元素*/  
    console.info($("li").eq(-1));  
  
    /*first()*/  
    console.info($("li").first());  
  
    /*last()*/  
    console.info($("li").last())  
  
    /*hasClass()判斷當前元素是否有指定class屬性,jquery,獲取到一個集合,取出集合中的所有內容,默認返回第一個元素的內容*/  
    var res = $("li").hasClass("li");  
  
    /*html();*/  
    $("li").addClass("as");  
    console.info(res);  
  
    /*each()循環取出內容*/  
    $("li").each(function(){  
        console.info($(this).html());  
    });  
  
    /*filter()從集合中篩選出符合指定條件的元素*/  
    var op = $("p").filter(".p");  
    console.info(op);  
  
    /*has()包含:獲取的元素內部的條件是否符合要求*/  
    //$("p").has(".span").css("background-color","red");  
  
    /*find():針對的是子類*/  
    //鏈式表達  
    $("p").find(".span").css("background-color","red");  
  
    /*is():用來判斷釋放滿足指定條件*/  
    var boo =$(".span").parent().is(".box");  
    console.info(boo);  
  
    boo = $(".box").children().is(".span");  
    console.info(boo); 

發佈留言