JQuery(1)---选择器

       今天我学习了jQuery，当然是从最基本的开始学习，首先就是jQuery的选择器了，大体上看了一遍，为了加强记忆就在博客里记录一下。jQuery的选择器有好多呢，我就根据自己的理解分为了下列几类进行记忆。

       我理解是把jQuery的选择器大体分为：1.基本选择器 （经常用到普遍使用的）2.主从元素选择器(给出祖先元素所匹配的子元素） 3.属性选择器 （根据标签的属性值进行筛选的）4.特殊属性选择器（一些特定属性值的选择器）。下面进行详细的总结记录。

      一、基本选择器

      （1） #id （ID选择器）   根据标签的id进行匹配，当然有时id会存在特殊的字符，则需要双斜杠进行转义。

             例：正常  $("#id")   特殊字符<span id="test[b]"></span>   $("#test\\[b\\]")

       (2) element （元素选择器）根据标签名来进行匹配

             例：$("div")   $("p") 等

       (3) .class （类选择器） 根据标签的class 来匹配，<div class="divstyle"></div>

             例：$(".divstyle")

       (4) * 匹配所有的元素

            例：$("*")

        (5) selector1,selector2,selectorn （群组选择器）多个选择器匹配，将结果合成集合返回。

           例:$("div,p,.classdiv")

二、后代选择器

       （1）ancestor descendan 给出了祖先元素 下匹配所有的后代元素

         例：<div><p>1</p><a href="#"><p>2</p></a></div>

            $("div p") 两个p 都是可以找到的

         (2) parent>child 给出父元素匹配所有的子元素

         例：一样是上面的例子话，$("div>p") 只能找到一个p <p>1</p>

         (3)prev+next  匹配所有紧接在prev元素后的next元素

         例 <div>
        <p>
            test1</p>
        <a href="#">test a+ p</a>
        <p>
            test2
        </p>
        <a href="#">test a+p 2</a>
        <br />
        <span>hahah</span> <a href="#">test a+p 3</a>
    </div>        $("p+a") 只能发现两个

        (4)prev ~ siblings 匹配prev之后的所有同辈的元素

       例：

 三、属性选择器

      (1)[attribute]  匹配包含给定属性的元素

        例：$("div[id]")      

      （2）[attribute =value]  匹配给定的属性是某个特定值的元素

       例： $("div[id='mydiv'])

      (3)[attribute!=value]  匹配所有属性不等于特定值的元素

      例：$("div['id!=mydiv'])

     (4)[attribute^=value] 匹配给定的属性是以某些值开始的元素

      例<div id="my_div">
        </div>
        <div id="my_seconddiv">
        </div>
        <div id="m_div">
        </div>

       $("div[id^='my']")   的结果查到两个。

      (5)[attribute$=value]  匹配给定的属性是以某些值结尾的元素

      (6)[attribute*=value]  匹配给定的属性是以包含某些值的元素

       例： <input name="inputtxtname" id="name" value="1" />
        <input name="txtpassword" id="pwd" value="2" />
        <input name="age" id="age" value="3" />

         $("input [name*='txt']").length  的结果是2

      (7) [selector1][selector2][selectorN]  复合属性选择器，需要同时满足多个条件时使用。

        例：

          <input name="man-news" id="man-news" />
        <input name="milkman" />
        <input name="letterman" id="new-letterman" />
        <input name="newman" />

   $("input[id][name$='man']").length 的结果是1

（8）[attribute~=value]  匹配的给定属性值同时存在空格的限制

  例：

     <input name="man-news" id="man-news" />
        <input name="milkman" />
        <input name="letter man" id="new-letterman" />
        <input name="newman" />

     $("input[name~='man']").val("I am the man with spaces")

(9) [attribute|=value]

四、特殊属性选择器

    （1）:first   获取第一个元素

        例：

 <ul>
            <li>test1</li>
            <li>test2</li>
            <li>test3</li>
            <li>test4</li>
        </ul>

     $("li:first").text  的结果是：test1

      (2):last  匹配最后一个元素

       例: 同上 $("li:last").text 的结果是:test4

    (3) :not(selector)  去除所有与给定选择器匹配的元素

      例：$("input:not(:checked)")

    （4）：even 匹配所有索引值为偶数的元素，从0开始计数

    例：<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
     </table>   $("tr:even")

    (5):odd   匹配所有索引值为基数的元素，从0开始计数

    （6） ：eq(index)  匹配一个给定索引值的元素，index 从0 开始计数

   例: $("tr:eq(1)") 查找第二行

   （7）:gt(index)  匹配所有大于给定索引值的元素

     例： $("tr:gt(1)")   查找大于第二行的

   (8) :lt(index) 匹配所有小于给定索引值的元素

   例：$("tr：lt(1)")   查找小于第二行的

    (9) :header 匹配如h1,h2,h3之类的标题元素

   例： $(":header").css("color", "red");

   (10):animated 匹配所有正在执行动画效果的元素

  例： <button id="run">
            Run</button>
        <div id="move" style="background-color: Yellow; height: 40px; width: 40px;">
        </div>

      $("div[id='move']:not(:animated)").css("background-color", "red");

   (11) :focus  触发每一个匹配元素的focus事件

    (12)  :contains(text)  匹配包含给定文本的元素

    $("div:contains('txt')")

  (13):empty  匹配所有不包含子元素或者文本的空元素

  例： <table >

             <tr><td>value1</td><td></td></tr>

             <tr><td>value2</td><td></td></tr>

        </table>

      $("td:empty")

 (14) :has(selector)  匹配含有选择器所匹配的元素的元素

   例： <div><p>hello</p></div>

          <div>Hello again!</div>

      $("div:has(p)").addClass("")

  (15) :parent  匹配含有子元素或者文本的元素

      $("td:parent")

  (16) :hidden  匹配所有不可见元素，或者type为hidden 的元素

  例： <table>

          <tr style="display:none"><td>value1</td></tr>

          <tr><td>value2</td></tr>

      </table>

    $("tr:hidden")   结果是value1

    或者 是 <input type="hidden" name="id"/>  $("input:hidden")

  (17) :visible  匹配所有的可见元素

   $("tr:visible")

(18) :nth-child   匹配其父元素下的第N个子或奇偶元素

  :eq(index) 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq(index) 是从0 算起的 可以使用nth-child(even)  ;nth-child(odd) ;nth-child(3n)  ;nth-child(2);nth-child(3n+1); nth-child(3n+2)

   例： 在每个ul查找第2个li

     <ul>

        <li>John</li>

        <li>Karl</li>

       <li>Brandon</li>

    <ul>

       <li>Glen</li>

     <li>Tane</li>

    <li> Ralph</li>

 </ul>

     $("ul  li:nth-child(2)")

   (19) :first-child  匹配第一个子元素  :first 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素

    例:$("ul li:first-child")

 (20) :last-child   匹配最后子元素，:last 只是匹配一个元素，而此选择符将为每个父元素匹配一个子元素

（21）:only-child 如果某元素是父元素中的唯一的子元素，那么将会被匹配，如果父元素中含有其他元素，那将不会被匹配

   例：<ul>

           <li>John</li>

           <li>Tim</li>

        </ul>

        <ul>

           <li>Glen</li>'

        </ul>

     $("ul li:only-child") 结果只有  <li>Glen</li>

(22) :input  匹配所有input、textarea、select、和button 元素

       例：下面的元素都会被匹配到

   <input type ="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>value1</option></select>

   <textarea></textarea>

   <button>btn</button>

$(":input")

(23):text  匹配所有的单行文本框

  例：$(":text") 同上的例子结果是<input type="text"/>

(24) :password 匹配所有的密码框

  $(":password")    <input type="password"/>

(25) :radio  匹配所有单选按钮

$(":radio")   <input type="radio"/>

(26) :checkbox  匹配所有复选框

 $(":checkbox")   <input type="checkbox"/>

(27):submit 匹配所有提交按钮

  $(":submit")   <input type="submit"/>

(28) :enable  匹配所有可用元素

  <input name="email" disabled="disabled"/>

<input name="id"/>

 $("input:enabled")  结果是 <input name="id"/>

(29) :disabled 匹配所有不可用元素

  $("input:disabled") 

(30) :checked  匹配所有选中的被选中元素（复选框、单选框等，不包括select 中的option)

   $("input:checked")

(31) :selected  匹配所有选中的option元素

  $("select option :selected")