首页 > 代码库 > JQuery-选择器整理

JQuery-选择器整理

一、基本选择器

 1)ID选择器

 2)标签选择器

 3 )  类选择器

 4 ) 通配符选择器

二、层级选择器

 1 ) 包含选择

 2 ) 子选择器  

 3 ) 相邻选择器

 4 ) 兄弟选择器

三、简单的伪类选择器

1 ) 特定位置选择器

2 ) 指定范围选择器 

3 ) 排除选择器

四、与内容相关的伪类选择器

1 ) 匹配包含文本选择器

2)  匹配包含元素选择器

3 )  匹配包含判断选择器

4 ) 解析内容过滤实现原理

五、与元素显示状态相关的伪类选择器

六、匹配子元素的伪类选择器

七、与表单对象相关的伪类选择器

-------------------------------------------------------------------------------------------

一、基本选择器
1、ID选择器,语法:jQuery("#id")
<script src=http://www.mamicode.com/"jQuery/jquery-1.6.4.js" type="text/javascript"></script>>

2、标签选择器,语法: jQuery("element")
 注意:不需要附加前缀(#)
<script src=http://www.mamicode.com/"jQuery/jquery-1.6.4.js" type="text/javascript"></script>>

3、类选择器,语法:jQuery(".className") 
 className为字符串,表示标签的class属性值,前缀符号“.”表示该选择器为类选择器。返回值为包含匹配className元素的jQuery对象。
 
<script src=http://www.mamicode.com/"jQuery/jquery-1.6.4.js" type="text/javascript"></script>>
4、通配符选择器,语法:jQuery("*")
  参数“*”为字符串,表示将匹配指定范围内所有的标签元素。
<script src=http://www.mamicode.com/"jQuery/jquery-1.6.4.js" type="text/javascript"></script>>

二、层级选择器
1、包含选择器,语法:jQuery("ancestor descendant")
   其中,ancestor表示包含选择器,descendant表示被包含选择器。
   jQuery能够在ancestor选择器所匹配的元素中,过滤出匹配ancestor选择器的所有包含元素。
eg:
<script src=http://www.mamicode.com/"jQuery/jquery-1.6.4.js" type="text/javascript"></script>>
2、子选择器,语法:jQuery("parent>child")
     其中,parent表示父选择器,child表示被包含的子选择器,“>”为子选择器的标识符。jQuery能够在parent选择器所匹配的元素中,过滤出所有匹配child选择器的子元素。
eg:
<script src=http://www.mamicode.com/"jQuery/jquery-1.6.4.js" type="text/javascript"></script>>
3、相邻选择器,语法:jQuery("prev+next")
其中,prev表示相邻的前一个选择器,next表示相邻的后一个选择器,
"+"为相邻选择器的标识符。jQuery能够在prev选择器所匹配的元素后,过滤出所有匹配next选择器的紧邻同级元素。
eg:
<script src=http://www.mamicode.com/"jQuery/jquery-1.6.4.js" type="text/javascript"></script>>
4、兄弟选择器,语法: jQuery("pre ~ siblings")
 其中,prev表示相邻的前一个选择器,siblings表示相邻的同级选择器,
“~”为兄弟选择器的标识符。jQuery能够在prev选择器所匹配的元素后,过滤出所有匹配siblings选择器的同级元素/
eg:
<script src=http://www.mamicode.com/"jQuery/jquery-1.6.4.js" type="text/javascript"></script>>
5、层级选择器综合应用

三、简单的伪类选择器
简单的伪类选择器也称为定位过滤器,因为他们主要根据编号和排位筛选特定位置上的元素,或者过滤掉特定元素
1、特定位置选择器
主要包括  :first 、 :last和:qe(index)3 种。:first能够在匹配的集合中选择第1个元素,相反:last能够在匹配的集合中选择最后一个元素,而
:eq(index)能够根据index索引值确定指定位置的元素。具体用户如下:
jQuery("selector:first") 
jQuery("selector:last") 
jQuery("selector:eq(index)") ,index从0开始计数
eg:
<script src=http://www.mamicode.com/"jQuery/jquery-1.6.4.js" type="text/javascript"></script>>
2、指定范围选择器
 主要包括 :even 、:odd 、 :gt(index)和:lt(index) 四种
:even 匹配集合中选择所有偶数行元素
:odd  匹配集合中选择所有级奇数行元素
:gt(index) 匹配集合中选择大于给定索引值的元素
:lt(index)  匹配集合中选择小于给定索引值的元素
eg:
<script src=http://www.mamicode.com/"jQuery/jquery-1.6.4.js" type="text/javascript"></script>>
3、排除选择器
语法:jQuery("selector1:not(selector2)");参数selector1、selector2和not为字符串,其中,selector1和selector2表示任意形式的选择器,“:”为伪类选择器的标识符,not表示排除函数标识符。
eg:
<script src=http://www.mamicode.com/"jQuery/jquery-1.6.4.js" type="text/javascript"></script>>
四、与内容相关的伪类选择器
:contains  -〉匹配包含给定文本的元素。例如,$("div:contains(‘图片‘)")匹配所有包含“图片”的div元素
:empty -〉匹配所有不包含子元素或者文本的空元素。
:has -〉匹配含有选择器所匹配的元素的元素。例如。$("div:has(p)") 匹配所有包含p元素的div元素
1、匹配包含文本选择器
    语法:jQuery("selector:contains(text)")
<script src=http://www.mamicode.com/"jQuery/jquery-1.6.4.js" type="text/javascript" ></script>>
2、匹配包含元素选择器
语法: jQuery("selector1:has(selector2)");
3、匹配包含判断选择器
语法:jQuery("selector:empty");
          jQuery("selector:parent");
:empty匹配元素中包含空内容的元素
:parent匹配元素中包含非空内容的元素
4、解析内容过滤实现原理

五、与元素显示状态相关的伪类选择器
:hidden 匹配所有不可见元素,或者type为hidden的元素
:visible 匹配所有的可见元素

六、匹配子元素的伪类选择器
:nth-child   匹配其父元素下的第N个子或奇偶元素 
:first-child  匹配第一个子元素。:first只匹配一个元素,而:first-child选择器将为每个父元素匹配一个子元素
:last-child  匹配最后一个子元素。:last只匹配一个元素,而:last-child选择器将为每个父元素匹配一个子元素
:only-child 如果某个元素是父元素中唯一的子元素,那将会被匹配;如果父元素中含有其他元素,那将不会被匹配

七、与表单对象相关的伪类选择器
:input 匹配所有input , textarea,select和button元素
:text    匹配所以的单行文本框
:password  匹配所有密码框
:radio 匹配所有单选框
:checkbox 匹配所有复选框
:submit 匹配所有提交按钮
:image 匹配所有图像域
:reset 匹配所有重置按钮
:button 匹配所有按钮
:file 匹配所有文件
:hidden 匹配所有不可见元素