三、选择器

• jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。
• jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器。（查看jQuery文档）
• jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。

一、基本选择器

#id        id选择器，<xxx id=""> 通过id值获得元素
element    标签选择器，<xxx> 通过标签名获得元素
.class     类选择器，<xxx class=""> 通过class值获得元素。
*          所有元素
s1,s2,...  多选择器，将多个选择器的结果添加一个数组中。

示例:

$(document).ready(
    function(){
        //<input type="button" value="选择 id为 one 的元素." id="btn1"/>  
        $("#btn1").click(function(){
            $("#one").css("background-color","red");
        });
        //<input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
        $("#btn2").click(function(){
            $(".mini").css("background-color","blue");
        });
        //<input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
        $("#btn3").click(function(){
            $("div").css("background-color","yellow");
        });
        //<input type="button" value="选择 所有的元素." id="btn4"/>
        $("#btn4").click(function(){
            $("*").css("background-color","green");
        });
        //<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>
        $("#btn5").click(function(){
            $("span,#two").css("background-color","brown");
        });
    }
);

jQuery案例-开关灯

<script>
    //页面的加载事件
    $(function () {
        //获取按钮,注册点击事件
        $("#btn").click(function () {
            //.val()方法--->获取按钮的value属性的值
            //.val("内容");是设置按钮的value属性的值
            if($(this).val()=="关灯"){
                $("body").css("backgroundColor","black");
                $(this).val("开灯");
            }else{
                $("body").css("backgroundColor","white");
                $(this).val("关灯");
            }
        });
    });
</script>

二、层级选择器

A  B  ，获得A元素内部所有的B元素。（爷孙）
A > B ，获得A元素内部所有的B子元素。（父子）
A + B ，获得A元素后面的第一个兄弟B。（兄弟）
A ~ B ，获得A元素后面的所有的兄弟B。（兄弟）
A.siblings(“div”)，A的所有是div的兄弟

示例：

<script type="text/javascript">
    $(document).ready(function() {
    //<input type="button" value="选择 body内的所有div元素." id="btn1"/>
    $("#btn1").click(function() {
        $("body div").css("background-color", "red");
    });
    //<input type="button" value="在body内,选择子元素是div的。" id="btn2"/>
    $("#btn2").click(function() {
        $("body > div").css("background-color", "yellow");
    });
    //<input type="button" value="选择 id为one 的下一个div元素." id="btn3"/>
    $("#btn3").click(function() {
        $("#one + div").css("background-color", "blue");
    });
    //<input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/>
    $("#btn4").click(function() {
        $("#two ~ div").css("background-color", "green");
    });
    //<input type="button" value="选择 id为two的元素的所有div兄弟元素." id="btn5"/>
    $("#btn5").click(function() {
        $("#two").siblings("div").css("background-color", "brown");
    });
});
</script>

案例：鼠标移上当前的li高亮

<ul id="uu">
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
    <li>第四个</li>
    <li>第五个</li>
</ul>
<script>
    //获取列表中每个li,当鼠标进入后,当前的li有高亮显示,点击的时候可以让当前被点击的li的字体变大,字体的颜色改变,改变字体
    $(function () {
    $("#uu>li").mouseover(function () {
        $(this).css("backgroundColor","red").siblings("li").css("backgroundColor","");
    }).click(function () {
        $(this).css("fontSize","50px").css("color","green").css("fontFamily","全新硬笔行书简");
    });
});
</script>

三、基本过滤选择器

过滤选择器都是带冒号
:first                         第一个
:last                           最后一个
:eq(index)            获得指定索引
:gt(index)            大于
:lt(index)            小于
:animated             获得所有动画
:not(selector)         去除所有与给定选择器匹配的元素
:focus                    获得焦点
------------------------------
:header                 获得所有标题元素。例如：<h1>...<h6>
:even                      偶数，从 0 开始计数。例如：查找表格的1、3、5...行（即索引值0、2、4...）
:odd                       奇数

示例：

