选择器

一、基础选择器

元素选择器
ID 选择器
类选择器
群组选择器
通配符选择器

元素选择器

元素选择器也叫做标签选择器，就是通过标签名来选择元素。

$("元素名");

ID 选择器

ID 选择器是用来选择指定 id 名的元素的。

$("#id名");

类选择器

类选择器就是选择指定类名的元素。其语法格式为：

$(".类名");

在之前的实验中，我们只在 css 中写了一个样式属性，格式如下：

jQuery对象.css("属性名", "属性值");

可以给 css 方法传入一个 json 对象，这样就可以同时修改多个属性，语法如下：

$().css({"属性1":"属性值1","属性2":"属性值2"...})

类选择器除了上述这种用法，我们还可以使用「标签名.类名」的方式：

$('div.test') 表示获取 class 值为 test 的 div 标签。

群组选择器

群组选择器可以让我们同时定义多个选择器，多个选择器之间用 ,号隔开，最终返回一个 jQuery 对象，该对象中包含了这些选择器选中的全部元素。

其语法格式为：

$("选择器1, 选择器2,...");

元素选择器、类选择器、ID 选择器都可以组合在一起。

群组选择器的使用

$(function () {
    $("h3,span").css("color", "blue");
});

通配符选择器

通配符选择器就是可以设置全局样式的选择器，通俗来讲就是文档中的所有元素都要接受该规则。

在 jQuery 中，我们用 * 表示通配符选择器，使用格式如下所示：

$("*");

后代选择器

后代选择器，听其名字我们应该可以猜到是用来选择某元素的后代元素，对的，它就是对指定元素内部中的后代元素进行操作。回忆一下，我们在 CSS 中的写法如下。

M N {
}
/*其中 N 是 M 的后代元素*/

在我们的 jQuery 中，后代选择器的使用格式如下：

$("M N");
//其中 N 是 M 的后代元素

注意

这里的后代 N 指的不仅仅是 M 的子代，而是 M 所有能够匹配的后代元素。

后代选择器的使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="jquery-3.6.0.min.js"></script>
    <title>后代选择器</title>
    <script>
      $(function () {
        $("#father p").css("color", "blue");
      });
    </script>
  </head>
  <body>
    <div id="father">
      <p>Hello</p>
      <p>lan qiao</p>
      <div id="child">
        <p>我是蓝桥云课</p>
      </div>
    </div>
  </body>
</html>

在 body 标签中，我们创建了一个 id 名为 father 的 div 元素，在其中包含两个 p 元素，和一个 id 名为 child 的 div 标签。
在 id 名为 child 的 div 标签中又创建了一个 p 标签。
我们使用 $("#father p") 来选择 id 名为 father 的 div 元素中的所有后代 p 元素。
从实验效果图中，我们可以看出这三个 p 元素都被选中了，这也说明了该选择器可以选择出某个元素下符合要求的后代元素（包含儿子、孙子、重孙子等）。

子代选择器

子代选择器也是一种后代选择器，它与我们之前学的后代选择器有所不同，它只能对指定标签的子代元素进行操作。

在 jQuery 中，子代选择器的使用格式如下：

$("M>N");

子代选择器的使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="jquery-3.6.0.min.js"></script>
    <title>子代选择器</title>
    <script>
      $(function () {
        $("#father>p").css("color", "blue");
      });
    </script>
  </head>
  <body>
    <div id="father">
      <p>Hello</p>
      <p>lan qiao</p>
      <div id="child">
        <p>我是蓝桥云课</p>
      </div>
    </div>
  </body>
</html>

提示

从上面的代码和截图效果可以看出，我们使用 "#father>p" 只选择出 "id="father" 的子代 p 元素，即儿子节点，这就是它和后代选择器的区别。

兄弟选择器

兄弟选择器是查找元素的兄弟节点（即同级节点）从而进行操作。

其语法格式为：

$("M~N");

兄弟选择器的使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="jquery-3.6.0.min.js"></script>
    <title>兄弟选择器</title>
    <script>
      $(function () {
        $("#child~p").css("color", "blue");
      });
    </script>
  </head>
  <body>
    <div id="father">
      <p>Hello</p>
      <p>lan qiao</p>
      <div id="child"></div>
      <p>我是蓝桥云课</p>
      <p>我是蓝桥云课</p>
      <p>我是蓝桥云课</p>
    </div>
  </body>
</html>

