JQuery 选择器

`$("*")`

选择器选取文档中的每个单独的元素，包括 html、head 和 body。
如果与其他元素（嵌套选择器，正如上面的例子）一起使用，该选择器选取指定元素中的所有子元素。

注意定义中我框出的黑色字体，这是*选择器定义解释的重点（废话！ - - ）

<body>
    <div>
        <section>
            <p>DATE</p>
            <h1>二〇一七年三月三十日</h1>
            <span><i>测试$("*")选择器</i></span>
        </section>
        <p><b>Segmentfault</b></p>
    </div>

    <script type="text/javascript">
        $(document).ready(function(){
            $("*").css("background-color","cornflowerblue")
            $("section *").css("background-color","orange")
        })
    </script>    
</body>

$("*")-TestCode

Document对象里所有元素设置CSS样式，背景色设置。
选择section内的所有子元素，并设置CSS样式，背景色设置。

另外W3C提示：根据实践，某些浏览器使用*的处理速度缓慢，但是作为新手的我目前只有IE和Chrome两种explorer，以后在回来试验吧!

`$("#ID")`

"#"选取带有唯一的指定 id 的元素。id 引用 HTML 元素的 id 属性。相同的 id 值只能在文档中使用一次。

早前就听说W3C有些定义早已过时或者出现错误，有些有歧义，这次尼玛简直无解啊，带有唯一的指定 id 的，艹这连词真棒！（轻微吐槽一下下）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>2017年2月23日 02:23:11</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript" type="text/javascript" src="js/color.js"></script>
    </head> 
    <style type="text/css">
        
    </style>
    <body>
        <div>
            <section>
                <p id="id">DATE</p>
                <p id="id">DATEⅡ</p>
                <h1 id="id">二〇一七年三月三十日</h1>
                <span id="id"><i>测试$("#ID")选择器</i></span>
            </section>
            <p><b>Segmentfault</b></p>
        </div>

        <script type="text/javascript">
            $(document).ready(function(){
                $("#id").css("background-color","orange")
            })
        </script>    
    </body>
</html>

$("#id")-TestCode

现在有点理解带有唯一的指定 id的元素这段语句的意思了吧，没错，只有HTML中第一个添加了ID名为"ID"的标签才会被设置CSS样式。当然人家定义最后也说了，相同的ID值只能在文档中使用一次......

温馨提示：不要使用数字开头的 ID 名称！在某些浏览器中可能出问题。（虽然我在Chorme和IE里没出现问题，但由于IE678的存在，所以......虽然规范里也没有这样说明，但是原则上是不推荐使用数字开头命名ID的）

`$(".class")`

"."选择器选取带有指定 class 的元素。class 引用 HTML 元素的 class 属性。
与 id 选择器不同，class选择器常用于多个元素。这样就可以为带有相同 class 的任何 HTML 元素设置特定的样式。

原文中：class引用HTML元素的class属性，或否应该是JavaScript引用了HTML元素的class属性？

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>2017年2月23日 02:23:11</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript" type="text/javascript" src="js/color.js"></script>
    </head> 
    <style type="text/css">
        
    </style>
    <body>
        <div>
            <section>
                <p id="p_test">DATE</p>
                <p class="p div">DATEⅡ</p>
                <h1 class="h1 div">二〇一七年三月三十日</h1>
                <span class="span div"><i>测试$(".Class")选择器</i></span>
            </section>
            <p class="p div"><b>Segmentfault</b></p>
        </div>

        <script type="text/javascript">
            $(document).ready(function(){
                function a(){
                    return "orange"
                }
                $("#p_test").addClass(a)
                $(".orange").css("background-color","orange")
                $(".div").css("background-color","green").css("font-size","25px")
            })
        </script>    
    </body>
</html>

$(".class")-TestCode

Question：按照文档中引用class的说法，使用addClass()为ID名为："#p_test"添加一个类名（等于将此元素与class属性建立链接？），之后在被引用并添加CSS样式？‘

`$(".class1.class2")`

