jQuery选择器

jQuery选择器详解？

jQuery选择器详解？

用于定位页面元素，源于CSS，由于做了扩展，其功能比 CSS 选择器更强大；且jQuery中的选择器性能要比DOM更好。

Query的选择器是将工厂函数作为容器：

var element = $(selector);

selector: 作为参数，表示jQuery的选择器。
返回值： jQuery的工厂函数会返回一个jQuery对象.

1.基本选择器

选择器	描述
ID选择器	根据给定的ID匹配一个元素
元素选择器	根据给定的元素名称匹配元素
类选择器	根据给定的css类名匹配元素
通配符选择器	匹配所有元素
组合选择器	将每一个选择器匹配到的元素合并后一起返回

注意： 由于jQuery对象是类数组对象，即使匹配的元素只有一个，返回的结果依旧是类数组对象。

代码测试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
    <div id="d1">玛卡巴卡</div>
    <div class="cls">吾西迪西</div>
    <script>
    //1.ID选择器
        console.log($('#d1'));//选择id为d1的div
    //2.元素选择器
        console.log($('div'));//选择所有div
    //3.类选择器
        console.log($('.cls'));//选择class为cls的div
    //4.通配符选择器
        console.log($('*'));// 匹配符选择器 - 匹配所有
    //5.组合选择器 - 多个选择器之间使用逗号隔开（并集）
        console.log($('#d1','.cls'));
    //5.组合选择器 - 多个选择器之间没有任何分割（交集）
        console.log($('#d2.cls'));
    </script>
</body>
</html>

2.层级选择器

选择器	描述
后代选择器	根据给定的祖先元素下匹配所有的后代元素
子选择器	根据给定的父元素下匹配所有的子元素
相邻兄弟选择器	根据给定的目标元素匹配下一个相邻兄弟元素
普通兄弟选择器	根据给定的目标元素匹配后面所有兄弟元素

注意： 由于jQuery对象是类数组对象，即使匹配的元素只有一个，返回的结果依旧是嘞数组对象。

代码测试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
    <div id="father">
        <div id="sun1">
            <div id="a6"></div>
            <div id="a1"></div>
            <div id="a2"></div>
            <div id="a3"></div>
            <div id="a4"></div>
            <div id="a5"></div>
        </div>
        <div id="sun2">
            <div id="a3"></div>
        </div>
    </div>

    <script>
        //1.后代选择器
        console.log($('#father div'));//sun1,a1,a2,a3,a4,a5,a6,sun2
        //2.子级选择器
        console.log($('#father>div'));//sun1,sun2
        //3.相邻兄弟选择器 - 指定元素的下一个相邻兄弟元素
        console.log($('#a1+div'));//a2
        //4.普通兄弟选择器 - 指定元素的后面所有的兄弟元素
        console.log($('#a1~div'));//a2,a3,a4,a5
        //5.全部兄弟选择 - siblings()方法 - 获取指定元素所有的兄弟元素（全面+后面）
        console.log($('#a1').siblings('div'));//a2,a3,a4,a5,a6
    </script>
</body>
</html>

3.基本过滤选择器

从多个元素中过滤出要选择的元素。

选择器	描述
:first过滤选择器	获取第一个元素
:last过滤选择器	获取最后一个元素
:even过滤选择器	匹配所有索引值为偶数的元素，从О开始计数
:odd过滤选择器	匹配所有索引值为奇数的元素，从О开始计数
:eq()过滤选择器	匹配一个给定索引值的元素
:gt()过滤选择器	匹配所有大于给定索引值的元素
:lt()过滤选择器	匹配所有小于给定索引值的元素
:not()过滤选择器	去除所有与给定选择器匹配的元素
:header过滤选择器	匹配如 h1, h2, h3之类的标题元素
:animated过滤选择器	匹配所有正在执行动画效果的元素

注意： 由于jQuery对象是类数组对象，即使匹配的元素只有一个，返回的结果依旧是嘞数组对象。

代码测试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>

    <style>
        #animal{
     
     
            width: 100px;
            height: 200px;
            background-color: black;
        }
    </style>
</head>
<body>
    <h1>这是标题</h1>
    <h2>这是标题</h2>
    <div>玛卡巴卡</div>
    <div id="d2">
        <div id="child"></div>
    </div>
    <div></div>
    <div></div>
    <div>吾西迪西</div>

    <div id="animal"></div>

    <script>
        //1.:first选择器与：last选择器 - 在指定范围匹配的元素中进行筛选
        console.log($('div:first'));
        console.log($('div:last'));
        
        //2.偶数选择器 -> 过滤掉偶数，剩下为奇数
        console.log($('div:even'));
        //3.奇数选择器 -> 过滤掉奇数，剩下为偶数
        console.log($('div:odd'));

        //4.:eq(index) -> index表示索引值
        console.log($('div:eq(0)'));//等于
        console.log($('div:gt(0)'));//大于
        console.log($('div:lt(0)'));//小于

        //5.:header -> 匹配h1至h6元素
        console.log($(':header'));
        //设置一个动画
        function animal(){
     
     
            $('#animal').slideToggle(animal);
        }
        //调用动画
        animal();
        //6.:animated - > 只能匹配有jquery实现的动画
        console.log($(':animated'));
        //3.:not() - 去除not内的元素，返回非not内元素。
        console.log($("div:not('#child')"));
    </script>
</body>
</html>

4.内容过滤选择器

选择器	描述
：contains（）过滤选择器	匹配包含给定文本的元素
：empty过滤选择器	匹配所有不包含子元素或者文本的空元素
：parent过滤选择器	匹配含有子元素或者文本的元素
：has()过滤器	匹配含有选择器所匹配的元素的父级元素

