基本过滤选择器

代码示例:

<!DOCTYPE html>
<html>
  <head>
    <title>selectorDemo2.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
    <style type="text/css">
        .abc{
            background:red;
        }
    </style>
    <script type="text/javascript">
        
        $(function(){
            //:first
            //$("li:first").addClass("abc");
            
            //:last
            //$("li:last").addClass("abc");
            
            //:not(selector)
            //$("li:not('#l3')").addClass("abc");
            
            //:even
            //$("li:even").addClass("abc");
            
            //:odd
            //$("li:odd").addClass("abc");
            
            //:eq
            //$("li:eq(0)").addClass("abc");
            
            //:gt
            //$("li:gt(2)").addClass("abc");
            
            //:lt
            //$("li:lt(2)").addClass("abc");
            
            //:header
            //$(":header").addClass("abc");
            
            //animate
            $(".div1").animate({300},"slow").css("background-color","blue");
        });
        
    </script>
  </head>
  
  <body>
    <ul>
        <li>list1</li>
        <li>list2</li>
        <li id="l3">list3</li>
        <li>list4</li>
        <li>list5</li>
    </ul>
    <h1>h111111</h1>
    <h2>h22222</h2>
    <div class="div1">div11111111</div>
  </body>
</html>
原文地址:https://www.cnblogs.com/sunxiaoyan/p/8744617.html