选择所有 class="class1" 且 class="class2" 的元素，这是个&&判断。

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>2017年2月23日 02:23:11</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript" type="text/javascript" src="js/color.js"></script>
    </head> 
    <style type="text/css">
        
    </style>
    <body>
        <div>
            <section>
                <p class="intro demo">DATE</p>
                <h1 class="intro">二〇一七年三月三十一日</h1>
                <span><i>测试$(".class1.class2")选择器</i></span>
                <test>TEST</test>
            </section>
            <p><b>Segmentfault</b></p>
        </div>

        <script type="text/javascript">
            $(document).ready(function(){
                $(".intro.demo").css("background-color","green")
            })
        </script>    
    </body>
</html>

图片描述

$(".intro.demo") == .intro , .demo {......}，注意！$()的写法中，两个类名之间没有空格。

`$("element")`

element 选择器选取带有指定标签名的元素。标签名引用 HTML 标签的 < 与 > 之间的文本。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>2017年2月23日 02:23:11</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript" type="text/javascript" src="js/color.js"></script>
    </head> 
    <style type="text/css">
        
    </style>
    <body>
        <div>
            <section>
                <p>DATE</p>
                <h1>二〇一七年三月三十一日</h1>
                <span><i>测试$("element")选择器</i></span>
                <test>TEST</test>
            </section>
            <p><b>Segmentfault</b></p>
        </div>

        <script type="text/javascript">
            $(document).ready(function(){
                $("h1,test").css("background-color","orange")
            })
        </script>    
    </body>
</html>

$("element")-TestCode

代码里，我创建了一个官方没有定义过的<test></test>标签对，按照定义解释：选择器引用了<>里的文本（test）,它指向了test标签对。并对其设置了CSS属性。

`$(":first")`

:first 选择器选取第一个元素。最常见的用法：与其他元素一起使用，选取指定组合中的第一个元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>2017年2月23日 02:23:11</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript" type="text/javascript" src="js/color.js"></script>
    </head> 
    <style type="text/css">
        
    </style>
    <body>
        <div class="div0">
            <li class="li0">LI0</li>
            <ul>
                <li class="li0-0">LI0-0</li>
                <li class="li0-2">LI0-1</li>
                <li class="li0-1">LI0-2</li>
            </ul>
             <span><i>测试$(":first")选择器</i></span>
        </div>

        <script type="text/javascript">
            $(document).ready(function(){
                $("li:first").css("background-color","orange")
                $("ul li:first").css("background-color","green")
            })
        </script>    
    </body>
</html>

图片描述

`$(":last")`

:last 选择器选取最后一个元素。最常见的用法：与其他元素一起使用，选取指定组合中的最后一个元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>2017年2月23日 02:23:11</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript" type="text/javascript" src="js/color.js"></script>
    </head> 
    <style type="text/css">
        
    </style>
    <body>
        <div class="div0">
            <ul>
                <li class="li0-0">LI0-0</li>
                <li class="li0-2">LI0-1</li>
                <li class="li0-1">LI0-2</li>
            </ul>
            <li class="li0">LI0</li>
        </div>
        <div class="div1">
            <h3>first? and last?</h3>
        </div>
        <span><i>测试$(":last")选择器</i></span>
        <script type="text/javascript">
            $(document).ready(function(){
                $("li:last").css("background-color","orange")
                $("ul li:last").css("background-color","green")
                $(".div1:first").css("background-color","cornflowerblue")
                $(".div1:last").css("color","white")
            })
        </script>    
    </body>
</html>

图片描述

新发现：选择器选择只有一个子元素的目标元素，使用:first或者:last都能选中。

`$(":eq(index)")`

:eq() 选择器选取带有指定 index 值的元素。index 值从 0 开始，所有第一个元素的 index 值是 0（不是 1）。
经常与其他元素/选择器一起使用，来选择指定的组中特定序号的元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>2017年2月23日 02:23:11</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript" type="text/javascript" src="js/color.js"></script>
    </head> 
    <style type="text/css">
        
    </style>
    <body>
        <div>
            <li>0</li>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ul>
            <li>7</li>
        </div>
        <span><i>测试$(":eq(index)")选择器</i></span>
        <script type="text/javascript">
            $(document).ready(function(){
                $("li:eq(1)").css("background-color","red")
            })
        </script>
    </body>
</html>

图片描述

`$(":gt(index)")`

