jquery强大的选择器——jq选择器大全【原创】

 

以下是本人学习《锋利的jquery》时总结归纳分类的jquery选择器,方便大家查询和学习,正所谓 “ 多学一点知识,少写一行代码 “

一、基本选择器

基本选择器是常见的选择器,也是最简单的选择器,通过对于类,id,标签来查找。

$("#id") //选取id,单个元素 

$(".class") 

$("p") 

$("*") 

$("div,p,p.myclass") //多个元素

二、层次选择器

jquery层次选择器是通过html元素之间的层次关系来获取特定的元素。比如后代元素和相邻之间的元素。

也可以用jquery方法next()查找出紧跟在.one后面的相邻元素div,用nextAll()方法查找出紧跟在.one后面所有div。

$(".one + div") //等价于 $(".one).next("div") 
$(".one ~ div") //等价于 $(".one).nextAll("div")

三、过滤选择器

过滤选择器可以通过特定的附加条件筛选出需要的DOM元素,筛选的条件像css的伪元素。过滤选择器可以归纳为以下几类。

基本过滤:

基本过滤是过滤选择器中较为简单的筛选规则。结合代码快注释解释。

$("div:first")//选取div中第一个元素。
$("div:last")//选取div中最后一个元素。
$("div:not(selector)")//不包含某元素
$("div:even")//div的索引为基数
$("div:odd")//div的索引为偶数
$("div:eq(3)")  //查找div的索引值,index  0 开始,获取索引为3
$("div:gt(3)")  //索引值大于3
$("div:lt(3)")  //索引值小于3
$(":header")  //选取所有标题
$(":animate")  //选取正在执行的动画的元素
$(":focus")  //选取当前获取焦点的元素

内容过滤:

根据文本内容和子元素,查找筛选出呼和条件的DOM元素。

$("div:contains("内容")")
$("div:empty")  //不包含子元素的空元素
$("div:has(p)")  //含有子元素的元素
$("div:parent")  //含有子元素或者文本的元素

可见性过滤: 根据元素的状态来选择获取。

$("div:hidden")  //选取不可见的元素
$("div:visible")  //选取可见的元素

属性过滤:

通过元素所包含的属性来获取DOM元素,属性写在【】里,当属性包含属性值时,书写格式为【属性 = 属性值】,当筛选的条件包含多个属性时,【属性】【属性】【属性】可以多个属性选择器并排,构成复合属性选择器。

$("div[属性]")

子元素过滤:

$("div:first-child") //选择div的第一个子元素
$("div:last-child") //选择div的最后一个子元素
$("div:only-child") //某个元素是div的唯一一个子元素时会被调用,否者不会。
$("div:nth-child(3))") //指定div下索引为3的元素。

表单对象属性过滤: 此过滤选择器是针对表单元素进行过滤。

$("input:enabled") //可用元素
$("input:disabled") //不可用元素
$("input:checked") //被选中元素(单选框, 复选框)
$("select option:seleced") //选取所有被选中的元素

四、表单选择器:

为了获取表单中的某个元素和某个类型的元素,以便于更加简单灵活的操作表单,于是有了表单选择器。

$("#form :button") //选择type = “button” 的元素
$("#form :text") //选择单行文本框
$("#form :password") //选择type = “password”的元素
$("#form :radio") //选择type = radio”的单选框
...

以上是比较常用的jquery选择器,能帮助比快速的区分和书写jquery。

推荐阅读:

本文为博主原创文章,知识共享,开源精神,转载注明出处。