【基础】新手任务,五分钟全面掌握JQuery选择器

发布时间:2019-06-16 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了【基础】新手任务,五分钟全面掌握JQuery选择器脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

1. 基本选择器

1.1 ID选择器:

//选中id为myDiv的元素,速度最快
$("#myDiv")

1.2 类选择器

//选中class属性red的所有元素
$(".red")

1.3 元素选择器:

//选中所有div元素
$("div")

1.4 通配符选择器:

//选中所有元素
$("*")

1.5 复合选择器:

//选中所有span元素和所有id为myDiv的元素
$("span,#myDiv")

2. 层次选择器

2.1 选择器1 选择器2:

//选中body内的所有div元素
$("body div")

2.2 选择器1 > 选择器2:

//选中body内的所有直接div元素,不查找间接元素
$("body > div")

2.3 选择器1 + 选择器2:

//选中所有class为red的下一个div元素
$(".red + div")

2.4 选择器1 ~ 选择器2:

//选中id为myDiv后面的所有div兄弟元素
$("#myDiv ~ div")

3. 基本过滤选择器

3.1 第一个元素选择器

//选中第一个div元素
$("div:First")

3.2 最后一个元素选择器

//选中最后一个div元素
$("div:last")

3.3 排除选择器

//选中class不为red的所有div元素
$("div:not(.red)")

3.4 偶数选择器

//选中索引值为偶数的div元素
$("div:even")

3.5 奇数选择器

//选中索引值为奇数的div元素
$("div:odd")

3.6 索引值选择器

//选中索引值为2的div元素
$("div:eq(2)")
//选中索引值大于2的div元素
$("div:gt(2)")
//选中索引值小于2的div元素
$("div:lt(2)")

4. 内容过滤选择器

//选中所有包含文本ok的div元素
$("div:contains(ok)")
//选中所有为空的div元素
$("div:empty")
//选中所有包含class为red的div元素
$("div:has(.red)")
//选中所有不为空的div元素
$("div:parent")

5. 可见性过滤选择器

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

6. 属性过滤选择器

//选中所有包含属性title的div元素
$("div[title]")
//选中所有属性title等于ok的div元素
$("div[title=ok]")
//选中所有属性title不等于ok的div元素
$("div[title!=ok]")
//选中所有属性title值以ok开头的div元素
$("div[title^=ok]")
//选中所有属性title值含有ok的div元素
$("div[title*=ok]")
//选中所有包含属性id,并且属性title值以ok开头的div元素
$("div[id][title^=ok]")

7. 子元素过滤选择器

//选中所有是第二个子结点的div元素
$("div:nth-child(2)")
//选中所有是第一个子结点的div元素
$("div:first-child")
//选中所有是最后一个子结点的div元素
$("div:last-child")
//选中所有是唯一子结点的div元素
$("div:only-child")

8. 表单属性过滤选择器

//选中表单内可用input
$("#form1 input:enabled")
//选中表单内不可用input
$("#form1 input:disabled")
//选中表单内所有选中的元素
$("#form1 input:checked")
//选中下拉列表中选中的元素
$("select > option:selected")

脚本宝典总结

以上是脚本宝典为你收集整理的【基础】新手任务,五分钟全面掌握JQuery选择器全部内容,希望文章能够帮你解决【基础】新手任务,五分钟全面掌握JQuery选择器所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。