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");