从上面效果图中可以看出，位于 ID 选择器 child 之后的 p 元素中文字的颜色都被改变了，这说明 #child~p 能够选择指定元素后面的所有兄弟元素。

相邻选择器

在前面我们讲的 $("#child~p") 可以选择指定元素后面的所有兄弟 p 元素，而相邻选择器只能选到指定元素的邻居兄弟元素。

其使用格式为：

$("M+N"); // 选择下一个兄弟节点 N

相邻选择器的使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="jquery-3.6.0.min.js"></script>
    <title>相邻选择器</title>
    <script>
      $(function () {
        $("#child+p").css("color", "blue");
      });
    </script>
  </head>
  <body>
    <div id="father">
      <p>Hello</p>
      <p>lan qiao</p>
      <div id="child"></div>
      <p>我是蓝桥云课</p>
      <p>我是蓝桥云课</p>
      <p>我是蓝桥云课</p>
    </div>
  </body>
</html>

在上面代码中，我们使用相邻选择器给 id 名为 child 的 div 元素的下一个兄弟节点 p 元素设置了字体颜色。

三、属性选择器

属性选择器就是根据属性来选择元素，其中我们可以使用正则表达式中的一些符号来选择带有某些属性值的元素。

常见的属性选择器如下表所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="jquery-3.6.0.min.js"></script>
    <title>属性选择器</title>
    <script>
      $(function () {
        $("div[id]").css("font-size", "30px");
        $("div[id='item2']").css("color", "blue");
        $("div[id !='item2']").css("text-shadow", "2px 2px 2px #78c4d4");
        $("body[class ^='c']").css("text-align", "center");
      });
    </script>
  </head>
  <body class="content">
    <div id="item1">蓝桥云课</div>
    <div id="item2">蓝桥云课</div>
    <div class="test1">蓝桥云课</div>
    <div class="test2">蓝桥云课</div>
  </body>
</html>

在上面代码中，div[id] 选择了带有 ID 选择器的元素。
div[id='item2'] 选择了 id 名为 item2 的元素。
div[id !='item2'] 选择了 id 名不为 item2 的元素。
body[class ^='c'] 选择了 class 名以 c 开头的元素。

四、伪类选择器

位置伪类选择器
可见性伪类选择器
内容伪类选择器
表单伪类选择器
表单对象属性选择器

位置伪类选择器

所谓位置伪类选择器就是通过元素的位置来进行选择，比如我们可以选择指定第 n 个位置的元素等。

常见的位置伪类选择器如下所示：

选择器	说明
:first	选取指定元素的第一个该元素。
:last	选取指定元素的最后一个该元素。
:odd	选取指定元素序号为奇数的所有该元素。
:even	选取指定元素序号为偶数的所有该元素。
:eq(n)	选取指定元素的第 n 个该元素。
:lt(n)	选择指定元素中小于 n 的所有该元素。
:gt(n)	选取指定元素中大于 n 的所有该元素。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="jquery-3.6.0.min.js"></script>
    <title>位置伪类选择器</title>
    <script>
      $(function () {
        $("li:first").css("color", "#a7c5eb");
        $("li:last").css("color", "#ffc478");
        $("li:odd").css("color", "#c1a1d3");
        $("li:even").css("font-size", "25px");
        $("li:eq(4)").css("text-shadow", "2px 2px 2px #96bb7c");
        // $("li:lt(4)").css("text-shadow","2px 2px 2px #96bb7c");
        // $("li:gt(4)").css("text-shadow","2px 2px 2px #96bb7c");
      });
    </script>
  </head>
  <body>
    水果清单：
    <ul>
      <li>苹果</li>
      <li>梨子</li>
      <li>葡萄</li>
      <li>西瓜</li>
      <li>樱桃</li>
      <li>草莓</li>
      <li>桑葚</li>
    </ul>
  </body>
</html>

在上面的代码中，我们使用 li:first 选择了第一个列表项。
使用 li:last 选择了最后一个列表项；
使用 li:odd 选择了下标为奇数的列表项。
使用 li:even 选择了下标为偶数的列表项。
使用 li:eq(4) 选择了下标为 4 的列表项元素。（下标从 0 开始）
使用 li:lt(4) 选择了索引下标小于 4 的列表项元素。（下标从 0 开始）
使用 li:gt(4) 选择了索引下标大于 4 的列表项元素。（下标从 0 开始）

注意

下标从 0 开始

可见性伪类选择器