:gt 选择器选取 index 值高于指定数的元素。index 值从 0 开始。
经常与其他元素/选择器一起使用，来选择指定的组中特定序号之后的元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>2017年2月23日 02:23:11</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript" type="text/javascript" src="js/color.js"></script>
    </head> 
    <style type="text/css">
        
    </style>
    <body>
        <div>
            <li>0</li>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ul>
            <li>7</li>
        </div>
        <span><i>测试$(":gt(index)")选择器</i></span>
        <script type="text/javascript">
            $(document).ready(function(){
                $("li:gt(0)").css("background-color","green")
            })
        </script>
    </body>
</html>

图片描述

`$(":lt(index)")`

:last 选择器选取最后一个元素。最常见的用法：与其他元素一起使用，选取指定组合中的最后一个元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>2017年2月23日 02:23:11</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript" type="text/javascript" src="js/color.js"></script>
    </head> 
    <style type="text/css">
        
    </style>
    <body>
        <div>
            <li>0</li>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ul>
            <li>7</li>
        </div>
        <span><i>测试$(":lt(index)")选择器</i></span>
        <script type="text/javascript">
            $(document).ready(function(){
                $("li:lt(7)").css("background-color","green")
            })
        </script>
    </body>
</html>

图片描述

`$(:not(selector))`

所有不为空的 input 元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>2017年2月23日 02:23:11</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript" type="text/javascript" src="js/color.js"></script>
    </head> 
    <style type="text/css">
        
    </style>
    <body>
        <div>
            <li>0</li>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ul>
            <li>7</li>
        </div>
        <span><i>测试$(":not()")选择器</i></span>
        <script type="text/javascript">
            $(document).ready(function(){
                $("li:not(li:eq(1))").css("background-color","orange")
            })
        </script>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>2017年2月23日 02:23:11</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript" type="text/javascript" src="js/color.js"></script>
    </head> 
    <style type="text/css">
        
    </style>
    <body>
        <div>
            <li>0</li>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ul>
            <li>7</li>
        </div>
        <span><i>测试$(":not()")选择器</i></span>
        <script type="text/javascript">
            $(document).ready(function(){
                $("li:not(ul li)").css("background-color","orange")
            })
        </script>
    </body>
</html>

可看作其目标选择元素集合的“补集”，not(selector)里也可添加任意CSS选择器或者JQuery选择器

`$(":header")`

:header 选择器选取所有标题元素（h1 - h6）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>2017年2月23日 02:23:11</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript" type="text/javascript" src="js/color.js"></script>
    </head> 
    <style type="text/css">

    </style>
    <body>
        <div>
            <h1>标题1</h1>
            <h2>标题2</h2>
            <h3>标题3</h3>
            <h4>标题4</h4>
            <h5>标题5</h5>
            <h6>标题6</h6>
        </div>
        <div class="test">
            <h2>test</h2>
        </div>
        <span><i>测试$(":header")选择器</i></span>
        <script type="text/javascript">
            $(document).ready(function(){
                $(":header").css("background-color","cornflowerblue")
                $("h1:header").css("color","white")
                $(".test:header").hide()
            })
        </script>
    </body>
</html>

$(":header")——TestCode

此选择器不支持$("selector:header")这类的规则，不过可以在:heade前写h1~h6可以选择到相应的h标签元素。but!

由于`$("h1:header") and $("h1")`两者效果一样，前者对照后者后，你不知道究竟`:header`起作用没有。

`$(":animated")`

:animated 选择器选取当前的所有动画元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>2017年2月23日 02:23:11</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript" type="text/javascript" src="js/color.js"></script>
    </head> 
    <style type="text/css">
        h1 {
            background-color: orange;
            width: 500px;
        }
        h2 {
            background-color: cornflowerblue;
            width: 100px;
        }
    </style>
    <body>
        <div>
            <h1>标题1</h1>
        </div>
        <div class="btn">
            <h2>标题2</h2>
            <button>Click Me</button>
        </div>
        <span><i>测试$(":animated")选择器</i></span>
        <script type="text/javascript">
            $(document).ready(function(){
                function aniH1(){
                    $("h1").animate({width:100},"slow")
                    $("h1").animate({width:500},"slow",aniH1)
                };
                aniH1();
                function aniH2(){
                    $("h2").animate({width:500},"slow")
                    $("h2").animate({width:100},"slow",aniH2)
                };
                aniH2();
                $("button").click(function(){
                    $(".btn:animated").css("background-color","blue")
                    $("h2:animated").css("color","white")
                })
            })
        </script>
    </body>