<script type="text/javascript">
    $(document).ready(function() {
    //<input type="button" value="选择第一个div元素." id="btn1"/>
    $("#btn1").click(function() {
        $("div:first").css("background-color", "red");
    });
    //<input type="button" value="选择最后一个div元素." id="btn2"/>
    $("#btn2").click(function() {
        $("div:last").css("background-color", "yellow");
    });
    //<input type="button" value="选择class不为one的 所有div元素." id="btn3"/>
    $("#btn3").click(function() {
        $("div:not('.one')").css("background-color", "blue");
    });
    //<input type="button" value="选择索引值为偶数 的div元素." id="btn4"/>
    $("#btn4").click(function() {
        $("div:even").css("background-color", "brown");
    });
    //<input type="button" value="选择索引值为奇数 的div元素." id="btn5"/>
    $("#btn5").click(function() {
        $("div:odd").css("background-color", "yellow");
    });
    //<input type="button" value="选择索引值等于3的元素." id="btn6"/>
    $("#btn6").click(function() {
        $("div:eq(3)").css("background-color", "blue");
    });
    //<input type="button" value="选择索引值大于3的元素." id="btn7"/>
    $("#btn7").click(function() {
        $("div:gt(3)").css("background-color", "red");
    });
    //<input type="button" value="选择索引值小于3的元素." id="btn8"/>
    $("#btn8").click(function() {
        $("div:lt(3)").css("background-color", "green");
    });
    //<input type="button" value="选择所有的标题元素." id="btn9"/>
    $("#btn9").click(function() {
        $(":header").css("background-color", "green").css("font-size","30px");
    });
    //<input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/>
    $("#btn10").click(function() {
        $(":animated").css("background-color", "green");
    });
});
</script>

四、内容过滤选择器

:empty                          当前元素是否为空（是否有标签体--子元素、文本）
:has(...)                      当前元素，是否含有指定的子元素
:parent                            当前元素是否是父元素（自己是否拥有子元素）
:contains( text )     标签体是否含有指定的文本

示例：

<script type="text/javascript">
    $(document).ready(function(){
    //<input type="button" value="选取含有文本“di”的div元素." id="btn1"/>
    $("#btn1").click(function(){
        $("div:contains('di')").css("background-color","red");
    });
    //<input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn2"/>
    $("#btn2").click(function(){
        $("div:empty").css("background-color","yellow");
    });
    //<input type="button" value="选取含有class为mini元素 的div元素." id="btn3"/>
    $("#btn3").click(function(){
        $("div:has('.mini')").css("background-color","blue");
    });
    //<input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn4"/>
    $("#btn4").click(function(){
        $("div:parent").css("background-color","green");
    });
});
</script>

五、可见性过滤选择器

:hidden        隐藏。特指 <xxx style="display:none;">  ，或者 <input type="hidden">
:visible    可见（默认）

示例：

<script type="text/javascript">
$(document).ready(function(){
    //<input type="button" value=" 选取所有可见的div元素"  id="b1"/>
    $("#b1").click(function(){
        $("div:visible").css("background-color","red");
    });  
    //<input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来"  id="b2"/>
    $("#b2").click(function(){
        $("div:hidden").show(1000).css("background-color","yellow");
    });  
    //<input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值"  id="b3"/>
    $("#b3").click(function(){
        //这种方式只能打印第一个的值
        //alert($("input:hidden").val());
        //使用each遍历所有的隐藏域
        $("input:hidden").each(function(){
            alert($(this).val());
        });
    }); 
    //<input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值"  id="b4"/>
    $("#b4").click(function(){
        //使用each全局函数进行遍历
        /*
              *function(index,domEle)
              *第一个参数 ：遍历的索引
              *第二个参数：遍历的元素
              */
        $.each($("input:hidden"),function(index,domEle){
            alert($(this).val());
        });
    }); 
});  
</script>

六、属性选择器

[属性名]                                  获得指定的属性名的元素
[属性名=值]                            获得属性名 等于 指定值的 的元素【1】
[属性名!=值]                        获得属性名 不等于 指定值的 的元素
[as1][as2][as3]....         复合选择器，多个条件同时成立。类似 where ...and...and【2】
[属性名^=值]                        获得以属性值 开头 的元素
[属性名$=值]                        获得以属性值 结尾 的元素
[属性名*=值]                        获得 含有属性值  的元素

示例：

<script type="text/javascript">
$(document).ready(function(){
    //<input type="button" value="选取含有 属性title 的div元素." id="btn1"/>
    $("#btn1").click(function(){
        $("div[title]").css("background-color","red");
    });
    //<input type="button" value="选取 属性title值等于“test”的div元素." id="btn2"/>
    $("#btn2").click(function(){
        $("div[title='test']").css("background-color","blue");
    });
    //<input type="button" value="选取 属性title值不等于“test”的div元素(没有属性title的也将被选中)." id="btn3"/>
    $("#btn3").click(function(){
        $("div[title!='test']").css("background-color","yellow");
    });
    //<input type="button" value="选取 属性title值 以“te”开始 的div元素." id="btn4"/>
    $("#btn4").click(function(){
        $("div[title^='te']").css("background-color","green");
    });
    //<input type="button" value="选取 属性title值 以“est”结束 的div元素." id="btn5"/>
    $("#btn5").click(function(){
        $("div[title$='est']").css("background-color","brown");
    });
    //<input type="button" value="选取 属性title值 含有“es”的div元素." id="btn6"/>
    $("#btn6").click(function(){
        $("div[title*='es']").css("background-color","yellow");
    });
    //<input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有“es”的元素." id="btn7"/>
    $("#btn7").click(function(){
        $("div[id][title*='es']").css("background-color","red");
    });
});
</script>

