jquery常用选择器-jquery常见选择器 收藏 0

详解JQuery框架的五大选择器

此账号为华为云开发者社区官方运营账号，提供全面深入的云计算前景分析、丰富的技术干货、程序样例，分享华为云前沿资讯动态

本文分享自华为云社区《 【JQuery框架】五大选择器“全家桶”详解！！！》，原文作者：灰小猿 。

今天来和大家分享一下JQuery的五种选择器的详细使用方法，那么何为选择器？从功能上来讲，它能够筛选具有相似特征的元素标签，在我们想要对具有相似特征的元素进行集中或统一操作时是十分有用的。

首先我们需要了解选择器使用的基本操作，该基本操作可以分为三步：

选择器的使用需要进行事件的绑定，一般来说我们可以将事件绑定到一个按钮上去，通过按钮的点击来触发相应的事件响应。

同时在jQuery中，这样的事件绑定是需要写在一个入口函数中去的，在<script></script>的代码段中建立入口函数的语法是：

在这里需要注意的是：在js中定义入口函数的window.onload方法和$(function)方法是有区别的，

具体如下：

window.onload只能定义一次，如果定义多次，后面的会将前面的覆盖掉

$(function)方法是可以定义多次的，后面的不会将前面的覆盖掉

当我们对选择器的事件进行了绑定之后，我们就可以通过选择器进行相应元素的样式控制了，在这里通常的表现是css方法，通过css方法来对相应的元素样式进行修改。

来看一个基本操作的实例：

那么接下来就通过实例分别来和大家讲一下jQuery框架下的五种选择器的使用方法。

标签选择器又称为“元素选择器”，

语法：$(“html标签名”)

作用：获得所有匹配标签元素名称的元素

