JQuery选择器【二】

可见性选择器

　　注意：下面的代码中的console.log()在火狐浏览器或者谷歌浏览器中运行，请大家在浏览器的控制台中查看运行的结果，造成不便之处请原谅！

<body>
    <input type="hidden" name="name" value=" " />
    <input type="text" name="name" value=" " />
    <div id="divNone" style="display: none;">
    </div>
    <div id="divBlock" style="display: block;">
    </div>
    <div id="divHidden" style="visibility: hidden;">
    </div>
    <div id="divVisible" style="visibility: visible;">
    </div>
</body>

　　:hidden 选取所有不可见的元素

            //选取所有不可见的元素
            console.log($(":hidden"));
            //$(":hidden")选取所有不可见的元素。包括<input type= "hidden"/>，<div style= "display:none">等元素。
            //如果只想选取<input>元素，可以使用$("input:hidden")
            console.log($("input:hidden"));

　　:visible 选取所有可见的元素

            //选取所有可见的元素
            //元素visibility: hidden或opacity: 0被认为是可见的，因为他们仍然占有布局空间
            console.log($(":visible"));
            //$("div:visible")选取所有可见的<div>元素
            console.log($("div:visible"));

属性过滤选择器

<body>
    <div id="divOne" class="divClass">
        <span id="spanOne" class="spanClass"></span> 
        <span id="spanTwo" class="spanClass"></span>
    </div>
    <div id="divTwo">
        <span id="spanThree"></span>
    </div>
    <div id="divThree" class="divClass spanClass">
    </div>
    <div class="spanClass divClass"></div>
    <span id="spanFore"></span>
    <span id="spanFive" class="spanClass"></span>
</body>

　　[attribute] 选取拥有此属性的元素

            //$("div[id]")选取拥有属性id的<div>元素
            //[div#divOne.divClass, div#divTwo, div#divThree.divClass]
            console.log($("div[id]"));

　　[attribute=value] 选取属性的值为value的元素

            //$("div[id=divTwo]")选取属性id为divTwo的<div>元素
            //[div#divTwo]
            console.log($("div[id=divTwo]"));

　　[attribute!=value] 选取属性的值不等于value的元素

            //$("div[id!=divTwo]")选取属性id为divTwo的<div>元素
            //注意：没有id属性的元素也会被选取
            //[div#divOne.divClass, div#divThree.divClass, div.spanClass]
            console.log($("div[id!=divTwo]"));

　　[attribute^=value] 选取属性的值以value开始的元素

             //$("div[class^=divClass]")选取属性class以divClass开始的<div>元素
            //[div#divOne.divClass, div#divThree.divClass]
            console.log($("div[class^=divClass]"));

　　[attribute$=value] 选取属性的值以value结束的元素

             //$("div[class^=divClass]")选取属性class以divClass结尾的<div>元素
            //[div#divOne.divClass, div.spanClass]
            console.log($("div[class$=divClass]"));

　　[attribute *= value] 选取属性的值含有value的元素

            //$("div[class*=spanClass]")选取属性class含有spanClass的<div>元素
            //[div#divThree.divClass, div.spanClass]
            console.log($("div[class*=spanClass]"));

　　[selector1][selector2][selector3] 用属性选择器合并成一个复合属性选择器，满足多个条件。每选择一次，缩小一次范围

             //$("div[id][class$=divClass]")选取拥有属性id，并且属性class以divClass结尾的<div>元素
            //[div#divOne.divClass]
            console.log($("div[id][class$=divClass]"));

子元素过滤选择器

<body>
    <div id="divOne">
        <span id="spanOne"></span>
        <span id="spanTwo"></span>
    </div>
    <div id="divTwo">
        <span id="spanThree"></span>
    </div>
    <div id="divThree">
    </div>
    <span id="spanFore"></span>
    <span id="spanFive"></span>
</body>

　　 :nth-child(index/even/odd) 选取每个父元素下的第index个子元素或者奇偶元素(index从1算起)

            //$("div span:nth-child(2)");选取每个<div>中第2个<span>元素
            //[span#spanTwo]
            console.log($("div span:nth-child(2)"));
            //$("div span:nth-child(odd)");选取每个<div>中为奇数的<span>元素
            //[span#spanOne, span#spanThree]
            console.log($("div span:nth-child(odd)"));

　　:first-child 选取每个父元素的第一个子元素

             //$("div span:first-child");选取每个<div>中第一个<span>元素
            //[span#spanOne, span#spanThree]
            console.log($("div span:first-child"));

　　:last-child 选取每个父元素的最后一个子元素

            //$("div span:last-child");选取每个<div>中最后一个<span>元素
            //[span#spanTwo, span#spanThree]
            console.log($("div span:last-child"));

　　:only-child 如果某个元素是它父元素中唯一的子元素，那么将会被匹配。如果父元素中含有其他元素，则不会被配置

            //$("div span:only-child")在<div>中选取是唯一子元素的<span>元素
            //[span#spanThree]
            console.log($("div span:only-child"));

表单元素选择器

　　由于比较简单所以就不举例子了

选择器	描述	示例
:input	选取所有的<input>、<textarea>、<select>和<button>元素	$(":input")选取所有的<input>、<textarea>、<select>和<button>元素
:text	选取所有的单行文本框	$(":text")选取所有的单行文本框
:password	选取所有的密码框	$(":password")选取所有的密码框
:radio	选取所有的单选按钮	$(":radio")选取所有的单选按钮
:checkbox	选取所有的复选框	$(":checkbox")选取所有的复选框
:submit	选取所有的提交按钮	$(":submit")选取所有的提交按钮
:image	选取所有的图像按钮	$(":image")选取所有的图像按钮
:reset	选取所有的重置按钮	$(":reset")选取所有的重置按钮
:button	选取所有的按钮	$(":button")选取所有的按钮
:file	选取所有的上传控件	$(":file")选取所有的上传控件
:hidden	选取所有不可见元素	$(":hidden")选取所有的不可见元素，已经在可见性过滤选择器中讲解过

表单对象属性过滤选择器

　　同上，由于比较简单所以就不举例子了

选择器	描述	示例
:enabled	选取所有可用元素	$("#form1 :enabled")选取id为form1的表单内的所有可用元素
:disabled	选取所有不可用元素	$("#form1 :disabled")选取id为form1的表单内的所有不可用元素
:checked	选取所有被选中的元素(单选按钮，复选框)	$("input:checked")选取所有被选中的<input>元素
:selected	选取所有被选中的选项元素(下拉列表)	$("select :selected")选取所有被选中的选项元素