2.1 、寻找元素 （重要的选择器和筛选器）


 2 、寻找元素 （重要的选择器和筛选器）  


 2.1、选择器

         1.1 基本选择器      $("*")    $("#id")   $(".class")   $("element")   $(".class, p, div")


  •  【基本选择器】代码展示：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.12.4.js"></script>
</head>
<body>
    <div id="notMe"><p>id="notMe"</p></div>
    <div id="myDiv">id="myDiv"</div>
    <span id="foo:bar">1</span>
    <span id="foo[bar]">2</span>
    <span id="foo.bar">3</span>
    <div class="notMe">div class="notMe"</div>
    <div class="myClass">div class="myClass"</div>
    <span class="myClass">span class="myClass"</span>

    <script>
        // id 选择器
        var x1 = $("#myDiv")  // 默认获取的列表  [ <div id="myDiv">id="myDiv"</div> ]
        x1.each(function () {
            console.log("id 选择器",this)
        })

        var x2 = $("#foo\\[bar\\]") // 重点注意转义。
        x2.each(function () {
            console.log("id 选择器",this)
        })

        // 标签选择器
        var x3 = $("div") // [ <div>DIV1</div>, <div>DIV2</div> ]
        x3.each(function () {
            console.log("标签选择器 ",this)
        })

        // class 选择器
        var x4 = $(".myClass")   // [ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]
        x4.each(function () {
            console.log("class 选择器 ",this)
        })
        $("*")

        /*
        匹配所有元素
        多用于结合上下文来搜索
        */

        // selector1,selector2,selectorN
        /*将每一个选择器匹配到的元素合并后一起返回。
        你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。
        */
        $("div,span,p.myClass")  //[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]

</script>

</body>
</html>

    

 1.2 、层级选择器       $(".outer div")(所有的后代)    $(".outer>div")(所有的子代)      $(".outer+div")(匹配所有跟在.outer后面的div)    $(".outer~div")(.outer后面的所有div)

  • 【层级选择器】代码展示：

 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../jquery-1.9.1.min.js"></script>
</head>
<body>

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />


<script>
    // 后代选择器 ancestor descendant
    // 在给定的祖先元素下匹配所有的后代元素
    var x1 = $("form input") //[ <input name="name" />, <input name="newsletter" /> ]
    x1.each(function () {
        console.log("后代选择器 ",this)
    })
    // 儿子选择器 在给定的父元素下匹配所有的子元素
    var x2 = $("form > input") //[ <input name="name" /> ]

    // 只要是相邻的即可
    var x3 = $("label + input") //[ <input name="name" />, <input name="newsletter" /> ]

    // 兄弟选择器
    var x4  = $("form ~ input") //[ <input name="none" /> ]

</script>
</body>
</html>

   


    1.3 基本筛选器      $("li:first")   $("li:eq(2)")   $("li:even")(偶数)   $("li:gt(1)")

         冒号的基本选择器

         代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.12.4.js"></script>
</head>
<body>
    <ul>
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
        <li>list item 4</li>
        <li>list item 5</li>
    </ul>

    <input name="apple" />
    <input name="flower" checked="checked" />
    <table>
      <tr><td>Header 1</td></tr>
      <tr><td>Value 1</td></tr>
      <tr><td>Value 2</td></tr>
    </table>

    <h1>Header 1</h1>
    <p>Contents 1</p>
    <h2>Header 2</h2>
    <p>Contents 2</p>
    <button id="run">Run</button><div></div>


   <script src="jquery-1.12.4.js">
        // first last
        var x1 = $("li:first")  //[ <li>list item 1</li> ]

        // not()
        var x2 = $("input:not(:checked)") //[ <input name="apple" /> ]

        // even 偶数

        var x3 = $("tr:even")  //[ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ]
        // odd 奇数
        var x4 = $("tr:odd") // [ <tr><td>Value 1</td></tr> ]

        // eq 找索引 gt() lt() $("div:lang(en)")
        var x5 = $("tr:eq(1)") //[ <tr><td>Value 1</td></tr> ]
        // :header 匹配如 h1, h2, h3之类的标题元素
         $(":header").css("background", "#EEE"); //[ <h1 style="background:#EEE;">Header 1</h1>, <h2 style="background:#EEE;">Header 2</h2> ]

        // :animated 匹配所有正在执行动画效果的元素
        $("#run").click(function(){
          $("div:not(:animated)").animate({ left: "+=20" }, 1000);
        });

            $("div").click(function(){
          if ( $(this).hasClass("protected") )
            $(this)
              .animate({ left: -10 })
              .animate({ left: 10 })
              .animate({ left: -10 })
              .animate({ left: 10 })
              .animate({ left: 0 });
        });
        // focus
        // :root  html元素
    </script>