</html>

$(":animated")——TestCode

随意截取了点击后动画的一帧，需要注意是：

1.`:animated`前selector可以添加h系列标签，但是div不行（莫非不能用父辈类的选择语法？），无法选中。

2.另外：两者语法不同，一个是`$("selector").animate`，一个是`$(":animated")`

3.本案例只是用jquery添加的动画，未包括选择其他方法添加(原生JS？)的动画，不过本质都是JS。不过赞不知道，这个选择器是否能选择通过其他库类添加的动画元素。

`$("p:contains(string)")`

:contains 选择器选取包含指定字符串的元素。该字符串可以是直接包含在元素中的文本，或者被包含于子元素中。
经常与其他元素/选择器一起使用，来选择指定的组中包含指定文本的元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>2017年2月23日 02:23:11</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript" type="text/javascript" src="js/color.js"></script>
    </head> 
    <style type="text/css">
        
    </style>
    <body>
        <p> TIME</p>
        <p>TIME </p>
        <p>TI ME</p>
        <h1></h1>
        <span><i>测试$(":contains()")选择器</i></span>
        <script type="text/javascript">
            $(document).ready(function(){
                $("p:contains( T)").css("background-color","orange")
                $("p:contains(E )").css("background-color","green")
                $("p:contains(I M)").css("background-color","cornflowerblue")
                $("h1:contains()").text("H1").css("background-color","aqua")
            })
        </script>
    </body>
</html>

$(":contains(string)")

可以看到，包含的字符也包括空格符

`$(":empty")`

：empty 选择器选取空的元素。空元素指的是不包含子元素或文本（包括空格符和空标签）的元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>2017年2月23日 02:23:11</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript" type="text/javascript" src="js/color.js"></script>
    </head> 
    <style type="text/css">
        h1 {
            width: 100px;
            height: 100px;    
        }
    </style>
    <body>
        <h1></h1>
        <h1> </h1>
        <h1><p></p></h1>
        <span><i>测试$(":empty")选择器</i></span>
        <script type="text/javascript">
            $(document).ready(function(){
                $("h1:empty").css("background-color","orange")
            })
        </script>
    </body>
</html>

图片描述

注意：目标元素包含空字符串或者子标签元素都不会被:empty选择器选择。

`$(":hidden")`

：hidden 选择器选取隐藏的元素。以下几种情况的元素是隐藏元素：
1.设置为 display:none
2.带有 type="hidden"的表单元素
3.width 和 height 设置为 0 隐藏的父元素（这也会隐藏子元素）
注释：该选择器对 visibility:hidden 和 opacity: 0 的元素不起作用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>2017年2月23日 02:23:11</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript" type="text/javascript" src="js/color.js"></script>
    </head> 
    <style type="text/css">
        .test1 {
            display: none;
        }
        .test2 {
            display: none;
        }
        .test4 {
            display: none;
        }
    </style>
    <body>
        <h1 class="test1">display:none</h1>
        <h1 class="test2">type="hidden"</h1>
        <input hidden class="test3" type="text" placeholder="visibility:hidden"/>
        <input class="test4" type="text" placeholder="display:none"/>
        <span><i>测试$(":hidden")选择器</i></span>
        <script type="text/javascript">
            $(document).ready(function(){
                $("input:hidden").show()
                $("h1:hidden").show()
            })
        </script>
    </body>
</html>

$(":hidden")——TestCode

`$(":visible")`

:visible 选择器选取每个当前是可见的元素。除以下几种情况之外的元素即是可见元素：
1.设置为 display:none
2.type="hidden" 的表单元素
3.Width 和 height 设置为 0
4.隐藏的父元素（同时隐藏所有子元素）

