本篇教程介绍了jQuery入门教程 选择器学习，希望阅读本篇文章以后大家有所收获，帮助大家对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元素    

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端jQuery频道！