JQuery的常用选择器
刚开始学JQuery写的如有错误欢迎批评指正
JQuery拥有的选择器可以让我们更快更方便找到想要的元素,然后对相应的元素进行操作
简单介绍一下一些常用的选择器:
1.基本选择器:
- 标签名选择器: $("div") 匹配所有的div
- id选择器: $("#id") 匹配id="id"的元素
- 类选择器: $(".class") 匹配所有class="class"的元素
- 分组选择器: $("#id,.class,div") 匹配id="id"的元素、所有class="class"的元素和所有的div
2.层级选择器:
- $("div span") 匹配div下所有的span子元素
- $("div>span") 匹配div下的span元素
- $("div+span") 匹配div后面相邻的span元素
- $("div~span") 匹配div后面所有的span元素
层级函数
- 获取某个元素的所有兄弟元素:$("#d1").siblings("div");参数可以不写,不写代表所有的兄弟元素
- 获取某个元素的哥哥元素:$("#d1").prev("div");参数不写是获取相邻的上一个元素,写的话指定上一个元素类型
- 获取某个元素的所有哥哥元素:$("#d1").prevAll("div");
- 获取某个元素的弟弟元素:$("#d1").next("div");参数不写是获取相邻的下一个元素,写的话指定上一个元素类型
- 获取某个元素的所有弟弟元素:$("#d1").nextAll("div");
3.过滤选择器:
- $("div:first") 匹配第一个div
- $("div:last") 匹配最后一个div
- $("div:even") 匹配所有索引值为偶数数div(第一个div的索引值为0)
- $("div:odd") 匹配所有索引值为奇数div
- $("div:eq(n)") 匹配索引值为n的div
- $("div:lt(n)") 匹配索引值小于n的div
- $("div:gt(n)") 匹配索引值大于n的div
- $("div:not(.one)") 匹配类名不为"one"的div
4.内容选择器:
- $("div:has(p)") 匹配包含p子元素的div元素
- $("div:empty") 匹配空元素div(既不包含文本也不包含子元素)
- $("div:parent") 匹配非空div元素
- $("div:contains('aa')") 匹配含有文本 'aa' 的 div 元素
5.属性选择器:
- $("div[id]") 匹配包含id属性的 div元素
- $("div[id='aa']") 匹配包含属性id='aa' 的div元素
- $("div[id!='aa']") 匹配id属性不等于aa的div元素
6.子元素选择器:
- $("div:first-child") 匹配div 第一个子元素
- $("div:last-child") 匹配div 最后一个子元素
- $("div:nth-child(n)") 匹配div 第n个子元素
7.表单选择器:
- $(":input") 匹配所有input
- $(":password") 匹配所有密码框
- $(":radio") 匹配所有单选
- $(":checkbox") 匹配所有多选框
- $(":check") 匹配所有单选,多选,下拉选
- $(":input:check") 匹配所有单选,多选
- $(":selected") 匹配所有下拉选