也就是说设置了以上属性的元素不会被：visible选择器选择到

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>2017年2月23日 02:23:11</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript" type="text/javascript" src="js/color.js"></script>
    </head> 
    <style type="text/css">
        .test1 {
            display: none;
        }
        .test2 {
            display: none;
        }
        .test4 {
            display: none;
        }
        div {
            width: 0;
            height: 0;
        }
    </style>
    <body>
        <h1 class="test1">display:none</h1>
        <h1 class="test2">type="hidden"</h1>
        <input hidden class="test3" type="text" placeholder="visibility:hidden"/>
        <input class="test4" type="text" placeholder="display:none"/>
        <div></div>
        <span><i>测试$(":visible")选择器</i></span>
        <script type="text/javascript">
            $(document).ready(function(){
                $("input:visible").show()
                $("h1:visible").show()
                $("div:visible").text("This is element div");
            })
        </script>
    </body>
</html>

$(":visible")

按照W3C引用里的提示的设置，都没有被：visible选择器选择。

`$("[attribute]")`

[attribute] 选择每个带有指定属性的元素。可以选取带有任何属性的元素（对于指定的属性没有限制）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>2017年2月23日 02:23:11</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript" type="text/javascript" src="js/color.js"></script>
    </head> 
    <style type="text/css">
        
    </style>
    <body>
        <h1 id="h1">H1</h1>
        <h2 class="h2">H2</h2>
        <input type="text" name="" id="" />
        <div class="error">
            <input type="button" value="Click Me" />
        </div>
        <span><i>测试$("[attribute]")选择器</i></span>
        <script type="text/javascript">
            $(document).ready(function(){
                $("[id]").css("color","orange")
                $("[class]").css("color","green")
                $("[type='text']").css("background-color","red")
                $("[type='button']").css("background-color","green")
            })
        </script>
    </body>
</html>

$("[attribute]")——TestCode

试图在type前加入一层selector，失败了。虽然文档里语法清晰注明`$("[attribute]")`,前面并没有"："符号。

`$("[attribute!=value]")`

[attribute!=value] 选择器选取每个不带有指定属性及值的元素。带有指定的属性，但不带有指定的值的元素，也会被选择。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>2017年2月23日 02:23:11</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript" type="text/javascript" src="js/color.js"></script>
    </head> 
    <style type="text/css">
        
    </style>
    <body>
        <h2>0</h2>
        <h2 class="hClass">1</h2>
        <h2 class="hClass">2</h2>
        <h2>3</h2>
        <h2 id="id">4</h2>
        <h2 id="id">5</h2>
        <span><i>测试$("[attribute!=value]")选择器</i></span>
        <script type="text/javascript">
            $(document).ready(function(){
                $("body [class!=hClass]").css("background-color","orange")
                $(".div [id!=]").css("background-color","green")
            })
        </script>
    </body>
</html>

图片描述

1."[]"之前可指定选择范围，代码中如果不指定在body内部选择则会将body也设置CSS背景色。

2.键值为空也会被被判定请留意，具体情况具体分析。

`$("[attribute$=string]"`

[attribute$=value] 选择器选取每个带有指定属性且以指定字符串结尾的元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>2017年2月23日 02:23:11</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript" type="text/javascript" src="js/color.js"></script>
    </head> 
    <style type="text/css">
        
    </style>
    <body>
        <h2 class="test 0">0</h2>
        <h2 class="test1">1</h2>
        <h2 class="test_">2</h2>
        <h2 class="test2">3</h2>
        <span><i>测试$("[attribute$=value]")选择器</i></span>
        <script type="text/javascript">
            $(document).ready(function(){
                $("[class$= 0]").css("background-color","orange")
                $("[class$=1]").css("background-color","limegreen")
                $("[class$=t_]").css("background-color","deepskyblue")
                $("h2 [class$=2]").css("background-color","blue")
            })
        </script>
    </body>
</html>

$("attribute$=value")——TestCode

`$(":input")`

:input 选择器选取表单元素。该选择器同样适用于 <button> 元素。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>2017年2月23日 02:23:11</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript" type="text/javascript" src="js/color.js"></script>
    </head> 
    <style type="text/css">
        
    </style>
    <body>
        <input type="text" placeholder="Text"/>
        <input type="button" value="Button0" />
        <button>Button1</button>
        <input type="checkbox" />
        <input type="radio" name="name" />
        <input type="radio" name="name" />
        <input type="email" />
        <input type="image" />
        <span><i>测试$(":input")选择器</i></span>
        <script type="text/javascript">
            $(document).ready(function(){
                $(":input").css("background-color","green")
            })
        </script>
    </body>
