jquery强大的选择器--jq选择器大全

原文转载：https://muitlog.com/2019/12/31/2019123101.html

在学习jquery的时候，我们已经知道jquery的基本语法：基础语法： $(selector).action()，选择符（selector）"查询"和"查找" HTML 元素，action()是要执行的操作。那么问题来了，怎样才能"查询"和"查找" HTML 元素准确无误呢，第一步不出差错后面的才不会错。个人觉得这是学习jquery的第一步， 以下是本人学习《锋利的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的伪元素。过滤选择器可以归纳为以下几类。

 

1. 基本过滤：

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

$("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")  //选取当前获取焦点的元素

 

1. 内容过滤：

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

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

 

1. 可见性过滤：

根据元素的状态来选择获取。

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

 

1. 属性过滤：

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

$("div[属性]")

 

1. 子元素过滤：

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

 

1. 表单对象属性过滤：

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

$("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。

原文转载：https://muitlog.com/2019/12/31/2019123101.html