jQuery 选择器

jQuery 选择器

基本选择器

id选择器
语法：$("#元素的ID") 注意：返回是单个对象

类选择器
语法：$(".元素的class的名称") 注意：返回值是个集合

html选择器
语法：$("html的标签") 注意：返回值集合

* ：获取 所有 的元素
语法：$("*") 注意：返回值集合

层次选择器

空格(所有后代)
语法：$(“ancestor descendant”)
描述：选取 ancestor 元素里的所有 descendant （所有后代）元素
举例：

$("div span")选取<div>里的所有的<span>元素

>（后代元素，紧一代）
语法：$(“parent>child”)
描述：
选取 parent 元素下的 child （子）元素

与$(“ancestor descendant”)区别：
$(“ancestor descendant”)选择的是：所有后代元素
$(“parent>child”)选择的是：直属子元素，仅一代。

+
语法：$(“prev + next”)
描述：选取紧接在 prev 元素后的 next 元素
举例：

$(".one + div")选取 class 为 one 的下一个<div>同辈元素

~
语法：$(“prev ~ siblings”)
描述：选取 prev 元素之后的所有 siblings 元素
举例：

$("#two ~ div")选取id为 two 的元素后面的所有 <div> 同辈元素

过滤选择器

基本过滤选择器

:first ：选取第1个元素
例如：

$("p:first").css();	-->选中第一个p元素

:last ：选取最后一个元素
例如：

$("p:last").css();	-->选中最后一个p元素

:even ：选取索引是偶数的所有元素，索引从0开始
:odd ：选择索引是奇数的所有元素，索引从0开始
例如：

$("tr:even").css();

注意：我们从1开始数，可以把两个反着用

:eq(index) ： 选取索引等于index的元素
:gt(index) ：选取索引大于index的元素
:lt(index) ：选取索引小于index的
例如：

$('p:eq(4)").css();	---->选取第5个p元素
	
	var num = 4;
	$("p:eq("+num+")").css();	--->变量要截断字符串再拼接

:not(selector) ：去除所有与给定选择器匹配的元素
例如：

$("p:not(#p3)").css();		--->选取id名称不是p3的元素(p元素中排除掉id叫p3的)

内容过滤选择器

:contains(text) 选择含 有文内内容为”text”的元素
例如：

$("div:contains(今天)").css();		-->选中div内容中包含“今天”的元素

:empty 选择含不包含子元素或者文本的元素
例如：

$("div:empty").css();		-->选中div中没有内容的元素(包含没有子元素和没有文本元素) 	注意：空格也算内容(文本元素)

:parent 选择含有子元素或者文本的元素

:has(selector) 选择含有选择器匹配元素的元素
例如：

$("div:has(p)").css();		-->选取div元素中包含p元素的div元素

可见性过滤选择器

:hidden ：选取所有不可见的元素
:visible ：选取所有可见的元素

属性过滤选择器

[attribute]：包含指定属性的
例如：

$("p[title]").css();		-->选中有title属性的p元素

[attribute=value]：选取属性值为value的元素
[attribute!=value]：选取属性值不为value的元素
例如：

$("p[id=p1]").css();		-->选中id为p1的p元素

[attribute^=value]：选取属性值以value开头的元素
[attribute$=value]：选取属性值以value结尾的元素
[attribute*=value]：选取属性值包含value的元素
例如：

$("div[title*='张三']").css();		-->选中div中title属性包含张三的元素

注意：
以上几种可复合使用

例如：

$("div[id][title^='test']").css();

子元素过滤选择器

父元素 :first-child：选取第一个子元素
例如：

$("ul :fist-child").css();	

父元素 ：last-child：选取最后一个子元素

父元素 :nth-child()：选取指定的元素

例如：

$("ul :nth-child(2)").css();		选中ul下的第2个子元素
$("ul :nth-child(even)").css();		选取ul下的偶数下标子元素
$("ul :nth-child(odd)").css();		奇数下标子元素

注意：从1开始数

表单选择器

单选框的获取：

var 变量名 = $(":radio:checked").val();

多选框的获取：

var 变量名 ＝ '';
	$(":checkbox:checked").each(function(item){
		变量名 += $(this).val();
	});