七、元素过滤选择器

:nth-child     第几个孩子
:first-child   第一个孩子
:last-child    最后一个孩子
:only-child    仅有一个孩子

八、表单过滤选择器

:input           所有的表单元素。（<input> / <select> / <textarea> / <button>）
:text                文本框<input type="text">
:password        密码框<input type=" password ">
:radio            单选<input type="radio">
:checkbox        复选框<input type="checkbox">
:submit            提交按钮<input type="submit">
:image            图片按钮<input type="image" src="">
:reset            重置按钮<input type="reset">
:file                文件上传<input type="file">
:hidden            隐藏域<input type="hidden">  ,还可以获得<xxx style="display:none"> 
:button            所有普通按钮。 <button >  或 <input type="button">
select           下拉列表  （没有:号）
textarea         多行文本框（没有:号）

示例：

var $alltext = $("#form1 :text");
var $allpassword= $("#form1 :password");
var $allradio= $("#form1 :radio");
var $allcheckbox= $("#form1 :checkbox");
var $allsubmit= $("#form1 :submit");
var $allimage= $("#form1 :image");
var $allreset= $("#form1 :reset");
var $allbutton= $("#form1 :button"); // <input type=button />  和 <button ></button>都可以匹配
var $allfile= $("#form1 :file");
var $allhidden= $("#form1 :hidden"); // <input type="hidden" />和<div style="display:none">test</div>都可以匹配.
var $allselect = $("#form1 select");
var $alltextarea = $("#form1 textarea");
var $allInputs = $("#form1 :input");
var $inputs = $("#form1 input");
$("div").append(" 有" + $alltext.length + " 个（ :text 元素）<br/>")
    .append(" 有" + $allpassword.length + " 个（ :password 元素）<br/>")
    .append(" 有" + $allradio.length + " 个（ :radio 元素）<br/>")
    .append(" 有" + $allcheckbox.length + " 个（ :checkbox 元素）<br/>")
    .append(" 有" + $allsubmit.length + " 个（ :submit 元素）<br/>")
    .append(" 有" + $allimage.length + " 个（ :image 元素）<br/>")
    .append(" 有" + $allreset.length + " 个（ :reset 元素）<br/>")
    .append(" 有" + $allbutton.length + " 个（ :button 元素）<br/>")
    .append(" 有" + $allfile.length + " 个（ :file 元素）<br/>")
    .append(" 有" + $allhidden.length + " 个（ :hidden 元素）<br/>")
    .append(" 有" + $allselect.length + " 个（ select 元素）<br/>")
    .append(" 有" + $alltextarea.length + " 个（ textarea 元素）<br/>")
    .append(" 表单有 " + $inputs.length + " 个（input）元素。<br/>")
    .append(" 总共有 " + $allInputs.length + " 个(:input)元素。<br/>")
    .css("color", "red")
//显示所有的隐藏标签名称
$allhidden.each(function(){
    $("div").append("<br/>").append($(this).get(0).nodeName);
});

九、表单对象属性过滤选择器

:enabled        可用
:disabled        不可用。<xxx disabled="disabled"> 或<xxx disabled="">  或  <xxx disabled>
:checked        选中（单选框radio、复选框 checkbox）
:selected        选择（下拉列表 select option）

示例：

<script type="text/javascript">
    $(document).ready(function(){
    //<button id="btn1">对表单内 可用input 赋值操作.</button>
    $("#btn1").click(function(){
        $("input:enabled").val("aaaa");
    });
    //<button id="btn2">对表单内 不可用input 赋值操作.</button>
    $("#btn2").click(function(){
        $("input:disabled").val("bbbb");
    });
    //<button id="btn3">获取多选框选中的个数.</button>
    $("#btn3").click(function(){
        alert($(":checkbox[name='newsletter']:checked").length);
    });
    //<button id="btn4">获取下拉框选中的内容.</button>
    $("#btn4").click(function(){
        //注意：此处：前面空格不能漏掉
        $("select :selected").each(function(){
            $("#selectDivId").append($(this).val());
        });
    });
});
</script>