jQuery基础之-jQuery选择器(一)

1 基础选择器

1.1 基本选择器

基本选择器在开发中使用的频率是最高的，主要有以下4种：

1. 元素选择器：语法为$("元素名称")

   $("p").css("color","red");

2. id选择器：语法为$("#id名称")，别忘记写#

   $("#submit").css("color","red");

3. class选择器：语法为$(".类名称")，别忘记写.

   $(".btn").css("color","red");

4. 群组选择器：即同时对几个选择器进行相同的操作，语法为$("选择器1, 选择器2, ... , 选择器n")

   $("h3,div,p,span").css("color","red");

1.2 层次选择器

常见的层次关系有：父子、后代、兄弟、相邻，而在jQuery中，层次选择器则有以下4种：

1. 后代选择器：语法为$("M N")，注意M与N之间用空格隔开，如下例子所示：表示选取id="first"的元素内部的所有p元素，不论是子代还是后代都会被选中。

   $("#first p")

2. 子代选择器：语法为$("M>N")，它只选取子元素，不包括其他后代元素。
3. 兄弟选择器：语法为$("M~N")，即选取元素后面（不包括前面）的某一类兄弟元素。
4. 相邻选择器：语法为$("M+N")，选取元素后面的某一个相邻的兄弟元素。

注：兄弟选择器选择的是某一类元素，而相邻选择器选择的是某一个元素。

1.3 属性选择器

属性选择器即通过元素的属性来选择元素的一种方式，常见的属性选择器如下所示（E代表element，即元素）：

属性选择器经常用于选取表单元素。

选择器	说明
E[attr]	选择元素E，其中E元素必须带有attr属性
E[attr="value"]	选择元素E，其中E元素的attr属性取值是value
E[attr!= "value"]	选择元素E，其中E元素的attr属性取值不是value
E[attr^= "value"]	选择元素E，其中E元素的attr属性取值是以value开头的任何字符
E[attr$="value"]	选择元素E，其中E元素的attr属性取值是以value结尾的任何字符
E[attr*= "value"]	选择元素E，其中E元素的attr属性取值是包含value的任何字符
E[attr| = "value"]	选择元素E，其中E元素的attr属性取值等于value或者以value开头
E[attr~= "value"]	选择元素E，其中E元素的attr属性取值等于value或者包含value

2 伪类选择器

2.1 位置伪类选择器

位置伪类选择器：即根据页面中的位置来选取元素。常见的选择器如下表所示：

选择器	说明
:first	选取某元素的第一个
:last	选取某元素的最后一个
:odd	选取某种元素中序号为“奇数”的所有元素，由于序号从0开始，选中的为偶数行
:even	选取某种元素中序号为“偶数”的所有元素，由于序号从0开始，选中的为奇数行
:eq(n)	选取某种元素的第n个，n是一个整数，从0开始
:lt(n)	选取某种元素中小于n的所有元素，n是一个整数，从0开始
:gt(n)	选取某种元素中大于n的所有元素，n是一个整数，从0开始

2.2 子元素伪类选择器

子类伪类选择器：即选取某个元素的子元素，其可以分为两大类：按位置和按类型位置（分类名自己起的😅）。

第一类如下表所示：E代表子元素。

选择器	说明	举例
E:first-child	选择父元素下的第一个子元素	$("ul li:first-child")
E:last-child	选择父元素下的最后一个子元素	$("ul li:last-child")
E:nth-child(n)	选择父元素下的第n个子元素或奇偶元素，n取值有3种：数字、odd、even，注意：n从1开始	略
E:only-child	选择父元素下唯一的子元素，该父元素只有一个子元素	略

第二类如下表所示：同样地，E代表子元素。

选择器	说明
E:first-of-type	选择父元素下的第一个E类型的子元素
E:last-of-type	选择父元素下的最后一个E类型的子元素
E:nth-of-type(n)	选择父元素下的第n个E类型的子元素或奇偶元素，n取值有3种：数字、odd、even，注意：n从1开始
E:only-of-type	选择父元素下唯一的E类型的子元素，注意：该父元素可以有多个子元素

2.3 可见性伪类选择器

可见性伪类选择器，指的是根据元素的可见与不可见两种状态来选取元素。

选择器	说明
E:visible	选取所有可见元素
E:hidden	选取所有不可见元素

如下例子所示：我们将li标签隐藏，待点击按钮后将会显示出来。

<li style="display:none;">隐藏的元素</li>
<input id="btn" type="button" value="显示">
<script>
    $("#btn").click(function(){
        $("li:hidden").css("display","block");
    });
</script>

2.4 内容伪类选择器

选择器	说明
:contains(text)	选取包含指定文本的元素
:has(selector)	选取包含指定选择器的元素
:parent	选取内部含有文本或者子元素的元素（多读几遍，定语太多😄）
:empty	选取空元素，即不含有文本内容且没有子元素。

举例：

$("p:contains(jQuery)") //取文本内容包含“jQuery”的p元素
$("div:has(span)")  //选取内部含有span的div元素
$("td:empty") //选取内部没有文本也没有子元素的td元素
$("td:parent")  //表示选取内部有文本或者子元素的td元素

2.5 表单伪类选择器

表单伪类选择器是用来专门操作表单元素的。常用的如下表所示：

选择器	说明
:input	选取所有input元素
:button	选取所有普通按钮，即<input type="button" />
:submit	选取所有提交按钮，即<input type="submit" />
:reset	选取所有重置按钮，即<input type="reset" />
:text	选取所有单行文本框
:textarea	选取所有多行文本框
:password	选取所有密码文本框
:radio	选取所有单选框
:checkbox	选取所有复选框
:image	选取所有图片域
:file	选取所有文件域

$("input:checkbox").attr("checked", "checked"); //选取所有的复选框，并设置复选框的checked属性值为checked

2.6 表单属性伪类选择器

表单属性伪类选择器，指的是根据表单元素的属性来选取的一种伪类选择器。具体有：

选择器	说明
:checked	选取所有被选中的表单元素，一般是单选框或复选框
:selected	选取被选中的表单元素的选项，一般是下拉列表
:enabled	选取所有可用的表单元素
:disabled	选取所有不可用的表单元素
:read-only	选取所有只读的表单元素
:focus	选取所有获得焦点的表单元素

举例：获取被选中复选框的值。

<script>
    var result = $("input:checked").val();
</script>
<label><input type="checkbox" value="苹果"/>苹果</label>
<label><input type="checkbox" value="西瓜" checked/>西瓜</label>
<label><input type="checkbox" value="蜜桃"/>蜜桃</label>

2.7 其他伪类选择器

如下表所示：

选择器	说明
:not(selector)	选取除了某个选择器之外的所有元素
:animated	选取所有正在执行动画的元素
:root	选取页面根元素，即html元素
:header	选取h1~h6的标题元素
:target	选取锚点元素
:lang(language)	选取特定语言的元素

举例：则选取除第4项之外的所有其他项。

<script>
    $("li:not(#select)").css("color", "red");
</script>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li id="select">jQuery</li>
    <li>Vue.js</li>
</ul>