jQuery实践——选择器篇

　　　　   一、基本

• 1. #id：

     html：<div id="demo1">demo1</div>
     
     jQuery：$("#demo1").css("background","red");

     

  2. element:

     html:<div>demo2</div>
     
     jQuery:$("div").css("background","blue");

     

  3. .class:

     html:<div class="demo3">demo3</div>
     
     jQuery:$(".demo3").css("background","yellow");

     

  4. *
     

     jQuery:$("*").css("background","green");

     

  5. selector1,selector2,selectorN
     

     html:<div class="demo3">demo3</div>
         <div id="demo4">demo4</div>    
     
     jQuery:$(".demo3,#demo4").css("background","orange");

     

     二.层级：

  6. ancestor descendant

     html:<div><span>demo5</span></div>
     
     jQuery:$("div span").css("background","aqua");

     

  7. parent > child

     html:<div><p>demo6</p></div>
     
     jQuery:$("div>p").css("background","purple");

     

  8. prev + next

     html:<div><p>demo6</p></div>
             <p>demo7</p>
     
     iQuery:$("div+p").css("background","chartreuse");

     

  9. prev ~ siblings

     html:<p>demo7</p>
             <div>demo8</div>
             <div>demo8</div>
     
     jQuery:$("p~div").css("background","skyblue");

     

     3.基本筛选器：

  10. :first

      html:        <ul>
                  <li>demo9</li>
                  <li>demo9</li>
                  <li>demo9</li>
                  <li>demo9</li>
                  <li>demo9</li>
              </ul>
      
      Jquery:$("li:first").css("background","crimson");

      

  11. :not

      jQuery:$("li:not(:first)").css("background","cadetblue");

      

  12. :even

      jQuery:$("li:even").css("background","fuchsia");

      

  13. :odd

      jQuery:$("li:odd").css("background","greenyellow");

      

  14. :eq(index)

      jQuery:$("li:eq(2)").css("background","gold");

      

  15. :gt(index)

      jQuery:$("li:gt(2)").css("background","blueviolet");

      

  16. :lang

      html:       <ul>
                  <li>demo9</li>
                  <li>demo9</li>
                  <li lang="en">demo9</li>
                  <li>demo9</li>
                  <li>demo9</li>
              </ul>   
      
      jQuery: $("li:lang(en)").css("background","salmon");

      

  17. :last:

      jQuery:$("li:last").css("background","slateblue");

      

  18. :lt(index)

      jQuery:$("li:lt(2)").css("background","teal");

      

  19. :header

      html:<h1>demo10</h1>
          <h2>demo10</h2>
      
      jQuery:$(":header").css("background","darkred");

      

  20. :animated:

      html:<div id="demo11">demo11</div>
      
      jQuery:$("#demo11").click(function(){
      　　　　　　　　$("#demo11:not(:animated)").animate({
      　　　　　　　　　　width:"+=20px"
      　　　　　　　　},1000);
      　　　　　});

      

  21. :focus

      html:<input type="text" id="demo12" value="demo12" autofocus="autofocus"/>
      
      jQuery：$("input:focus").css("background","darkkhaki");

      

  22. :root

      jQuery:$(":root").css("background","seagreen");

      

  23. :target
      不会使用

      三、内容

  24. :contains(text)

      html:<div>demo13</div>
      
      jQuery:$("div:contains('demo13')").css("background","turquoise");

      

  25. :empty

      html:<input type="text" id="demo14" placeholder="demo14" />
      
      jQuery:$("input:empty").css("background","gray");

      

  26. :has(selector)

      html:<div><p>demo15</p></div>
      
      jQuery:$("div:has(p)").css("background","darkgreen");

      

  27. :parent

      html:<div><p>demo16</p></div>
      
      jQuery:$("p:parent").css("background","hotpink");

      

      四、可见性

  28. :hidden

      html:<div id="demo17" style="display: none;"></div>
      
      jQuery:console.log($("div:hidden"));

      

  29. :visible

      html:<p>demo18</p>
      
      jQuery:$("p:visible").css("background","lightseagreen");

      

      五、属性

  30. [attribute] 

      html:　　<p id="demo18">demo19</p>
              <p id="demo19">demo19</p>
              <p id="test19">demo19</p>
              <p>demo19</p>

      jQuery:$("p[id]").css("background","olive");

      

  31. [attribute=value] 

      jQuery:$("p[id='demo18']").css("background","lightcoral");

      

  32. [attribute!=value] 

      jQuery:$("p[id!='demo18']").css("background","darkslategray");

      

  33. [attribute^=value] 

      jQuery:$("p[id^='demo']").css("border","1px solid red");

      

  34. [attribute$=value] 

      jQuery:$("p[id$='19']").css("border","1px solid blue");

      

  35. [attribute*=value] 

      jQuery:$("p[id*='1']").css("border","1px solid green");

      

  36. [attrSel1][attrSel2][attrSelN]

      html:<div id="demo20" class="demo20">demo20</div>
      
      jQuery:$("div[id][class = 'demo20']").css("border","1px solid black");

      

      六、子元素

      html:　　<ul>
                  <li>demo21</li>
                  <li>demo21</li>
                  <li>demo21</li>
                  <li>demo21</li>
                  <li>demo21</li>
              </ul>

  37. :first-child 

      $("ul li:first-child").css("border","1px solid blueviolet")

      

  38. :first-of-type

      $("li:first-of-type").css("border","1px solid green");

      

  39. :last-child 

      $("ul li:last-child").css("border","1px solid lightcoral");

      

  40. :last-of-type

      $("ul li:last-of-type").css("border","1px solid turquoise");

      

  41. :nth-child() 

      $("ul li:nth-child(2)").css("border","1px solid firebrick");

      

  42. :nth-last-child()

      $("ul li:nth-last-child(2)").css("border","1px solid blueviolet");

      

  43. :nth-last-of-type()

      $("ul li:nth-last-of-type(2)").css("border","1px solid fuchsia");

      

  44. :nth-of-type()

      $("ul li:nth-of-type(2)").css("border","1px solid crimson");

      

  45. :only-child 

      $("ul li:only-child").css("border","1px solid teal");

      

  46. :only-of-type

      $("ul li:only-of-type").css("border","1px solid orange");

      

      七、表单

      html:<form >
                  <input type="text" value="demo22" disabled="disabled"/><br />
                  <input type="password" /><br />
                  <input type="radio" name="radio" checked="checked"/><label>radio1</label>
                  <input type="radio" name="radio"/><label>radio2</label><br />
                  <input type="checkbox" /><label>checkbox1</label>
                  <input type="checkbox" checked="checked"/><label>checkbox2</label>
                  <input type="checkbox" /><label>checkbox3</label><br />
                  <input type="file"disabled="disabled"/><br />
                  <input type="hidden" />
                  <select name="selector">
                      <option value="1">selector1</option>
                      <option value="2">selector2</option>
                      <option value="3" selected="selected">selector3</option>
                  </select><br />
                  <input type="submit" value="提交" /><br />
                  <input type="image" value="images" /><br />
                  <input type="reset" value="重置"/><br />
                  <input type="button"  value="btn1"/>
                  <button>btn2</button>
              </form>

  47. :input 

      $(":input").css("border","1px solid darkblue");

      

  48. :text 

      $(":text").css("color","goldenrod");

      

  49. :password

      $(":password").css("background","fuchsia");

      

  50. :radio
  51. :checkbox

      console.log($(":radio"));
      console.log($(":checkbox"));

      

  52. :submit 

      $(":submit").css("border","1px solid red");

      

  53. :image

      $(":image").css("border","1px solid blue");

      

  54. :reset

      $(":reset").css("background","green");

      

  55. :button

      $(":button").css("background","blue");

      

  56. :file 

      $(":file").css("border","1px solid orange");

      

  57. :hidden 

      console.log($("input:hidden"));

      

      九、表单属性

  58. :enabled

      $("input:enabled").css("color","red");

      

  59. :disabled

      $("input:disabled").css("color","blue");

      

  60. :checked 

      console.log($("input:checked"));

  61. :selected 

      console.log($("select option:selected").html());