总结jQuery的选择器

jQuery的选择器有：
1、基本选择器
2、层级选择器
3、基本过滤选择器
4、属性选择器
5、筛选选择器

1、基本选择器

符号	说明	用法
$(’#demo’)	选择id为demo的第一个元素	$(’#demo’).css(‘background’,‘red’)
$(’.liItem’)	选择所有类名（样式名）为liItem的元素	$(’.liItem’).css(‘background’,‘red’)
$(‘div’)	选择所有标签为div的元素	$(‘div’).css(‘background’,‘red’)
$(’*’)	选择所有元素（少用或配合其他选择器来使用）	$(’*).css(‘background’,‘red’)
$(’.liItem,div’)	选择多个指定的元素，这里是.liItem和div	$(’.liItem,div’).css(‘background’,‘red’)

重点：id选择器、类选择器、标签选择器

2、层级选择器

符号	说明	用法
空格	后代选择器，选择所有的后代	$(‘div span’).css(‘background’,‘red’)
>	子代选择器，选择所有的子代	$(‘div>span’).css(‘background’,‘red’)
+	紧邻选择器，选择紧挨着的下一个元素	$(‘div+p’).css(‘background’,‘red’)
~	兄弟选择器，选择后面的所有兄弟元素	$(‘div~p’).css(‘background’,‘red’)

层级选择器是选择后面那个元素，比如div>span，是选择>后的span元素

3、基本过滤选择器

符号	说明	用法
:eq(index)	index是从0开始的一个数字，选择序号为index的元素。选择第一个匹配的元素	$(‘li:eq(1)’).css(‘background’,‘red’)
:gt(index)	index是从0开始的一个数字，选择序号大于index的元素	$(‘li:gt(2)’).css(‘background’,‘red’)
:It(index)	index是从0开始的一个数字，选择序号小于index的元素	$(‘li:gt(2)’).css(‘background’,‘red’)
:odd	（奇数选择器） 选择所有序号为奇数行的元素	$(‘li:odd’).css(‘background’,‘red’)
:even	（偶数选择器） 选择所有序号为偶数行的元素	$(‘li:even’).css(‘background’,‘red’)
:first	选择匹配第一个元素	$(‘li:first’).css(‘background’,‘red’)
:last	选择匹配最后一个元素	$(‘li:last’).css(‘background’,‘red’)

4、属性选择器

符号	说明	用法
$(‘a[href]’)	选择所有包含href属性的元素	$('a[href]).css(‘background’,‘red’)
$(“a[href=‘itcast’]”)	选择href属性值为itcast的所有a标签	$(“a[href=‘itcast’]”.css(‘background’,‘red’)
$(“a[href!=‘baidu’]”)	选择href属性值不等baidu的所有a标签，保活没有href的元素	$(“a[href!=‘baidu’]”.css(‘background’,‘red’)
$(“a[href^=‘web’]”)	选择所有以web开头的元素	$(“a[href^=‘web’]”).css(‘background’,‘red’)
$(“a[href$=‘cn’]”)	选择所有以cn结尾的元素	$(“a[href$=‘cn’]”).css(‘background’,‘red’)
$(“a[href*=‘i’]”)	选择所有包含i这个字符的元素，可以是中英文	$(“a[href*=‘i’]”).css(‘background’,‘red’)
$(“a[href][title=‘我’]”)	选择所有符合指定属性规则的元素，都符合才会被选中	$(“a[href][title=‘我’]”).css(‘background’,‘red’)

4、筛选选择器(通过方法调用)

名称	说明	用法
find(selector)	查找指定元素的所有后代元素（包含子子孙孙）	$(’#j_wrap’).find(‘li’).css(‘color’,‘red’); 选择id为j_wrap的所有后代元素li
children()	查找指定元素的直接子元素（也就是亲儿子）	$(’#j_wrap’).children(‘ul’).css(‘color’,‘red’); 选择id为j_wrap的所有子代元素ul
siblings()	查找所有的兄弟元素（不包括自己）	$(’#j_wrap’).siblings().css(‘color’,‘red’); 选择id为j_wrap的所有兄弟元素
parent()	查找亲父亲元素	$(’#j_wrap’).parent().css(‘color’,‘red’); 选择id为j_wrap的父亲元素
eq(index)	查找指定元素的第index个元素，index是索引号，从0开始	$(‘li’).eq(2).css(‘color’,‘red’); 选择所有li标签中的第二个