jQuery选择器

在简介jQuery选择器之前需要了解一下什么是jQuery对象和DOM对象，它们之间是如何进行相互转换的

jQuery对象和DOM对象

用原生 js 获取来的对象就是 DOM 对象，jQuery 方法获取的对象就是 jQuery 对象。

两种获取对象的方式：

jQuery对象与JavaScript对象转换

jQuery对象转成JavaScript对象

语法：

let  dom对象 = jQuery对象[0];

JavaScript对象转成jQuery对象

语法：

let  jQuery对象 =  $(dom对象);

jQuery选择器

基本选择器

层次选择器

举个例子：

HTML部分代码：

<body>
    <input type="button" value="改变所有td中<a>标签的字体" id="b1" />
    <input type="button" value="改变所有td中但不是td孙子以下的<a>标签的颜色" id="b2" />
    <input type="button" value="改变id为one的下一个td背景色" id="b3" />
    <input type="button" value="改变id为two的所有div的背景色" id="b4" />
    <table border="1" cellspacing="0" width="200">
        <tr>
            <td id="one"><a href="#">1</a></td>
            <td class="mini"><a href="#">2</a>
            <div><a>第一个a<a>div中的</a></a></div></td>
            <td>3</td>
        </tr>
    </table>
    <a href="#">嘿嘿</a>
    <div>div1</div>
    <div class="mini" id="two">div2</div>
    <div>div3</div>
    <div>div4</div>
    <span>span1</span>
    <span>span2</span>
  </body>

jQuery部分代码：

<script language="JavaScript">
        $('#b1').click(function(){
　　　　　　　//后代选择器
            $('td a').css("fontFamily","华文彩云");
        })
        $('#b2').click(function(){
　　　　　　　//子代选择器
            $('td>a').css("color",'aqua');
        })
        $('#b3').click(function(){
　　　　　　　//兄弟选择器
            $('#one+td').css('backgroundColor','red');
        })
        $('#b4').click(function(){
　　　　　　　//相邻选择器
            $('#two~div').css('backgroundColor','green')
        })
  </script>

初始状态：

点击第一个按钮时效果展示：

点击第二个按钮时效果展示：

点击第三个按钮时效果展示：

点击第四个按钮时效果展示：

可以看见：相邻选择器会选择下面相邻的指定元素，如果下面相邻的没有该指定元素则不会选择，所以相邻选择器最多选中一个。

属性选择器

举个例子：

HTML部分代码：

<body>
    <input type="button" value="改变含有属性title的div" id="b1" />
    <input type="button" value="属性title等于test的div元素" id="b3" />
    <input type="button" value="属性title不等于test的div元素" id="b4" />
    <!-- <input type="button" value="含有title但是title!=test" id="b5" /> -->
    <input type="button" value="属性title是以te开头的div元素" id="b6" />
    <input type="button" value="属性title是以est结尾的div元素" id="b7" />
    <input type="button" value="属性title包含es的div元素" id="b8" />
    <input type="button" value="选取有属性id的div元素  然后在结果中选取属性title值含有es的div元素" id="b9" />
    
    <div title="test01"> div title=test01</div>
    <div> div </div>
    <div title="test"> div title=test</div>
    <div title="test" id="1"> div title=test</div>
    <div> div</div>
    <div title="01" id="1"> div title=01</div>
    <div title="01est" id="1"> div title=01est</div>
  </body>

jQuery部分代码：

<script language="JavaScript">
         //一、改变含有属性title的div
        $('#b1').click(function(){
            $('div[title]').css('backgroundColor','red');
        })
        //属性title不等于test的div元素
        $('#b3').click(function(){
            $('div[title=test]').css('color','aqua');
        })
        //属性title不等于test的div元素
        $('#b4').click(function(){
            $('div[title!=test]').css('color','pink');
        })
        //属性title是以te开头的div元素
        $('#b6').click(function(){
            $('div[title^=te]').css('color','blue');
        })
        //属性title是以est结尾的div元素
        $('#b7').click(function(){
            $('div[title$=est]').css('color','yellow');
        })
        //属性title包含es的div元素
        $('#b8').click(function(){
            $('div[title*=es]').css('color','purple');
        })
        //选取有属性id的div元素  然后在结果中选取属性title值含有es的div元素
        $('#b9').click(function(){
            $('div[id][title*=es]').css('color','blue');
        })
     </script>

效果展示：

初始页面状态：

点击第一个按钮时效果展示：

点击第二个按钮时效果展示：

点击第三个按钮时效果展示：

点击第四个按钮时效果展示:

点击第五个按钮时效果展示：

点击第六个按钮时效果展示：

点击第七个按钮时效果展示：

表单选择器

表单属性选择器

效果展示：

HTML部分代码展示：

<body>
    <input type="button" value="取出可用的input" id="b1" />
    <input type="button" value="取出不可用的input" id="b2" />
    <input type="button" value="利用jquery的length属性获取多选框选中的个数" id="b3" />
    <input type="button" value="输出被选中的多选框的值" id="b4" />
    <input type="button" value="用jquery的text方法获取下拉选的结果" id="b5" />
    
    <input type="text" value="可用" />
    <input type="text" value="不可用" disabled="true" />
    <input type="text" value="不可用" disabled="true" />
    <input type="text" value="可用" />
    <input type="text" value="可用" />
    
    <input type="checkbox" name="lang" value="java"/>java
    <input type="checkbox" name="lang" value="c"/>c
    <input type="checkbox" name="lang" value="c#"/>c#
    
    <select name="">
        <option value="">--请选择--</option>
        <option value="选项一">选项一</option>
        <option value="选项二">选项二</option>
        <option value="选项三">选项三</option>
    </select>
    
  </body>

jQuery部分代码展示：

         //一、取出可用的input
　　　　　$('#b1').click(function(){
            $('input:enabled').css('color','red');
        })
        
        //二、取出不可用的input
        $('#b2').click(function(){
            $('input:disabled').css('color','blue');
        })
        
        //三、利用jquery的length属性获取多选框选中的个数
        $('#b3').click(function(){
            alert($(':checkbox:checked').length);
        })
        
        //四、输出被选中的多选框的值
　　　　 //val()：方法用于获取value值
        $('#b4').click(function(){
            $(':checkbox:checked').each(function(index,items){
                console.log(index+"=====>"+$(items).val());
            });
        })
        
        //五、用jquery的text方法获取下拉选的结果
　　　　 //选择select标签下的option标签，并且这些标签被选中的
　　    //text()：方法用于获取文本内容
        $('#b5').click(function(){
            console.log($('select>option:selected').text());
        })