JQuery中常用的选择器

JQuery是一种快速、简洁的Javascript库,它简化了HTML文档遍历、事件处理、动画效果和Ajax交互的操作。选择器是JQuery的重要组成部分,它允许开发者以一种简单的方式来选择HTML元素,并对其进行操作。

下面是JQuery中常用的选择器及其使用方法的详细介绍:

1. 元素选择器:以元素的标签名作为选择器,选取所有匹配的元素。

```javascript

$("p") //选取所有的

元素

```

2. ID选择器:以元素的id属性作为选择器,选取id属性与指定值匹配的元素。

```javascript

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

```

3. 类选择器:以元素的class属性作为选择器,选取class属性与指定值匹配的元素。

```javascript

$(".myClass") //选取class为"myClass"的元素

```

4. 属性选择器:以元素的属性作为选择器,选取具有指定属性的元素。

```javascript

$("[name='myName']") //选取具有name属性且值为"myName"的元素

```

5. 子选择器:选取指定元素的直接子元素。

```javascript

$("div > p") //选取所有直接子元素为

元素

```

6. 后代选择器:选取指定元素的后代元素。

```javascript

$("div p") //选取所有后代元素为

元素

```

7. 相邻兄弟选择器:选取指定元素的下一个兄弟元素。

```javascript

$("h1 + p") //选取所有紧接在

元素后的

元素

```

8. 全部兄弟选择器:选取指定元素的所有兄弟元素。

```javascript

$("h1 ~ p") //选取所有和

元素具有相同父元素的

元素

```

9. 过滤选择器:根据指定的条件对元素进行过滤。

```javascript

$("div:first") //选取第一个

元素

$("div:last") //选取最后一个

元素

$("div:even") //选取所有偶数位置的

元素

$("div:odd") //选取所有奇数位置的

元素

$("div:eq(3)") //选取索引为3的

元素

$("div:not(.myClass)") //选取不具有class为"myClass"的

元素

```

10. 表单选择器:选取表单元素。

```javascript

$(":input") //选取所有

立即
投稿
发表
评论
返回
顶部