学习笔记（四）jQuery选择器

基本选择器	CSS模式	jQuery模式
标签名选择器	div	$(“div”)
id选择器	#div	$("#div")
class选择器	.div	$(".div")
通配选择器	*	$("*")
群组选择器	div,span	$(“div,span”);
后代选择器	div span	$(“div span”);
子代选择器	div>span	$(“div>span”)
紧邻的下一个同级选择器	div+span	$(“div+span”)
下面所有同级选择器	div~span	$(“div~span”)

方法选择器	示例	说明
find()	$("div").find(".divs")//等同于$(“div .divs”)	选择div标签后代中class是divs的元素
children()	$("div").children("span")//等同于$(“div>span”);	选择div标签子代中是span的标签元素
prev()	$("#li0").prev(“li”);	id为li0标签的同级上一个li标签元素
prevAll()	$("#li0").prevAll(“li”);	id为li0标签的同级上所有li标签元素
prevUntil()	$("#li0").prevUntil(“span”);	id为li0标签的同级上所有标签元素 ，遇到span元素则停止
next()	$("#li0").next()//等同于 $("#li0+")	id为li0标签的同级下一个li标签元素
nextAll()	$("#li0").nextAll(“li”)//等同于 $("#li0~li")	id为li0标签的同级下所有li标签元素
nextUntil()	$("#li0").nextUntil(“span”)	id为li0标签的同级下所有标签元素 ，遇到span元素则停止
siblings()	$("#li0").siblings(“span”)	id为li0标签的同级上下所有标签元素

属性选择器	CSS模式	jQuery模式	描述
[属性]	[title]	$("[title]")	选择有title属性的元素
[属性=属性值]	[title=num]	$("[title=num]")	选择有title属性等于num属性值的元素
[属性^=属性值]	[title^=num]	$("[title^=n]")	选择属性是title并且值是以n字母开始的元素
[属性|=属性值]	[title|=num]	$("[title|=num]")	选择属性是title，并且这个属性的值是num起头，后面紧跟-的值
[属性$=属性值]	[title$=num]	$("[title$=m]")	选择属性是title并且值是以m字母开始的元素
[属性!=属性值]	[title!=num]	$("[title!=num]")	选择有title属性不等于num属性值的元素
[属性~=属性值]	[title~=num]	$("[title~=num]")	选择属性是title，属性值中包含num或者等于num.包含num在这里是指num是一个独立的单词，前后有空格隔开
[属性*=属性值]	[title*=num]	$("[title*=num]")	选择属性是title，属性值的字符串中含有num字符的，可以不是一个独立的单词
[属性][属性=属性值]	[bbb][title=num]	$("[bbb][title]")	选择有bbb和title属性的元素

过滤器	示例	描述
:focus	$(’:focus’)	被焦点的元素
:first	${(}^{\prime }li:firs{t}^{\prime }))//等同于$(“li”).first()	body里第一个元素
:first-child	$(“li:first-child”)	父元素的第一个子元素是li的选中
:nth-child(1)	$(“li:nth-child(1)”)	父元素的第一个子元素是li的选中
:first-of-type	$(“li:first-of-type”)	父元素中选中第一个li类型的元素
:last	$('li:last)	最后一个元素
:last-child	$(“li:last-child”)	父元素的最后一个子元素是li的选中
:last-of-type	$(“li:last-of-type”)	父元素中选中最后开始查找起是li类型的元素
:not(classname)	$('li:not(red))	非 class 为 red 的元素
:even	$(‘li:even’)	将body里的所有li放在一个列表中，排序类似数组下标从0开始，然后选取偶数项，包括0
:nth-child(even)	$(“li:nth-child(even)”)	将body里的所有li放在一个列表中，排序类似数组下标从1开始，然后选取偶数项
:nth-child(2n)	$(“li:nth-child(2n)”)	将body里的所有li放在一个列表中，排序类似数组下标从1开始，然后选取偶数项
:nth-of-type(even)	$(“li:nth-of-type(even)”)	将li父元素中li类型元素的列表中是偶数项的选中，这个even的偶数也是从1开始
:nth-of-type(2n)	$(“li:nth-of-type(2n)”)	将li父元素中li类型元素的列表中是偶数项的选中，这个even的偶数也是从1开始
:odd	$('li:odd)	索引为奇数的元素
:eq(index)	$('li:eq(2))	指定索引值的元素
:gt(index)	$(“div:gt(3)”)	大于div列表的第三项的其他元素
:lt(index)	$(“div:lt(3)”)	小于div列表的第三项的其他元素
.slice(index,index)	$(“div”).slice(2,4)	和数组中的slice相同
:header	$(’:header’)	页面所有 h1~h6 元素
:empty	$(“div:empty”)	选择没有子元素或者子节点的div
:parent	$(".divs:parent")	选择有子元素的或者子节点的class是divs的元素
:contains(text)	div:contains(3)	div的后代元素中包含3子节点的元素,只能是内容不能是元素
:has()	$(":has(.divs)"))//等同于$(“div”).has("#div0")	查找包含选择器元素的容器，包括父元素，body，html
.parents()	$(".divs").parents()	查找当前.divs元素的所有父容器，包括父元素，body，html
.parentsUntil(“html”)	$(".divs").parentsUntil(“html”)	查找当前.divs元素的父元素到html之前的所有父容器
:hidden	$(":hidden")	所有不可见的元素,包括head, meta, meta, title, script, script，还包括display:none，像visibility: hidden和height:0都不属于隐藏的
:visible	$(":visible")	所有可以显示的元素，包括[html, body
:only-child	$(“div:only-child”)	该元素是父元素唯一子元素，独生子女
:only-of-type	$(“div:only-of-type”)	该元素在它的父容器中的同种类型仅此一个
is()	$(“div”).is(".divs")	判断div列表中是否由.divs选择器的元素，有就返回true,没有就返回false
hasClass()	$(“div”).hasClass(“divs”)	作用是仅判断div列表中是否有class是divs的选择器，有就返回true 反之返false