jQuery选择器

jQuery选择器

1.基本选择器

元素名选择器、类选择器、id选择器、多元素选择器、*选择器

1.元素名选择器

• $("div") — 匹配所有的div元素

class选择器

• $(".c1") – 匹配所有class值为c1 的元素
• $("div.c1") – 匹配所有class值为c1的div元素

2.id选择器

• $("#d1") – 匹配所有id值为d1的元素
• $("div#d1") – 匹配所有id值为d1的div元素

*号匹配符

• $("*") – 匹配所有的元素

3.多元素选择器

• $("div,span,#d1,.c1") – 匹配所有的div/span元素以及id值为d1的元素和class值为c1的元素。。。

2.层级选择器

如果想通过DOM元素之间的层次关系来获取特定元素。例如子元素、兄弟元素等。则需要通过层次选择器。

• $("div span") – 匹配div下所有的span元素
• $("div>span") – 匹配div下所有的span子元素
• $("div+span") – 匹配div后面紧邻的span兄弟元素
• $("div~span") – 匹配div后面所有的span兄弟元素

3.基本过滤选择器（selector案例三）

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素, 该选择器都以 “:” 开头

• $("div:first") – 匹配所有div中的第一个div元素
• $("div:last") – 匹配所有div中的最后一个div元素
• $("div:even") – 匹配所有div中索引值为偶数的div元素，0开始
• $("div:odd") –匹配所有div中索引值为奇数的div元素，0开始
• $("div:eq(n)") – 匹配所有div中索引值为n的div元素，0开始
• $("div:lt(n)") – 匹配所有div中索引值小于n的div元素，0开始
• $("div:gt(n)") –匹配所有div中索引值大于n的div元素，0开始
• $("div:not(.one)") – 匹配所有class值不为one的div元素

4.内容选择器（selector案例四）

• $("div:contains('abc')") – 匹配所有div中包含abc内容的div元素
  如: <div>xxxabcxx</div>
• $("div:has(p)") – 匹配所有包含p元素的div元素
  如: <div><p></p></div>
• $("div:empty") – 匹配所有内容为空的div元素
  如: <div></div>
• $("div:parent") – 匹配所有内容不为空的div元素
  如: <div>xxxxx</div>

5.可见选择器

• $("div:hidden") – 匹配所有隐藏的div元素
• $("div:visible") – 匹配所有可见的div元素

6.属性选择器（selector案例五）

• $("div[id]") – 匹配所有具有id属性的div元素
• $("div[id='d1']") –匹配所有具有id属性并且值为d1的div元素
• $("div[id!='d1']") – 匹配所有id属性值不为d1的div元素
• $("div[id^='d1']") – 匹配所有id属性值以d1开头的div元素
• $("div[id$='d1']") –匹配所有id属性值以d1结尾的div元素

7.子元素选择器

• $("div:nth-child(n)") – n从1开始, 匹配div中第n个子元素。
• $("div:first-child") –匹配div中第1个子元素。
• $("div:last-child") –匹配div中最后一个子元素。。。

8.表单选择器（selector案例六）

• $(":input") – 匹配所有的input文本框、密码框、单选框、复选框、select框、textarea、button。
• $(":password") – 匹配所有的密码框
• $(":radio") – 匹配所有的单选框
• $(":checkbox") – 匹配所有的复选框
• $(":checked") – 匹配所有的被选中的单选框/复选框/option
• $("input:checked") – 匹配所有的被选中的单选框/复选框
• $(":selected") – 匹配所有被选中的option选项