JQuery的常用选择器 转 JQuery的常用选择器

JQuery的常用选择器

 刚开始学JQuery写的如有错误欢迎批评指正

JQuery拥有的选择器可以让我们更快更方便找到想要的元素,然后对相应的元素进行操作

简单介绍一下一些常用的选择器:

1.基本选择器:

1. 标签名选择器: $("div")  匹配所有的div
2. id选择器: $("#id")  匹配id="id"的元素
3. 类选择器: $(".class")  匹配所有class="class"的元素
4. 分组选择器: $("#id,.class,div") 匹配id="id"的元素、所有class="class"的元素和所有的div

2.层级选择器:

1. $("div span")  匹配div下所有的span子元素
2. $("div>span")  匹配div下的span元素
3. $("div+span")  匹配div后面相邻的span元素
4. $("div~span")  匹配div后面所有的span元素

层级函数

1. 获取某个元素的所有兄弟元素:$("#d1").siblings("div");参数可以不写,不写代表所有的兄弟元素
2. 获取某个元素的哥哥元素:$("#d1").prev("div");参数不写是获取相邻的上一个元素,写的话指定上一个元素类型
3. 获取某个元素的所有哥哥元素:$("#d1").prevAll("div");
4. 获取某个元素的弟弟元素:$("#d1").next("div");参数不写是获取相邻的下一个元素,写的话指定上一个元素类型
5. 获取某个元素的所有弟弟元素:$("#d1").nextAll("div");

3.过滤选择器:

1. $("div:first")  匹配第一个div
2. $("div:last")  匹配最后一个div
3. $("div:even")  匹配所有索引值为偶数数div(第一个div的索引值为0)
4. $("div:odd")  匹配所有索引值为奇数div
5. $("div:eq(n)")  匹配索引值为n的div
6. $("div:lt(n)")  匹配索引值小于n的div
7. $("div:gt(n)")  匹配索引值大于n的div
8. $("div:not(.one)")  匹配类名不为"one"的div

4.内容选择器:

1. $("div:has(p)")  匹配包含p子元素的div元素
2. $("div:empty")  匹配空元素div(既不包含文本也不包含子元素)
3. $("div:parent")  匹配非空div元素
4. $("div:contains('aa')")  匹配含有文本 'aa' 的 div 元素

5.属性选择器:

1. $("div[id]") 匹配包含id属性的 div元素
2. $("div[id='aa']")  匹配包含属性id='aa' 的div元素
3. $("div[id!='aa']")  匹配id属性不等于aa的div元素

6.子元素选择器:

1. $("div:first-child")  匹配div 第一个子元素
2. $("div:last-child")  匹配div 最后一个子元素
3. $("div:nth-child(n)")  匹配div 第n个子元素

7.表单选择器:

1. $(":input") 匹配所有input
2. $(":password")  匹配所有密码框
3. $(":radio")  匹配所有单选
4. $(":checkbox")  匹配所有多选框
5. $(":check")  匹配所有单选,多选,下拉选
6. $(":input:check")  匹配所有单选,多选
7. $(":selected")  匹配所有下拉选

 刚开始学JQuery写的如有错误欢迎批评指正

JQuery拥有的选择器可以让我们更快更方便找到想要的元素,然后对相应的元素进行操作

简单介绍一下一些常用的选择器:

1.基本选择器:

1. 标签名选择器: $("div")  匹配所有的div
2. id选择器: $("#id")  匹配id="id"的元素
3. 类选择器: $(".class")  匹配所有class="class"的元素
4. 分组选择器: $("#id,.class,div") 匹配id="id"的元素、所有class="class"的元素和所有的div

2.层级选择器:

1. $("div span")  匹配div下所有的span子元素
2. $("div>span")  匹配div下的span元素
3. $("div+span")  匹配div后面相邻的span元素
4. $("div~span")  匹配div后面所有的span元素

层级函数

1. 获取某个元素的所有兄弟元素:$("#d1").siblings("div");参数可以不写,不写代表所有的兄弟元素
2. 获取某个元素的哥哥元素:$("#d1").prev("div");参数不写是获取相邻的上一个元素,写的话指定上一个元素类型
3. 获取某个元素的所有哥哥元素:$("#d1").prevAll("div");
4. 获取某个元素的弟弟元素:$("#d1").next("div");参数不写是获取相邻的下一个元素,写的话指定上一个元素类型
5. 获取某个元素的所有弟弟元素:$("#d1").nextAll("div");

3.过滤选择器:

1. $("div:first")  匹配第一个div
2. $("div:last")  匹配最后一个div
3. $("div:even")  匹配所有索引值为偶数数div(第一个div的索引值为0)
4. $("div:odd")  匹配所有索引值为奇数div
5. $("div:eq(n)")  匹配索引值为n的div
6. $("div:lt(n)")  匹配索引值小于n的div
7. $("div:gt(n)")  匹配索引值大于n的div
8. $("div:not(.one)")  匹配类名不为"one"的div

4.内容选择器:

1. $("div:has(p)")  匹配包含p子元素的div元素
2. $("div:empty")  匹配空元素div(既不包含文本也不包含子元素)
3. $("div:parent")  匹配非空div元素
4. $("div:contains('aa')")  匹配含有文本 'aa' 的 div 元素

5.属性选择器:

1. $("div[id]") 匹配包含id属性的 div元素
2. $("div[id='aa']")  匹配包含属性id='aa' 的div元素
3. $("div[id!='aa']")  匹配id属性不等于aa的div元素

6.子元素选择器:

1. $("div:first-child")  匹配div 第一个子元素
2. $("div:last-child")  匹配div 最后一个子元素
3. $("div:nth-child(n)")  匹配div 第n个子元素

7.表单选择器:

1. $(":input") 匹配所有input
2. $(":password")  匹配所有密码框
3. $(":radio")  匹配所有单选
4. $(":checkbox")  匹配所有多选框
5. $(":check")  匹配所有单选,多选,下拉选
6. $(":input:check")  匹配所有单选,多选
7. $(":selected")  匹配所有下拉选