JQ，mdash，mdash，选择器

JQuery是一款非常流行的JavaScript库，其主要的作用就是通过简单易用的API来改变HTML、CSS以及处理事件等。而选择器是JQuery中最基础的一部分，也是最为常用的部分，因为用户通过选择器来选中需要操作的元素。

### 基本语法

JQuery的选择器主要是模仿CSS选择器的语法来编写的，因此熟悉CSS选择器语法的开发者应该很容易上手JQuery选择器。JQuery选择器的语法如下所示：

```javascript

$("*") // 选中当前页面所有元素

$("#id") // 选中id为id的元素

$(".class") // 选中所有class为class的元素

$("tag") // 选中所有tag标签的元素

$("selector1, selector2, selectorN") // 同时选择多个元素

```

上述语法中，$()函数是JQuery的核心，表示获取元素的函数，后面的括号中则是选择器。 其中 `*` 表示所有元素，`#id` 表示选择id为id的元素，`.class` 表示选择所有class为class的元素，`tag` 表示选择标签为tag的元素。

下面将详细介绍JQuery选择器的使用方法。

### ID选择器

以 #符号开头的选择器是ID选择器。使用ID选择器可以选中页面中某个唯一的元素。在HTML中，每个元素都可以有一个唯一的id属性，这个id属性可以给JQuery使用。

下面是一个HTML代码：

```html

```

使用JQuery选择器选中该元素的代码如下：

```javascript

$("#content")

```

### 类选择器

以 .符号开头的选择器是类选择器。通过类选择器可以选中一个页面中的一类元素，这些元素都有相同的class属性。

下面是一个HTML代码：

```html

• 列表项1
• 列表项2
• 列表项3

```

使用JQuery选择器选中该元素的代码如下：

```javascript

$(".item")

```

### 标签选择器

使用标签选择器可以选中HTML中所有指定的标签，例如p、a、img等等。这些标签是页面中最常用的元素。

下面是一个HTML代码：

```html

段落1

段落2

段落3

```

使用JQuery选择器选中该元素的代码如下：

```javascript

$("p")

```

### 属性选择器

使用属性选择器可以按照元素的属性来选择。

下面是一个HTML代码：

```html

```

使用JQuery选择器选中该元素的代码如下：

```javascript

$("[type='text']") // 选中type属性等于text的元素

$("[id='username']") // 选中id属性等于username的元素

```

### 后代选择器

后代选择器是指一个元素的后代元素，可以使用空格来表示。举个例子，如果希望选中id为content下面的所有div元素，可以使用如下选择器：

```javascript

$("#content div")

```

### 相邻选择器

相邻选择器可以选中相邻的两个元素，例如选中一个list中的每一项的下面的兄弟元素：

```html

• 列表项1
div1
• 列表项2
div2
• 列表项3
div3

```

使用JQuery选择器选中该元素的代码如下：

```javascript

$(".list li + div")

```

### 兄弟选择器

兄弟选择器可以选中某个元素的某个兄弟元素，它们具有相同的父元素。举个例子，假设想要选中某个元素后面的所有兄弟元素，可以使用如下选择器：

```javascript

$("#element ~ sibling")

```

### 过滤选择器

过滤选择器可以用来对选中的元素进行筛选，根据不同的条件来过滤元素。下面是一些常用的过滤选择器：

#### :first

选中元素集合的第一个元素：

```javascript

$("li:first")

```

#### :last

选中元素集合的最后一个元素：

```javascript

$("li:last")

```

#### :even

从0开始，选中偶数项元素：

```javascript

$("li:even")

```

#### :odd

从0开始，选中奇数项元素：

```javascript

$("li:odd")

```

#### :eq

选中匹配到的第n项元素：

```javascript

$("li:eq(n)")

```

#### :gt

选中匹配到的第n项后所有的元素：

```javascript

$("li:gt(n)")

```

#### :lt

选中匹配到的第n项前所有的元素：

```javascript

$("li:lt(n)")

```

#### :not

选中不包含某个元素的所有元素：

```javascript

$("li:not(.item-1)")

```

#### :contains

选中包含某个文本的所有元素：

```javascript

$("li:contains(Item)")

```

### 案例说明

#### 案例1：选中表单中所有的input元素

```javascript

$("input")

```

#### 案例2：选中页面中第一个p元素

```javascript

$("p:first")

```

#### 案例3：选中class为box且为图片的元素

```javascript

$(".box:has(img)")

```

#### 案例4：选中id为content下面的所有div元素

```javascript

$("#content div")

```

#### 案例5：选中class为item的第4到6项元素

```javascript

$(".item:eq(3), .item:eq(4), .item:eq(5)")

```

#### 案例6：选中所有表格中的偶数行

```javascript

$("td:even")

```

#### 案例7：选中class为nav_link的元素中包含Home的元素

```javascript

$(".nav_link:contains('Home')")

```

#### 案例8：选中所有包含特定属性的元素

```javascript

$("[data-id]")

```

#### 案例9：选中所有图片

```javascript

$("img")

```

#### 案例10：选中id为loginBtn的按钮元素

```javascript

$("#loginBtn")

```

### 总结

通过JQuery选择器，我们可以非常方便地对页面元素进行选择和操作，使得前端开发效率大幅度提高。如果想要更深入地了解JQuery选择器的使用，还可以在JQuery文档中查阅。在真实项目中，我们会用到大量的选择器来操作元素，因此熟练地掌握JQuery选择器是前端开发必备的技能之一。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/