</html>

图片描述

`$(":input type=value")`

选择各类型表单元素（:text，:password，:radio，:checkbox，:submit，:reset，:button，:image，:file）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>2017年2月23日 02:23:11</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript" type="text/javascript" src="js/color.js"></script>
    </head> 
    <style type="text/css">
        
    </style>
    <body>
        <input type="text" />
        <input type="password" />
        <input type="radio" />
        <input type="checkbox" />
        <input type="submit" />
        <input type="reset" />
        <input type="button" value="Btn0" />
        <button>Btn1</button>
        <input type="image" />
        <input type="file" />
        <div><span><i>测试input type:value系列属性选择器</i></span>
        <script type="text/javascript">
            $(document).ready(function(){
                $(":input").css("color","blue")
                var selector=":text,:password,:submit,:reset,:button,:image,:file";
                $(selector).css("background-color","orange")

            })
        </script>
    </body>
</html>

图片描述

`$(":enabled")`

：enabled 选择器选取所有启用的表单元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>2017年2月23日 02:23:11</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript" type="text/javascript" src="js/color.js"></script>
    </head> 
    <style type="text/css">
        
    </style>
    <body>
        <input type="text" name="" id="" />
        <input type="password" name="" id="" />
        <input type="button" value="" />
        <div><span><i>测试$(":enabled")选择器</i></span>
        <script type="text/javascript">
            $(document).ready(function(){
                $(":enabled").css("background-color","orange")
            })
        </script>
    </body>
</html>

$(":enabled")——TestCode

`$(":disabled")`

：disabled 选择器选取所有禁用的表单元素，即disabled="disabled"的input元素，只设置属性名未设置属性值的也会判定为true

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>2017年2月23日 02:23:11</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript" type="text/javascript" src="js/color.js"></script>
    </head> 
    <style type="text/css">
        
    </style>
    <body>
        <input type="text" disabled="disabled"/>
        <input type="password" disabled />
        <div><span><i>测试$(":disabled")选择器</i></span>
        <script type="text/javascript">
            $(document).ready(function(){
                $(":disabled").css("background-color","green")
            })
        </script>
    </body>
</html>

$(":disabled")——TestCode

`$(":selected")`

：selected 选择器选取被选择的 <option> 元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>2017年2月23日 02:23:11</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript" type="text/javascript" src="js/color.js"></script>
    </head> 
    <style type="text/css">
        h1 {
            font-size: 60px;
            color: cornflowerblue;
        }
    </style>
    <body>
        <select name="Queen">
            <option value="">Freddie Mercury——lead singer</option>
            <option value="">Brian May——guitarist</option>
            <option value="">John Deacon——bassist</option>
            <option value="">Roger Taylor——drummer</option>
        </select>
        <div><button>Show</button></div>
        <h1 hidden>Freddie Mercury</h1>
        <div><span><i>测试$(":selected")选择器</i></span>
        <script type="text/javascript">
            $(document).ready(function(){
                $("button").click(function(){
                    $("h1").hide()
                    var t=$(":selected").text();
                    $("h1").text(t).show(2000)
                })        
            })
        </script>
    </body>
</html>

图片描述

`$(":checked")`

：checked 选择器选取所有选中的复选框或单选按钮。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>2017年2月23日 02:23:11</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript" type="text/javascript" src="js/color.js"></script>
    </head> 
    <style type="text/css">
        h1 {
            font-size: 60px;
            color: cornflowerblue;
        }
    </style>
    <body>
        <input type="radio" name="num" id="" />Queen
        <input type="radio" name="num" id="" />king
        <div>
            <input type="checkbox" name="" id="" />Freddie Mercury<br />
            <input type="checkbox" name="" id="" />Brian May<br />
            <input type="checkbox" name="" id="" />John Deacon<br />
            <input type="checkbox" name="" id="" />Roger Tylor<br />
        </div>
        <button>Click Me</button>
        <div><span><i>测试$(":checked")选择器</i></span>
        <script type="text/javascript">
            $(document).ready(function(){
                $("button").click(function(){
                    $(":checked").hide()
                })
            })
        </script>
    </body>
