jQuery选择器有五种类型,包括层次选择器、基本过滤器选择器、内容过滤器选择器、可见性过滤器选择器和属性过滤器选择器。

1. 层次选择器:用于通过DOM元素之间的层次关系获取特定元素,如后代元素、子元素、相邻元素和兄弟元素等。只有返回JQuery对象的方法才能进行链式操作。

2. 基本选择器:是JQuery最常用的选择器,也是最简单的选择器。它通过元素id、class和标签名来查找DOM元素。在网页中,id只能使用一次,而class允许重复使用。这意味着一个网页中的id是不可以重复的,具有少数性。

3. 过滤选择器:通过特定的过滤规则筛选出所需的DOM元素。按照不同的过滤规则,过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。

4. 基础过滤选择器:

- :first:匹配名列前茅个元素。

- :last:匹配最后一个元素,与:first相对应。

- :not(selector):去除所有与给定选择器匹配的元素,类似于“非”,表示没有被选中的input(当input的type="checkbox")。

- :even:匹配所有索引值为偶数的元素,从0开始计数。例如要选择table中的行,因为是从0开始计数,所以table中的第一个tr就为偶数0。

- :odd:匹配所有索引值为奇数的元素,与:even对应,从0开始计数。

- :eq(index):匹配指定索引值的元素。

示例代码:

```javascript

// 使用层次选择器获取后代元素

var children = $("#parent").children();

// 使用基本选择器获取具有特定id的元素

var elementById = $("#elementId");

// 使用过滤选择器获取未选中的input元素

var notCheckedInputs = $("input:not(:checked)");

```

内容过滤选择器

内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上。

1、:contains(text)

用法: $(“div:contains(‘John’)”) 返回值 集合元素

说明: 匹配包含给定文本的元素.这个选择器比较有用,当我们要选择的不是DOM标签元素时,它就派上

了用场了,它的作用是查找被标签”围”起来的文本内容是否符合指定的内容的。

2、:empty

用法: $(“td:empty”) 返回值 集合元素

说明: 匹配所有不包含子元素或者文本的空元素。

3、:has(selector)

用法: $(“div:has(‘.mini’)”)返回值 集合元素

说明: 匹配含有选择器所匹配的元素的元素。

4、:parent

用法: $(“td:parent”) 返回值 集合元素

可见度过滤选择器

可见度过滤选择器是根据元素的可见和不可见状态来选择相应的元素。

1、:hidden

用法: $(”tr:hidden”) 返回值 集合元素

说明: 匹配所有的不可见元素,input 元素的 type 属性为 “hidden” 的话也会被匹配到。意思是css中display:none和input type=”hidden”的都会被匹配到。同样,要在脑海中彻底分清楚冒号”:”,点号”.”和逗号”,”的区别。

2、:visible

用法: $(“tr:visible”) 返回值 集合元素

属性过滤选择器是一种通过元素的属性来获取相应元素的选择器。它有以下几种过滤规则:

1. [attribute]:匹配包含给定属性的元素。例如,选取所有带有"id"属性的div标签。

用法:`$("div[id]")`

返回值:集合元素

2. [attribute=value]:匹配给定的属性是某个特定值的元素。例如,选取所有name属性为newsletter的input元素。

用法:`$("input[name=’newsletter’]").attr("checked", true)`

返回值:集合元素

3. [attribute!=value]:匹配所有不含有指定的属性,或者属性不等于特定值的元素。这与not选择器等价于:not([attr=value]),要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value])。

用法:`$("div[title!=’test’]").css("background", "yellow")`

返回值:集合元素

4. [attribute^=value]:匹配给定的属性是以某些值开始的元素。我们又见到了这几个类似于正则匹配的符号。

用法:`$("input[name^=‘news’]")`

返回值:集合元素

5. [attribute$=value]:匹配给定的属性是以某些值结尾的元素。

用法:`$("input[name$=’letter’]")`

返回值:集合元素

6. [attribute*=value]:匹配给定的属性是以包含某些值的元素。

用法:`$("input[name*=’man’]")`

返回值:集合元素

7. [attributeFilter1][attributeFilter2][attributeFilterN]:复合属性选择器,需要同时满足多个条件时使用。这是一个组合选择器,在实际使用中非常常见。

用法:`$("input[id][name$=’man’]")`

返回值:集合元素

在本文中,我们将介绍如何使用 jQuery 来选择符合特定条件的 HTML 元素。具体来说,我们将演示如何选择所有包含 "id" 属性且其 "name" 属性以 "man" 结尾的元素。

首先,我们需要引入 jQuery 库。可以通过以下方式将其添加到网页中:

```html

```

接下来,我们可以使用 jQuery 的选择器语法来选择符合条件的元素。在本例中,我们将使用以下选择器:

```javascript

$('[id^="man"]')

```

这个选择器表示:选择所有 id 以 "man" 开头的元素。其中,`^` 是一个特殊的字符,表示匹配字符串的开头。

最后,我们可以将选择器应用于页面上的任意元素,以获取所需元素的信息。例如,如果我们想要获取这些元素的文本内容,可以使用以下代码:

```javascript

$('[id^="man"]').text();

```

这将返回一个包含所有符合条件的元素文本内容的数组。

总之,通过使用 jQuery 的选择器语法和正则表达式,我们可以轻松地选择并处理 HTML 页面中的特定元素。希望本文对您有所帮助,如果您对我们的管理工具感兴趣,也请随时关注我们的后续更新。