jQuery选择器

1、选择器分类

jQuery选择器是用于准确选取特定的元素的，常用的选择器有ID选择器、标签选择器、类选择器等，此外常用的还有层级选择器、组合条件选择器、索引选择器等。

2、选择器的应用

• 基本选择器

//  id选择器
$("#three").css("backgroundColor", "red");
//  类选择器
$(".green").css("backgroundColor", "green");
//  标签选择器
$("li").css("color", "pink");
//  并集选择器，只要符合其中的一个条件即可
$("div,p,li").css("size", "12");
//  交集选择器
$("ul.green").css("color", "green");

// 选取所有带有 href 属性的元素
$("[href]") 
// 选取所有带有 href 值等于 "#" 的元素
$("[href='#']")
// 选取所有带有 href 值不等于 "#" 的元素
$("[href!='#']")
// 选取所有 href 值以 ".jpg" 结尾的元素
$("[href$='.jpg']") 

• 过滤选择器

//  过滤，下标为偶数的行
$("li:even").css("backgroundColor", "pink");
//  过滤，下标为奇数的行
$("li:odd").css("backgroundColor", "cyan");

//  选择第一个
$("li:first").css("color", "green");
//  选择最后一个
$("li:last").css("color", "green");
//  选择第几个,选择下标为3的行
$("li:eq(3)").css("fontSize", "32px");
//  选择下标小于2的行
$("li:lt(2)").css("color", "red");
//  选择下标大于5的行
$("li:gt(5)").css("color", "yellow");
// 所有不为空的 input 元素
$("input:not(:empty)")

//	所有被选取的 input 元素
$("input:selected")
//	所有被选中的 input 元素
$("input:checked")

• 子类选择器和后代选择器

//  $(s1,s2)  //    并集选择器
$("div,p").css("color","red");

//  $(s1 s2)  //    后代选择器，子元素中的子元素，即孙子元素
$("div p").css("backgroundColor", "yellow");

//  $(s1>s2)  //    子代选择器，所有的直接子元素
$("div>div>p").css("color", "green");

//  $(s1s2)   //    交集选择器
$("p.one").css("backgroundColor", "pink");

• 层级选择器

//	获取当前元素的相邻元素：$("div+span")
$("div+span").css("backgroundColor","red");
//	获取当前元素之后的所有元素：$("div~span")
$("div~span").css("backgroundColor","red");