注意： 由于jQuery对象是类数组对象，即使匹配的元素只有一个，返回的结果依旧是嘞数组对象。

代码测试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
    <div>这是div元素</div>
    <div></div>
    <div>
        <div id="child"></div>
    </div>
    <script>
        //1. :contains( )  匹配给定元素的文本内容 - 文本内容包含di的元素。
        console.log($('div:contains("di")'));

        //2. :empty - 表示没有子级且没有文本内容的元素
        console.log($('div:empty'));
        //3. :parent - 匹配含有子元素或者文本的元素
        console.log($('div:parent'));
        //4. :has() - 表示包含匹配指定选择器元素的父级元素
        console.log($('div:has("#child")')[0]);
    </script>
</body>
</html>

5. 属性过滤选择器

选择器	描述
[attr]过滤选择器	匹配包含给定属性的元素
[attr=value]过滤选择器	匹配给定的属性是某个特定值的元素
[attr!=value]过滤选择器	匹配所有不含有指定的属性，或者属性不等于特定值的元素
[attr^=value]过滤选择器	匹配给定的属性是以某些值开始的元素
[attr$=value]过滤选择器	匹配给定的属性是以某些值结尾的元素
[attr*=value]过滤选择器	匹配给定的属性是以包含某些侑的元素
组合属性过滤选择器	匹配元素需要同时满足多个属性过滤选择器

注意: 由于jQuery对象是类数组对象，即使匹配的元素只有一个，返回的结果依旧是类数组对象。

代码测试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
    <div id="username" name='d1' class="mydiv"></div>
    <div id="password" name='d2' class="mycls"></div>
    <div id="d3"></div>
    <div class="myd"></div>

    <script>
        //1.[attr]过滤选择器 - 匹配包含给定属性的元素
        console.log($('div[name]'));
        //2. [attr=value]过滤选择器 - 匹配给定的属性是某个特定值的元素
        console.log($('div[class=mydiv]'));
        //3.[attr!=value]选择器 - 包含没有attr属性的元素
        console.log($('div[class!=mydiv]'));
        //4.[attr^=value]过滤选择器 - 匹配给定的属性是以某些值开始的元素
        console.log($('div[class^=my]'));
        //5.[attr$=value]过滤选择器 - 匹配给定的属性是以某些值结尾的元素
        console.log($('div[class$=my]'));
        //6.[attr*=value]过滤选择器 - 匹配给定的属性是以包含某些侑的元素
        console.log($('div[class*=y]'));
        //7.组合属性过滤选择器  - 属性过滤选择器组和用法 -> 交集
        console.log($('div[name=d1][class^=my]'));
    </script>
</body>
</html>

6.子元素过滤选择器

选择器	描述
:nth-child()	匹配器父元素下的第N个子或奇偶元素
:first-child()	匹配第一个子元素
:last-child	匹配最后一个子元素
:only-child	如果某个元素是父元素中唯一的子元素，那将会被匹配

注意： 由于jQuery对象是类数组对象，即使匹配的元素只有一个，返回的结果依旧是类数组对象。

代码测试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
    <div id="parent">
        <div id="d1">这是id为d1的div元素</div>
        <div id="d2">这是id为d2的div元素</div>
        <div id="d3">这是id为d3的div元素
            <div id="child"></div>
        </div>
    </div>

    <script>
        //1. :first-child - 匹配第一个子元素
        console.log($('div:first-child'));//返回值： 包含，#parnet(也是第一个) #d1 #child 
        //2. :first-last - 匹配最后一个子元素
        console.log($('div:last-child'));

        /*3.
            :nth-child(index)
            *作用 - 匹配当前元素作为第index个子元素
            *注意 - index是从1开始，表示第几个
        */
        console.log($('div:nth-child(1)'));
        //4. :only-child - 如果某个元素是父元素中唯一的子元素，那将会被匹配
        console.log($('div:only-child'));
    </script>
</body>
</html>

7.表单对象属性过滤选择器

选择器	描述
:enabled	匹配所有可用元素
:disabled	匹配所有不可用元素
:checked	匹配所有选中的被选中的元素（复选框，单选框）
:selected	匹配所有选中的元素

注意: 由于jQuery对象是类数组对象，即使匹配的元素只有一个，返回的结果依旧是类数组对象。

代码测试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单对象属性过滤选择器</title>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
    <form action="#">
        <input type="text" disabled>
        <input type="checkbox">html
        <input type="checkbox" checked>css
        <select>
            <option>玛卡巴卡</option>
            <option selected>吾西迪西</option>
            <option>汤布利布</option>
        </select>
    </form>
    <script>
    //1. :disabled  - 匹配所有不可用元素      
        console.log($('input:disabled'));
    //2. :checked  - 匹配所有选中的被选中的元素（复选框，单选框）   
        console.log($('input:checked'));
    //3. :selected - 匹配所有选中的<option>元素 
        console.log($('option:selected'));
    //4. :enabled  - 匹配所有可用元素   
        console.log($('input:enabled'));
    </script>
</body>
</html>

8.表单选择器

选择器	描述
:input选择器	匹配所有input、textarea、 select和button元素
:text选择器	匹配所有的单行文本框
:password选择器	匹配所有密码框
:radio选择器	匹配所有单选按钮
:checkbox选择器	匹配所有复选框
:submit选择器	匹配所有提交按钮
:image选择器	匹配所有图像域
reset选择器	匹配所有重置按钮
:button选择器	匹配所有按钮
:file选择器	匹配所有文件域

注意: 由于iQuery对象是类数组对象，即使远配的元素只有一个，返回的结果依旧是类数组对象。

代码测试：

jQuery选择器是什么？