</html>

图片描述

JQuery 选择器

$("*")

注意定义中我框出的黑色字体，这是*选择器定义解释的重点（废话！ - - ）

另外W3C提示：根据实践，某些浏览器使用*的处理速度缓慢，但是作为新手的我目前只有IE和Chrome两种explorer，以后在回来试验吧!

$("#ID")

早前就听说W3C有些定义早已过时或者出现错误，有些有歧义，这次尼玛简直无解啊，带有唯一的指定 id 的，艹这连词真棒！（轻微吐槽一下下）

$(".class")

$(".class1.class2")

$(".intro.demo") == .intro , .demo {......}，注意！$()的写法中，两个类名之间没有空格。

$("element")

代码里，我创建了一个官方没有定义过的<test></test>标签对，按照定义解释：选择器引用了<>里的文本（test）,它指向了test标签对。并对其设置了CSS属性。

$(":first")

$(":last")

新发现：选择器选择只有一个子元素的目标元素，使用:first或者:last都能选中。

$(":eq(index)")

$(":gt(index)")

$(":lt(index)")

$(:not(selector))

可看作其目标选择元素集合的“补集”，not(selector)里也可添加任意CSS选择器或者JQuery选择器

$(":header")

此选择器不支持$("selector:header")这类的规则，不过可以在:heade前写h1~h6可以选择到相应的h标签元素。but!

由于$("h1:header") and $("h1")两者效果一样，前者对照后者后，你不知道究竟:header起作用没有。

$(":animated")

随意截取了点击后动画的一帧，需要注意是：

1.:animated前selector可以添加h系列标签，但是div不行（莫非不能用父辈类的选择语法？），无法选中。

2.另外：两者语法不同，一个是$("selector").animate，一个是$(":animated")

3.本案例只是用jquery添加的动画，未包括选择其他方法添加(原生JS？)的动画，不过本质都是JS。不过赞不知道，这个选择器是否能选择通过其他库类添加的动画元素。

$("p:contains(string)")

可以看到，包含的字符也包括空格符

$(":empty")

注意：目标元素包含空字符串或者子标签元素都不会被:empty选择器选择。

$(":hidden")

$(":visible")

也就是说设置了以上属性的元素不会被：visible选择器选择到

按照W3C引用里的提示的设置，都没有被：visible选择器选择。

$("[attribute]")

试图在type前加入一层selector，失败了。虽然文档里语法清晰注明$("[attribute]"),前面并没有"："符号。

$("[attribute!=value]")

1."[]"之前可指定选择范围，代码中如果不指定在body内部选择则会将body也设置CSS背景色。

2.键值为空也会被被判定请留意，具体情况具体分析。

$("[attribute$=string]"

$(":input")

$(":input type=value")

$(":enabled")

$(":disabled")

$(":selected")

$(":checked")

选中所有的复选框或者单选按钮，并隐藏。

Queen

引用和评论

《JavaScript程序设计》—— 标准对象 Object

采用测试驱动开发理念(Test Driven Development)进行 SAP UI5 应用的功能开发(二)试读版

`$("*")`

`$("#ID")`

`$(".class")`

`$(".class1.class2")`

`$("element")`

`$(":first")`

`$(":last")`

`$(":eq(index)")`

`$(":gt(index)")`

`$(":lt(index)")`

`$(:not(selector))`

`$(":header")`

由于`$("h1:header") and $("h1")`两者效果一样，前者对照后者后，你不知道究竟`:header`起作用没有。

`$(":animated")`

1.`:animated`前selector可以添加h系列标签，但是div不行（莫非不能用父辈类的选择语法？），无法选中。

2.另外：两者语法不同，一个是`$("selector").animate`，一个是`$(":animated")`

`$("p:contains(string)")`

`$(":empty")`

`$(":hidden")`

`$(":visible")`

`$("[attribute]")`

试图在type前加入一层selector，失败了。虽然文档里语法清晰注明`$("[attribute]")`,前面并没有"："符号。

`$("[attribute!=value]")`

`$("[attribute$=string]"`

`$(":input")`

`$(":input type=value")`

`$(":enabled")`

`$(":disabled")`

`$(":selected")`

`$(":checked")`