jquery选择器概念、jquery中选择器分为哪三种 收藏 0

jquery选择器

jQuery选择器共有四大类，分别为基本选择器，层次选择器，过滤选择器和表单选择器。

基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标签名来查找 DOM 元素。

适合于通过DOM元素之间的层次关系来获取特定元素，例如后代元素，子元素，相邻元素和兄弟元素。

注意：$(“prev~siblings”)选择器与siblings()方法的区别。

$(“#prev~div”)选择的是”#prev”元素后面的所有的同辈的div元素。而siblings()方法与 前后位置无关，只要是同辈节点就都能匹配。

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都以一个冒号(:)开头。按照不同的过滤规则，过滤选择器可以分为基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤，表单过滤和表单对象属性过滤选择器共七种选择器。

主要对所选择的元素中所包含的子元素或内容进行过滤。

主要对元素的可见性（可见或不可见）进行过滤。

可见选择器:hidden，可以对样式的display的值为none的元素进行过滤选择；以外；还可以对表单的隐藏元素（即类型为hidden的表单项）或visible:hidden的元素进行过滤选择。

主要对元素的属性进行过滤选择符合属性特征符合的元素。

主要选择元素中所含有的子元素。

:nth-child 过滤选择器：

:nth-child(even) 选取父元素下索引号为偶数的子元素

:nth-child(odd) 选取父元素下索引号为奇数的子元素

:nth-child(5n) 选取父元素下索引号为5n的子元素

:nth-child(5n+1) 选取父元素下索引号为5n+1的子元素

主要对表单元素进行过滤选择。

主要对所选择的表单元素进行过滤。

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