05- jQuery 基本选择器&层次选择器

jQuery 基本选择器&层次选择器

作者：曾庆林

jQuery选择器的优势

• 写法简单
• 支持CSS1至CSS3选择器
• 完善的处理机制

CSS选择器回顾

选择器	语法
ID选择器	#ID{CSS规则}
类选择器	.className{CSS规则}
分组选择器	E1,E2,E3{CSS规则}
包含选择器	E F{CSS规则}
通配符选择器	*{CSS规则}

jQuery选择器的分类

1. 基本选择器
2. 层次选择器
3. 过滤选择器
   • 基本过滤选择器
   • 内容过滤选择器
   • 可见性过滤选择器
   • 属性过滤选择器
   • 子元素过滤选择器
   • 表单对象属性过滤选择器
4. 表单选择器

jQuery基本选择器

选择器 1	描述	返回	示例
#id	根据指定的id匹配元素	单个元素	$(“#hel”)选择id=hel的元素
.class	根据类匹配元素	集合元素	$(“.hel”)选择class=hel的元素
Element	根据元素名匹配元素	集合元素	$(“div”)选择所有的div元素
*	匹配所有元素	集合元素	$(“*”)选择所有元素
E1,E2,E3	分组匹配元素	集合元素	$(“div,span,.hotclass”)选择所有div，span,和class为hotcalss的元素

层次选中器

选择器	描述	返回值	示例
$("E1 E2")	选择E1下所有E2	集合元素	$"div span")选择div下所有span
$("E1> E2")	选择E1下的子E2,不包含E2下满足的元素	集合元素	$("div > span”)选择div下的span元素，不包含span下的span元素
$("E1+ E2")	选择E1后紧相邻的E2	集合元素	$(".one + div")选择class=one的下一个div元素
$("E1~ E2")	选择E1之后的所有E2	集合元素	$("#one ~ div")选择id为one后的所有div元素

补充说明：
$("E1 + E2")可以用$(E1).next(E2)代替
$("E1 ~ E2")可以用$(E1).nextAll(E2)代替