jQuery选择器

1.1 基本选择器

1、元素名(标签名)选择器：根据元素的名称选中指定名称的元素

格式：$("元素名称")

2、类选择器：根据元素的class属性,匹配所有class值相同的元素

格式：$(".class值")

3.ID选择器：根据元素的id属性值,匹配具有特定id的元素

格式：$("#id值")

4.多元素选择器：匹配多个选择器选中的元素

格式：$("选择器1,选择器2,…选择器n")

1.2 层级选择器

1、后代选择器

格式：$("祖先元素后代元素")

2.子元素选择器

格式：$("祖先元素>子元素")

3.相邻兄弟选择器

格式：$("大哥+小弟")

4.$(“#two~div”)：匹配id为two元素后面所有的兄弟div元素

相关方法介绍：

（1）siblings()方法：返回所匹配元素的所有兄弟元素

（2）next()方法，示例：

$(“#d1”).next(“span”) – 匹配id为d1元素后面紧邻的span兄弟元素

（3）nextAll()方法，示例：

$(“#d1”).nextAll(“span”) – 匹配id为d1元素后面所有的span兄弟元素

（4）prev()方法，示例：

$(“#d1”).prev(“span”) – 匹配id为d1元素前面紧邻的span兄弟元素

（5）prevAll()方法，示例：

$(“#d1”).prevAll(“span”) – 匹配id为d1元素前面所有的span兄弟元素

1.2.1 基本过滤选择器

1. :first

$(“div:first”) – 匹配所有div中的第一个div元素

2. :last

$(“div:last”) – 匹配所有div中的最后一个div元素

3. :not

$(“div:not(.one)”) – 匹配所有div中class值不为one的div元素

4. :eq

$(“div:eq(3)”) – 匹配所有div中的索引值为3的div元素

5. :lt

$(“div:lt(3)”) – 匹配所有div中的索引值小于3的div元素

6. :gt

$(“div:gt(3)”) – 匹配所有div中的索引值大于3的div元素

7. :even(偶数)

$(“div:even”) – 匹配所有div中的索引值为偶数的div元素

8. :odd

$(“div:odd”) – 匹配所有div中的索引值为奇数的div元素

1.3 内容选择器

1. contains

$(“div:contains(‘xxx’)”) – 匹配所有div中包含xxx文本的div元素

2. empty

$(“div:empty”) – 匹配所有div中内容为空的div元素

3. has

$(“div:has(span)”) – 匹配所有div中包含span子元素的div元素

4. parent

$(“div:parent”) – 匹配所有div中内容不为空的div元素

1.4 可见选择器

1.hidden

$(“div:hidden”) – 匹配所有隐藏的div元素

2.visible

$(“div:visible”) – 匹配所有可见的div元素

1.5 属性选择器

1.$(“div[id]”) – 匹配所有具有id属性的div元素

2.$(“div[id=’d1’]”) – 匹配具有id属性并且值为d1的div元素

3.$(“div[id!=’d1’]”) – 匹配具有id属性并且值不等于d1的div元素

4.$(“div[id^=’d1’]”) – 匹配具有id属性并且值是以d1开头的div元素

5.$(“div[id$=’d1’]”) – 匹配具有id属性并且值是以d1结尾的div元素

1.6 子元素选择器

1.$(“div span:first-child”) – 匹配div内部的第一个span元素

2.$(“div>span:first-child”) – 匹配div内部的第一个span子元素

3.$(“div span:nth-child(n)”) – 匹配div内部的第n个span元素

4.$(“div>span:nth-child(n)”) – 匹配div内部的第n个span子元素

1.7 子元素选择器

1.$(“div span:first-child”) – 匹配div内部的第一个span元素

2.$(“div>span:first-child”) – 匹配div内部的第一个span子元素

3.$(“div span:nth-child(n)”) – 匹配div内部的第n个span元素

4.$(“div>span:nth-child(n)”) – 匹配div内部的第n个span子元素

1.8 表单选择器

1. :input

$(“:input”) – 匹配所有的表单项元素(包括input,select,textarea等)

2. :text

$(“:text”) – 匹配所有的单行文本输入框元素

3. :password

$(“:password”) – 匹配所有的密码输入框

4. :radio

$(“:radio”) – 匹配所有的单选框

5. :checkbox

$(“:checkbox”) – 匹配所有的复选框

6. :checked

$(“:checked”) – 匹配所有被选中的单选框,复选框,option选项

7. :selected
   $(":selected")- 匹配所有被选中的option选项
8. input[type='checkbox']:checked
   $("input[type='checkbox']:checked") -- 匹配所有的被选中的复选框