JQuery选择器总结

JQery选择器写法简单，能够支持CSS1至CSS3选择器并且具有完善的处理机制。是我们常用的选择器。今天就JQuery选择器我们做简单的总结。

JQuery选择器分类

1、基本选择器

2、层次选择器

3、过滤选择器

　　3.1、基本过滤选择器

　　3.2、内容过滤选择器

　　3.3、可见性过滤选择器

　　3.4、属性过滤选择器

　　3.5、子元素过滤选择器

　　3.6、表单对象属性过滤选择器

4、表单选择器

JQuery选择器详解

1、JQuery基本选择器

选择器	相关描述	返回	选择器示例
#id	根据指定的id匹配元素	单个元素	$("#main")选择id=main的元素
.class	根据类匹配元素	集合元素	$(".main")选择class=main的元素
*	匹配所有元素	集合元素	$("*")选择所有的元素
Element	根据元素名匹配元素	集合元素	$("div")选择所有的div元素
E1，E2，E3	分组匹配元素	集合元素	$("div,span,.old)选择所有的idv.span,class=old的元素

应该注意的是：

　　　　　　$("E1+E2")可以用$(E1).next(E2)代替

　　　　　　$("E1~E2")可以用$(E1).nextAll(E2)代替

2、Jquery层次选择器

选择器	描述	返回值	选择器用例
$("E1 E2")	选择E1下所有的E2	集合元素	$("div span")选择div下面的所有span元素
$("E1>E2")	选择E1下的子E2,不包含E2下满足的元素	集合元素	$("div>span")选择div下面的span元素，不包含span中的span元素
$("E1+E2")	选择E1后紧相邻的E2	集合元素	$(".one+div")选择class=one的下一个div元素
$("E1~E2")	选择E1之后的所有E2	集合元素	$("#one~div")选择id为one后的所有div元素

 

3、JQuery过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出需要的DOM元素，过滤规则与css中的伪类选择器语法相同，即过滤选择器都是以冒号（：）开头

3.1、基本过滤选择器

选择器	描述	返回值	选择器用例
：first	选择第一个元素	单个元素	$("div:first”)选择第一个div元素
:last	选择最后一个元素	单个元素	$("div:last”)选择最后一个div元素
:not(E1)	去除所有E1选择器匹配的元素	集合元素	$("div:not(.my)")选择所有的class不是my的div元素
:even	选择所有索引号为偶数的元素，索引从0开始	集合元素	$("tr:even")选择表格中所有的偶数行
:odd	选择所有索引为奇数的元素，索引从0开始	集合元素	$("tr:odd")选择表格中所有的奇数行
:eq(index)	选择索引值为Index的元素，Index从0开始	单个元素	$("tr:eq(1)")选择所有索引值为1的行
:gt(index)	选择所有索引值大于index的元素，index从0开始	集合元素	$("tr:gt(1)")选择所有索引值大于1的行
:lt(index)	选择所有索引值小于index的元素，index从0开始	集合元素	$("tr:lt(1)")选择所有索引值小于1的行
:header	所取所有标题元素 h1-h6	集合元素	$(".header")选择网页中所有的<h1>\<h2>
:animated	选择当前正在执行动画的元素	集合元素	$("div:animated") 选择正在执行动画的div元素

 

 3.2、JQuery内容过滤选择器

选择器	描述	返回值	选择器用例
:contains（text）	选择包含text文本内容的元素	集合元素	$（“div:contain('好')”）选择内容包含好的所有div
：empty	选择不包含元素或者文本的空元素	集合元素	$("div:empty")选择不包含子元素的所有div元素
:has(E1)	选择包含有（E1选择器匹配到的元素）的所有元素	集合元素	$("div:has(p)")选择含有P元素的所有div元素
:parent	选择含有子元素或者文本的元素	集合元素	$("div:parent")选择用于子元素的所有div元素

 

 

 3.3、可见性过滤选择器

选择器	描述	返回值	选择器用例
：hidden	选择所有不可见元素	集合元素	$(“.hidden”)选择所有不可见元素 包括：<input type="hidden"/> <div style="display:none"> <div style="visibility:hidden">
:visibke	选择所有可见元素	集合元素	$("div:visible")选择所有的div元素

转载于:https://www.cnblogs.com/chongzixing/p/9276622.html