JQuery选择器

简介

    <!--
        JQuery选择器允许对HTML元素组成单个元素进行操作
        JQuery选择器基于元素的Id、类型、属性、属性值等(查找或选择)HTML元素。
                它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
        jQuery 中所有选择器都以美元符号开头：$()。-->

基本选择器

    <!--
        基本选择器是JQuery 中最常用的选择器，也是最简单的选择器，它通过元素id 、class 和标签名等来查找DOM 元素。
        在网页中，每个id 名称只能使用一次， class 允许重复使用。
        1.*    匹配所有元素 (集合元素)
          $("*")
        2.#id  根据给定的id匹配一个元素  (单个元素)
          $("#test")选取id为test的元素
        3. element 根据给定的元素匹配元素(集合元素)
           $("p")选取所有的<p>元素
        4. .class 根据给定的类名匹配元素(集合元素)
           $(".test")选取所有class为test的元素
        5. selector1,selector2,.selectorN 将每个选择器匹配到的元素合并到一起返回(集合元素)
           $(div,span,p.myclass) 选取所有<div>,<span>和拥有class为myClass的<p>标签的一组元素。

        -->

层次选择器

    <!--
        如果想通过DOM 元素之间的层次关系来获取特定元素，
        例如后代元素、子元素、相邻元素和同辈元素等，那么层次选择器是一个非常好的选择。
        1.$("ancestor descendant") 选取ancestor元素里的所有后代元素
          例：$("div span") 返回div里所有<span>元素
              $(".container p")返回class为container的所有p元素。

        2.$("parent>child") 选取parent元素下的child子元素
          例:$("div>span")选取<div>元素下的元素名是<span>的子元素。
             $("#main> *")选择id值为main的所有子元素。

        3.$("prev+next")选取紧接在prev元素后的next元素
          例:$(".one+div")选取class为one的下一个<div>同辈元素。
             $("label + input")选择所有label元素的下一个input元素。

        4.$("prev~siblings")选取prev元素之后的所有siblings元素
          例:$("#two~div")选取id为two的元素后面的所有<div>同辈元素。
             $("#prev~#div1 ")选择id为prev的元素后面所有id为div1的div同辈元素。

        注意:注意$("div span")和$("div>span")是有区别的
             $("div span")会选取div里所有的<span>元素。
             而$("div>span")只会选取<div>直属的<span>子元素。
        -->

基本过滤选择器

    <!--
       过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM 元素，
       过滤规则与css 中的伪类选择器语法相同，即选择器都以一个冒号（：）开头。
       按照不同的过滤规则，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、
       属性过滤、子元素过滤和表单对象属性过滤选择器。

        基本过滤选择器： 
        1  :first
        示例:$("p:first")  选取第一个<p>元素
        2  :last
        示例：$("p:last") 选取最后一个<p>元素
        3 :even
        示例:$("tr:even") 所有偶数<tr>元素
        4 :odd
        示例:$("tr:odd") 所有奇数 <tr> 元素
        5 :eq(index)
        示例:$("ul li:eq(3)")  列表中第四个元素(index从0开始)
        6 :gt(no)
        示例:$("ul li:gt(3)") 列出 index 大于 3 的元素
        7 :lt(index):选择器选取带有小于指定 index 值的元素
        8 :not(selector)：去除所有与给定元素匹配的元素
        9 :header 选择器选取所有标题元素
     
        -->

内容过滤选择器

    <!--
           内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上
           1 :contains(text)    选择器选取包含指定字符串的元素
           2 :empty    选择器选取空的元素
           3 :parent   选择包含文本元素或者子元素的元素
     
       -->

可见性过滤选择器

        <!--
                   可视化过滤选择器： 
        $("div:hidden") 选择所有的被hidden的div元素 
        $("div:visible") 选择所有的可视化的div元素 
       -->

属性过滤选择器

        <!--
                     属性过滤选择器： 
        $("div[id]")  选择所有含有id属性的div元素 
        $("input[name='newsletter']")  选择所有的name属性等于'newsletter'的input元素 
        $("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素  
        $("input[name^='news']") 选择所有的name属性以'news'开头的input元素 
        $("input[name$='news']") 选择所有的name属性以'news'结尾的input元素 
        $("input[name*='news']")  选择所有的name属性包含'news'的input元素 
        $("input[id][name$='man']") 可以使用多个属性进行联合选择，
        该选择器是得到所有的含有id属性并且那么属性以man结尾的元素 
        -->

子元素过滤选择器

         <!--
             子元素过滤选择器： 
        $("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)") 
 
        $("div span:first-child") 返回所有的div元素的第一个子节点的数组 
        $("div span:last-child")  返回所有的div元素的最后一个节点的数组 
        $("div button:only-child")返回所有的div中只有唯一一个子节点的所有子节点的数组 
         -->

表单选择器

    <!--
        为了使用户能够更加灵活地操作表单，jQuery中专门加入了表单选择器。
        利用表单选择器，能够极其方便地获取到表单的某个或某些类型的元素。
        表单选择器：
        :input    $(":input")    所有 <input> 元素
        :text    $("input:text")    所有 type="text" 的 <input> 元素
        :password    $(":password")    所有 type="password" 的 <input> 元素
        :radio    $(":radio")    所有 type="radio" 的 <input> 元素
        :checkbox    $(":checkbox")    所有 type="checkbox" 的 <input> 元素
        :submit    $(":submit")    所有 type="submit" 的 <input> 元素
        :reset    $(":reset")    所有 type="reset" 的 <input> 元素
        :button    $(":button")    所有 type="button" 的 <input> 元素
        :image    $(":image")    所有 type="image" 的 <input> 元素
        :file    $(":file")    所有 type="file" 的 <input> 元素

        -->