所谓可见性伪类选择器，是针对元素在页面上显示或者隐藏而言的。

可见性伪类选择器如下所示：

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="jquery-3.6.0.min.js"></script>
    <title>可见性伪类选择器</title>
    <style>
      /*不可见元素*/
      .select1 {
        display: none; /*元素隐藏*/
      }
    </style>
    <script>
      $(function () {
        $("#btn1").click(function () {
          $("div:hidden").css("display", "block"); /*让隐藏元素显示到页面上*/
        });
        $("#btn2").click(function () {
          $("div:visible").css("color", "blue"); /*改变显示元素的字体颜色*/
        });
      });
    </script>
  </head>
  <body>
    <div class="select1">&#127773;</div>
    <div class="select2">Hello</div>
    <input id="btn1" type="button" value="显示" />
    <input id="btn2" type="button" value="变色" />
  </body>
</html>

最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。

在上面代码中，我们把 class=select1 的 div 元素通过 display 属性设置为页面上不可见。
当点击显示按钮时，隐藏元素会显示到页面上，因为我们通过使用 div:hidden 能够选择到被隐藏元素，设置它为可见，这样就成功显示到页面上了。
点击第二个按钮，触发 $("#btn2").click(function() 执行内部代码，我们通过使用 div:visible 给页面上可见元素的字颜色设置为蓝色。

内容伪类选择器

所谓内容选择器就是根据元素的内容来选择的。

内容伪类选择器如下所示：

选择器	说明
:contains(text)	对包含指定 text 文本的元素进行操作。
:has(selector)	对包含指定选择器的元素进行操作。
:parent	选择有子节点(包含文本)的元素，空元素除外
:empty	对空元素进行操作。

在上面代码中，使用 $("td:contains('1')") 给 td 元素中包含内容 1 的元素设置绿色字体。
使用 $("tr:has(td)") 给包含 td 元素的 tr 元素设置背景颜色。
使用 $("td:empty") 给空的 td 元素添加文字内容。
使用 $("td:parent") 给是父亲的 td 元素添加文字内容。

表单伪类选择器

表单伪类选择器是专用给表单元素设计的。

表单伪类选择器如下所示：

选择器	说明
:input	选取所有 input 元素。
:button	选取所有 input 类型为 button 的元素。
:submit	选取所有 input 类型为 submit 的元素。
:reset	选取所有 input 类型为 reset 的元素。
:text	选取所有 input 类型为 text 的元素。
:textarea	选取所有多行文本框。
:password	选取所有 input 类型为 password 的元素。
:radio	选取所有 input 类型为 radio 的元素。
:checkbox	选取所有 input 类型为 checkbox 的元素。
:image	选取所有图片域。
:file	选取所有 input 类型为 file 的元素。

在上面代码中，使用 $("input:text") 给 text 类型的表单元素设置背景颜色为黄色。
使用 $("input:password") 给 password 类型的表单元素设置背景颜色为粉色。
使用 $("input:radio") 给 radio 类型的表单元素匹配单选按钮并选中。
使用 $("input:checkbox") 给 checkbox 类型的表单元素匹配单选按钮并选中。
使用 $("input:file") 给 file 类型的表单元素设置字体颜色为绿色。
使用 $("input:submit") 给 submit 类型的表单元素设置 30% 的圆角边框。
使用 $("input:reset") 给 reset 类型的表单元素设置 30% 的圆角边框。

表单对象属性选择器

表单对象属性选择器是根据表单元素的状态来选择的。

表单对象属性选择器如下所示：

选择器	说明
:checked	选取所有被选中的表单元素。
:selected	选取被选中的表单元素项。
:enabled	选取所有可用的表单元素。
:disabled	选取所有不可用的表单元素。
:read-only	选取只读权限的表单元素。
:focus	选取所有获得焦点的表单元素。

选择器

# 选择器

# 一、基础选择器

# 元素选择器

# ID 选择器

# 类选择器

# 群组选择器

# 群组选择器的使用

# 通配符选择器

# 二、层次选择器

# 后代选择器

# 后代选择器的使用

# 子代选择器

# 子代选择器的使用

# 兄弟选择器

# 兄弟选择器的使用

# 相邻选择器

# 相邻选择器的使用

# 三、属性选择器

# 四、伪类选择器

# 位置伪类选择器

# 可见性伪类选择器

# 内容伪类选择器

# 表单伪类选择器

# 表单对象属性选择器

选择器