jQ选择器
jQ选择器分为基本选择器,层次选择器,过滤选择器,内容过滤选择器,可见性过滤选择器,属性过滤选择器,子选择过滤器,表单对象属性过滤选择器
注意:选择器中空格不容忽视,多一个空格和少一个空格也许会得到截然不同的结果。
例如:
var $t_a = $('.test :hidden');//表示class为test标记的子孙标记隐藏的数量 (.test和:hidden之间有一个空格 .test :hidden)
var $t_b = $('.test:hidden');//表示class为test标记的隐藏数量(.test和:hidden之间没有空格 .test:hidden)
1、层次选择器
(1)$("ancestor descendant"),后代选择器 //选取ancestor(先祖)元素里的所有descendant(后代)元素。
返回:集合元素
例如:$(" div span") //选取<div>里的所有的<span>元素
(2)$("parent>child"),子选择器 //选取parent(父元素)下的child(子元素)
例如:$(" div> span") //选取<div>里的子元素<span>
5、可见性选择器
注意:在可见性选择器中,需要注意选择器:hidden,它不仅包括样式属性display为none的元素,也包括文本隐藏域<input type="hidden" />和visibility:hidden之类的元素。
6、属性过滤选择器
1.[attribute];选取拥有此属性的元素;$("div[id]")选取拥有属性id的元素
2.[attribute=value];选取属性的值为value的元素;$("div[title=test]")选取属性title为"test"的div元素
3.[attribute!=value];选取属性的值不为value的元素;$("div[title!=test]")选取属性title不为"test"的div元素
4.[attribute^=value];选取属性的值以value开始的元素;$("div[title^=test]")选取属性title已"test"开始的div元素
5.[attribute$=value];选取属性的值以value结束的元素;$("div[title$=test]")选取属性title已"test"结束的div元素
6.[attribute*=value];选取属性的值含有value的元素;$("div[title*=test]")选取属性title含有"test"的div元素
7.[attribute|=value];选取属性的值等于给定字符串或以该字符串为前缀(该字符串后跟一个连字符"-")的元素;$("div[title|='en']")选取属性title等于"en"或以en为前缀(该字符串后跟一个连字符"-")的div元素
8.[attribute~=value];选取属性用空格分隔的值中包含一个给定值的元素;$("div[title-='uk']")选取属性title用空格分隔的值中包含字符uk的元素
9.[attribute1][attribute2][attribute3];用属性选择器合并成一个复合属性选择器,满足多个条件,每选择一次,缩小一次范围;$("div[id][title$='test']")选取拥有属性id并且属性title以"test"结束的div元素