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元素

 

posted on 2017-10-10 11:08  XMLYS  阅读(273)  评论(0编辑  收藏  举报