JQuery的常用选择器 转

JQuery的常用选择器

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

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

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

1.基本选择器:

1. 标签名选择器: $("div") 匹配所有的div
2. id选择器: $("#id") 匹配的元素
3. 类选择器: $(".class") 匹配所有class="class"的元素
4. 分组选择器: $("#id,.class,div") 匹配的元素和所有的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[]") 匹配包含属性 的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") 匹配的元素
3. 类选择器: $(".class") 匹配所有class="class"的元素
4. 分组选择器: $("#id,.class,div") 匹配的元素和所有的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[]") 匹配包含属性 的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") 匹配所有下拉选