语法：$(“#id的属性值”)

作用：获得与指定id属性值匹配的元素

语法：$(“.class的属性选择器”)

作用：获得与指定class属性值匹配的元素

语法：$(“选择器1,选择器2….”)

获取多个选择器选中的所有元素

语法：$(“A B”)

作用：选择A元素内部的所有B元素

语法：$(“A > B”)

作用：选择A元素内部的所有B子元素

在这里需要注意的是：这两个选择器看上去似乎没有什么区别，但是我们在使用时就会发现其实是有区别的，后代选择器会将元素A内部的所有B元素都选中，而子选择器只会选中元素A的下一级元素中的B元素，范围是小于后代选择器的。具体可以看下面的实例：

语法：$(“A[属性名]”)

作用：包含指定属性的选择器

语法：$(“A[属性名=’值’]”)

作用：包含指定属性等于指定值的选择器，

在这个选择器中，我们可以根据他的功能进行拓展，比如我们可以将：

“=”换成“!=”，就是指定属性名称不等于指定值的选择器

“=”换成“^=”，就是指定属性名称是以指定值开头的选择器

“=”换成“$=”,就是指定属性名称是以指定值结尾的选择器

“=”换成“*=”，就是指定属性名称中包含指定值的选择器

语法：$(“A[属性名=’值’][]…”)

作用：包含多个属性条件的选择器

语法：$(“A:first”)

作用：获得选择的元素的第一个元素

语法：$(“A:last”)

作用：获得选择的元素的最后一个元素

语法：$(“not(selector)”)

作用：不包括指定内容的元素

语法：$(“A:even”)

作用：从0开始计数，获得选择的元素中索引为偶数的元素

语法：$(“A:odd”)

作用：从0开始计数，获得选择的元素中索引为奇数的元素

语法：$(“A:eq(index)”)

作用：获得选择的元素中指定索引的元素

语法：$(“A:gt(index)”)

作用：获得选择的元素中大于指定索引的元素

语法：$(“A:lt(index)”)

作用：获得选择的元素中小于指定索引的元素

语法：$(“:header”)

作用：获得标题（h1~h6）元素，为固定写法

语法：$(“A:enabled”)

作用：获得选择元素中的可用元素

语法：$(“A:disabled”)

作用：获得选择元素中的不可用元素

语法：$(“A:checked”)

作用：获得单选/复选框选中的元素

语法：$(“A:selected”)

作用：获得下拉框选中的元素

在这里需要注意一点：上面的两个选中选择器的作用对象是不一样的，第一个选中选择器的作用对象是单选/复选框，而第二个选中选择器的作用对象是下拉框，同时对于第二种选择器，它的作用内容是下拉框中的包含在<option></option>内的选项，因此在使用时应当使用“>”来具体说明，具体可以看下面的实例：

强大的JQuery选择器！

JQuery这个JS框架有多强大想必大家也是深有体会，在平常的工作当中我们用到的可能只有三分之一，但基本也是已经够用的了。现在我们来温习一下JQuery万能的选择器~~

在JavaScript中，我们可以使用

1、根据id获取DOM对象:

document.getElementById(\”id\”)

2、根据name属性获取一个DOM数组：

document.getElementsByName(\”name\”)

3、根据tag获取一个DOM数组：

document.getElementsByTagName(\”tag\”)

在JQuery中，我们则可以使用简单的：

$(\”#id\”)、$(\”.class\”)、$(\”tag\”)

来根据元素的ID、类名和html标签名进行DOM操作。

JQuery强大的选择器有以下这些：

1、匹配找到的第一个元素：$(\”div:first\”)

2、匹配找到的最后一个元素：$(\”div:last\”)

3、匹配一个给定索引值的元素,索引从0开始：$(\”div:eq(1)\”)

4、查找第1个以后的元素：$(\”div:gt(0)\”)

5、查找第一、二、三行的元素：$(\”div:lt(3)\”)

6、匹配所有索引值为奇数的元素，从 0 开始计数：$(\”div:odd\”)

7、找带有段落字样的p元素：$(\”p:contains(\’段落\’)\”)

8、匹配所有不包含子元素或者文本的空元素：$(\”div:empty\”)

9、匹配含有选择器所匹配的元素的元素：$(\”div:has(\’p\’)\”)

10、匹配含有子元素或者文本的元素：$(\”div:parent\”)

11、在每个div中查找第一个p：$(\”div p:first-child\”)

12、在每个div中查找最后一个p：$(\”div p:last-child\”)

13、在每个div中查找第二个p：$(\”div p:nth-child(2)\”)

14、匹配所有的不可见元素：$(\”div:hidden\”)

15、匹配所有的可见元素：$(\”div:visible\”)

当然，强大的JQuery当然不止有这些选择器，还有很多更高级的，有需要的朋友可以看一下JQuery的API文档，上面有更多更详细的说明。

jQuery 选择器

本节我们来学习 jQuery 中的选择器，选择器是 jQuery 库中最重要的部分之一。

jQuery 选择器允许我们选取和操作 HTML 元素，它用于根据 HTML 元素的名称、ID、类、类型、属性和属性值等来查找 HTML 元素。除了基于现有的 CSS 选择器，它还有一些自己自定义的选择器。

要注意 jQuery 中的所有选择器都以美元符号和圆括号开头，例如 $()。

jQuery 元素选择器是根据元素名称匹配相对应的元素。也就是说它是根据元素的标签名来选择的，指向的是 DOM 元素的标签名。

例如有下面一段 HTML 代码：

如果我们要在这个页面中写入 jQuery 代码，首先需要引入 jQuery 文件，格式如下所示：

这表示我们引入的 jquery-3.5.1.min.js 和 index.html 文件位于同一目录下。

接着我们要在一个新的 <script> 标签中编写 jQuery 代码，注意一定要另外写一个 <script> ，不能写在 引入文件的 <script> 标签中哟。

例如要实现点击页面中的按钮，隐藏所有 <li> 标签的效果：

上述代码中，最开始是一个 jQuery 的加载函数 $(function(){})，这个我们前面一节讲到过。然后在 button 标签选择器上绑定了一个 click() 点击事件，表示当点击元素时，会触发这个点击事件。然后会运行点击事件中的函数，这函数中的 $(\”li\”).hide() 表示选取页面所有的 <li> 标签然后进行隐藏，hide() 就是一个隐藏元素方法。

在浏览器中的演示效果：[图片上传失败…(image-d73-1629555686452)]

jQuery 类选择器可以通过指定的 class 来查找元素。语法和标签选择器有一点区别，就是需要在类选择器名称前面加上一个点号.。

例如下面这段代码，其实和上述元素选择器中的示例效果差不多，不同的是这表示对页面中所有 class=\”course\” 的元素进行隐藏：

虽然在本节教程中这两个示例的在浏览器中的演示效果是一样的，但是还有有很大的区别，对于前一个示例来说，只要是标签为 <li> 的元素都会进行隐藏，而对于此示例来说，只有设置了 class=\”course\” 的元素才会进行隐藏。

jQuery 中的 ID 选择器通过 HTML 元素的 id 属性来查找指定的元素。一个 ID 在一个页面中应该是唯一的，所以当我们想要选取唯一的元素时，应该使用 ID 选择器。

例如获取页面中 id 为 xkd 的元素文本内容，并通过 alert() 方法显示在浏览器中：

我们在使用 ID 选择器时，需要在选择器前面加上一个井号 #。text() 方法可以用于返回所选元素的文本内容。

在浏览器中的演示效果：

image

除了标签选择器、类选择器、ID选择器，JQuery 中还有一些自定义的选择器，如下所示：

链接：https://www.9xkd.com/

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com