【JavaScript】jQuery选择器

选择器算是jQuery的根基，对事件处理、遍历DOM和Ajax操作都依赖于选择器，所以想要熟练的使用jQuery，首先得熟悉jQuery有哪些选择器

选择器的分类：

通过css选择器语法规则获取元素的jQuery选择器包括：
    1、基本选择器。
    2、层次选择器。
    3、属性选择器。

通过条件过滤选取元素的jQuery选择器包括：
    1、基本过滤选择器。
    2、可见性过滤选择器。

一：基本选择器

jQuery基本选择器与css基本选择器相同，它继承了css选择器的语法和红能。

包括：

1、标签选择器（"p"）

2、类选择器（".class"）

3、ID选择器("#id")

4、并集选择器("p,.class,#id")

5、交集选择器（"p.class"）

二：层次选择器

什么是jQuery的层次选择器？就是根据获取元素与其父元素、子元素、兄弟元素等的关系而构成的选择器。

包括：
    1、后代选择器  示例：("div p"),选取div下的所有p元素

    2、子选择器  示例：("div>p")，选取div下的子元素p

    3、相邻元素选择器  示例：("div+p")，选取紧邻div元素之后的同辈元素p

    4、同辈元素选择器  示例：("div~p")，选取div元素之后所有同辈元素p

三：属性选择器

什么是属性选择器？顾名思义，就是通过HTML元素的属性选择元素的选择器。

属性选择器的详细说明
语法	描述	返回值	示例
[atribute]	选择包含给定属性的元素	元素集合	$(“[href]”)选择包含href属性的元素
[atribute=value]	选取等于给定属性是某个特定值的元素	元素集合	$(“[href=’#’]”)选取href属性值为“#”的元素
[atribute!=value]	选取不等于给定属性是某个特定值的元素	元素集合	$(“[href!=’#’]”)选取href属性值不为“#”的元素
[atribute^=value]	选取给定属性是以某些特定值开始的元素	元素集合	$(“[href^=’en’]”)选取href属性值以“en”开头的元素
[atribute$=value]	选取给定属性是以某些特定值结尾的元素	元素集合	$(“[href =’en’]”)选取href属性值以“en”结尾的元素
[atribute*=value]	选取给定属性是包含某些特定值的元素	元素集合	$(“[href*=’en’]”)选取href属性值中包含有“en”的元素

四：基本过滤选择器

语法	描述	返回值	示例
:first	选取第一个元素	单个元素	$(“li:first”)选取所有li元素中的第一个li元素
:last	选取最后一个元素	单个元素	$(“li:last”)选取所有li元素中的最后一个li元素
:not(selector)	选取去除所有与给定选择器匹配的元素	元素集合	$(“li:not(.s)”)选取所有class不是s的元素
:even	选取索引是偶数的所有元素(index从0开始)	单个元素	$(“li:even”)选取索引是偶数的所有li元素
:odd	选取索引是奇数的所有元素(index从0开始)	单个元素	$(“li:odd”)选取索引是奇数的所有li元素
:eq(index)	选取索引等于index的元素	集合元素	$(“li.eq(1)”)选取索引等于1的li元素
:gt(index)	选取索引大于index的元素	集合元素	$(“li.gt(1)”)选取索引大于1的li元素
:li(index)	选取索引小于index的元素	集合元素	$(“li.lt(1)”)选取索引小于1的li元素（小于1，不包括1）

五：可见性过滤选择器

什么是可见性过滤选择器？顾名思义啊，就是是否看得见！
就是你是要选择看得见的选择器还是看不见的选择器！

可见性过滤选择器
选择器	描述	返回值	示例
:visble	选取所有可见的元素	集合元素	$(“p:visble”)选取所有可见的p标签元素
:hidden	选取所有隐藏的元素	集合元素	$(“p:hidden”)选取所有隐藏的p标签元素

六：jQuery选择器注意事项

1.选择器是否包含特殊符号

    HTML示例代码：

        <div id = "id#a"></div>
        <div id = "id[a]"></div>

    按照普通的方式获取，例如
        $("#id#a");
        $("#id[a]");

    是无法正确的获取到元素的，正确的写法如下：

        $("#id\\#a");
        $("#id\\[a\\]");

    对标签中的特殊符号进行转义后即可正确获取

2.选择器中包含有空格

<div class="text">
    <div style="display:none"></div>
    <div style="display:none"></div>
    <div style="display:none"></div>
    <div class="test" style="display:none"></div>
</div>
<div class="test" style="display:none"></div>
<div class="test" style="display:none"></div>

//使用jQuery获取它们
var $t_a=$(".test :hidden");
var $t_b=$(".test:hidden");

var $a_len = $t_a.length;    //value=4
var $b_len = $t_b.length;    //value=3

//值所有结果不同，是因为后代选择器与过滤性选择器不同

var $t_a=$(".test :hidden");

//以上代码获取的是class为".test"的元素内部的隐藏元素（后代选择器）

var $b_len = $t_b.length;    //value=3

//以上代码获取的是class为“.test”的隐藏元素（过滤性选择器）

以上，根据课本内容而笔记，如有疑虑，可在评论中讨论

完