</body>
</html>

    

  1.4 属性选择器      $('[id="div1"]')   $('["alex="sb"][id]')

          
   >>1.4.1、内容选择器：
        代码展示：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.12.4.js"></script>
</head>
<body>



<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>

<table>
  <tr><td>Value 1</td><td></td></tr>
  <tr><td>Value 2</td><td></td></tr>
</table>

<div><p>Hello</p></div>
<div>Hello again!</div>

<script>
       // contains()  匹配包含给定文本的元素
    var x6 = $("div:contains('John')")    //[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]

    // empty  匹配所有不包含子元素或者文本的空元素
    $("td:empty")                        //[ <td></td>, <td></td> ]
    //:has(selector)  匹配含有选择器所匹配的元素的元素

    $("div:has(p)").addClass("test");     //[ <div class="test"><p>Hello</p></div> ]


    //:parent  匹配含有子元素或者文本的元素
    $("td:parent")    //[ <td>Value 1</td>, <td>Value 2</td> ]  查找所有含有子元素或者文本的 td 元素



</script>
</body>
</html>



>> 1.4.2、可见性：
      代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <script src="jquery-1.12.4.js"></script>
</head>
<body>

<table>
  <tr style="display:none"><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

<form>
  <input type="text" name="email" />
  <input type="hidden" name="id" />
</form>

<script>
    // :hidden 匹配所有不可见元素，或者type为hidden的元素
    $("tr:hidden")      //[ <tr style="display:none"><td>Value 1</td></tr> ]
    $("input:hidden")  //[ <input type="hidden" name="id" /> ]

    //:visible 匹配所有的可见元素
    $("tr:visible")   //[ <tr><td>Value 2</td></tr> ]
    
</script>


</body>
</html>


    
>> 1.4.3、属性：
     代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.12.4.js"></script>
</head>
<body>

    <div>
      <p>Hello!</p>
    </div>
    <div id="test2"></div>
    
    <input type="checkbox" name="newsletter" value="Hot Fuzz" />
    <input type="checkbox" name="newsletter" value="Cold Fusion" />
    <input type="checkbox" name="accept" value="Evil Plans" />
    <input name="man-news" />
    <input name="milkman" />
    <input name="letterman2" />
    <input name="newmilk" />

    <script>
    
        //[attribute] 匹配包含给定属性的元素。注意，在jQuery 1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即可。
        $("div[id]")  //[ <div id="test2"></div> ]
        //[attribute=value]  匹配给定的属性是某个特定值的元素
        $("input[name='newsletter']").attr("checked", true);  //[ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" /> ]
        //[attribute!=value]  [attribute^=value]
    
    
        //[selector1][selector2][selectorN]  复合属性选择器，需要同时满足多个条件时使用。
            $("input[id][name$='man']") //[ <input id="letterman" name="new-letterman" /> ]
    
        //[attribute*=value]  匹配给定的属性是以包含某些值的元素'
        $("input[name*='man']") //[ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ]
        
    </script>


</body>
</html>



 1.5 表单选择器      $("[type='text']") 简写成 $(":text")                    注意: 只适用于input标签
        
         表单选择器
        代码展示：
       $("input:checked")
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <script src="jquery-1.12.4.js"></script>
</head>
<body>

<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />

    <input type="file" />
    <input type="hidden" />
    <input type="image" />

    <input type="password" />
    <input type="radio" />
    <input type="reset" />

    <input type="submit" />
    <input type="text" />
    <select><option>Option</option></select>

    <textarea></textarea>
    <button>Button</button>

</form>

<script>
    $(":input")     //所有input
    $(":password")  //[ <input type="password" /> ]
    $(":checkbox") 
</script>
</body>
</html>

     










posted @ 2016-08-27 10:02  Ju-do-it  阅读(257)  评论(0)  编辑  收藏  举报