资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/jQuery选择器

jQuery选择器

pingan8787 / 2234人阅读

摘要：选择具有指定属性的元素，其值与给定字符串完全一致。会选择到第三个符合所有指定的属性过滤器的元素。选择同父代的最后一个子代元素。选择所有被禁用的元素。选择所有清除按钮复位按钮的元素。选择所有文本输入框的元素。

链接：jQuery选择器
基本选择器 Basics

*选择所有元素

.class选择class，如：$(".mybox")

element选择element，如：$("p")

#id选择id，如：$("#box")

selector1,selectorN可以同时选择多个元素，如：$("div, p.box, #phone")

层级选择器 Hierarchy

parent > child选择指定元素下的指定子元素，如：$("ul.tonav > li")

ancestor descendant选择一个元素里所有的后代元素，如：$("form input")

prev + next选择所有指定元素后紧跟着的元素，如：$("label + input")

prev ~ siblings选择与指定元素之后有相同父级的同级选择器，如：$("#prev ~ div")

基本过滤器 Basic Filters

:animated选择动画进行中的所有元素。如：$("div:animated)

:eq(n)选取第n个元素，如：$("ul.tonav li:eq(n)")

:even选取偶数个元素，如：$("li:even")

:odd选取奇数个元素，如：$("li.odd")

:first选取第一个元素，如：$("li:first")

:gt(n)选取结果集中索引大于n的元素，n可以为负值，如：$(":gt(3)")

:lt(n)选取结果集中索引小于n的元素，n可以为负值，如：$(":lt(3)")

:header选取所有的标题元素，例如h1、h2、h3...，如：$(":header")

:lang()选取指定语言的所有元素，，如：$("div:lang(zh-cn)")

:last选取最后一个符合的元素，如：$("li:last")

:not选取不符合的所有元素，如：$("input:not(:checked) + span")

:root选取作为文档根目录的元素

:target选取由文档的图片、视频、音频指示的目标元素

内容过滤器 Content Filters

:contains()选择包含指定文本的所有元素，如：$("div:containers("home")")

:empty选择没有子元素或内容文字的元素，如：$("td:empty"))

:has()选择包含至少一个匹配指定选择器的元素的元素，如：$("div:has(p)"))

:parent选择至少有一个子节点（元素或文本）的所有元素

可视选择器 Visibility Filters

:hidden选择所有隐藏的元素，如：$("div:hidden").show(3000));

:visible选择所有隐藏的元素，如：
$("div:visible").click(function() {$(this).css("background", "yellow");});

属性选择器 Attribute

[name]选择具有指定属性的元素（使用任何值都可以）。如：$("div[id]")

[name|="value"]选择具有指定属性的元素，其值等于给定的字符串，或者以该字符串开头，后跟连字符（-）。

$("a[href="about.html"]");  //选择 a 链接的 href 属性包含 "about.html" 的元素

[name*="value"]选择具有包含给定子字符串的值得指定属性的元素。

$("input[name*="man"]");  //选择所有的 name 属性包含 "man" 的 input 元素

[name~="value"]选择具有指定属性的元素，其中包含由空格分隔的给定单词的值。




$("input[name~="man"]");  //会选择到前两个 input 元素

[name$="value"]选择具有指定属性的元素，其值与给定字符串精确匹配，要区分大小写。如：$("input[name$="letter"]")

[name="value"]选择具有指定属性的元素，其值恰好等于特定值，如：$("input[value="Hot Fuzz"]")会选到value等于Hot Fuzz的input

[name!="value"]选择不具有指定属性的元素，或者具有指定苏醒但不具有特定值的元素。如：$("input[name!="newsletter"]")，name属性值为newsletter的不选。

[name^="value"]选择具有指定属性的元素，其值与给定字符串完全一致。




$("input[name^="news"]");  //会选择到第三个 input

[name="value"][name2="value2"]符合所有指定的属性过滤器的元素。如：$("input[id][name$="man"]")

子代过滤器 Child Filters

:first-child选择同父代的第一个子代元素。

:first-of-type选择同一元素名称的兄弟中的第一个元素。

:last-child选择同父代的最后一个子代元素。

:last-of-type选择同一元素名称的兄弟中的最后一个元素。

:nth-child()选择同父代的第n个子代元素。

:nth-last-child()选择同父代的倒数第n个子代元素。

:nth-last-of-type()选择同父代的倒数第n个子代元素。

:nth-of-type()选择同父代的第n个子代元素。

:only-child选择只有一个子代的元素。

:only-of-type()选择所有没有同名元素的兄弟元素。如：$("div.button:only-child")选择只有一个button的div

表单选择器

:button选择所有按钮元素和按钮类型的元素。

:checkbox选择所有得可取块的元素。

:checked选择所有选中的元素。

:disabled选择所有被禁用的元素。

:enabled选择所有已启用的元素。

:focus选择当下被focus的元素。

:file选择file类型的元素。

:image选择图像类型的所有的元素。

:input选择所有input、textarea、select和button元素。

:password选择所有密码类型的元素。

:radio选择所有选项按钮的元素。

:reset选择所有清除按钮（复位按钮）的元素。

:selected选择所有选中的元素。

:submit选择所有提交类型的元素。

:text选择所有文本输入框的元素。

GPU云服务器 云服务器 jquery常用选择器 jquery过滤选择器 jquery双向选择器 jquery选择器空格

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109360.html

相关文章

  • jQuery入门笔记之（一）选择器引擎

    摘要：选择器，若未作特别说明，获取的都是元素集合。过滤器名语法说明选取所有不可见元素选取所有可见元素注意过滤器一般是包含的内容为样式为表单类型为和的元素。四子元素过滤器子元素过滤器的过滤规则是通过父元素和子元素的关系来获取相应的元素。 转自个人博客本来是单独整理了一个CSS选择器的，但是在jQuery中基本都有对应的，所以就不发了。 jQuery选择器，若未作特别说明，获取的都是元素集合。...

    charles_paul 评论0 收藏0

  • jQuery 选择器

    摘要：选择器选择器一基本选择器语法说明选择文档中的所有元素元素选择器，选择所有的元素，返回数组选择器，返回单个元素选择器，返回数组并列选择器，返回所有的元素和元素二层次选择器语法说明后代选择器，选择所有元素下面的所有子元素，包含非直接 title: jQuery 选择器date: 2017-01-07 20:32:26 tags: [jQuery, 选择器] 一、基本选择器 语法 说明...

    gghyoo 评论0 收藏0

  • jQuery 对象、基本选择器、筛选选择器

    摘要：代表的上下文对象是一个的上下文对象，可以调用的方法和属性值特殊选择器点击测试通过原生处理点击测试通过原生处理直接通过的方法改变颜色通过包装成对象改变颜色 DOM对象转化成jQuery对象 如果传递给$(DOM)函数的参数是一个DOM对象，jQuery方法会把这个DOM对象给包装成一个新的jQuery对象 元素一 元素二 元素三 var ...

    source 评论0 收藏0

  • 前端基础入门五（掌握jQuery的常用api，实现动态效果）

    摘要：基本概念学习目标学会如何使用，掌握的常用，能够使用实现常见的效果。想要实现简单的动画效果，也很麻烦代码冗余。实现动画非常简单，而且功能更加的强大。注意选择器返回的是对象。 jQuery基本概念 学习目标：学会如何使用jQuery，掌握jQuery的常用api，能够使用jQuery实现常见的效果。 为什么要学习jQuery？ 【01-让div显示与设置内容.html】 使用javasc...

    nevermind 评论0 收藏0

  • 前端基础入门五（掌握jQuery的常用api，实现动态效果）

    摘要：基本概念学习目标学会如何使用，掌握的常用，能够使用实现常见的效果。想要实现简单的动画效果，也很麻烦代码冗余。实现动画非常简单，而且功能更加的强大。注意选择器返回的是对象。 jQuery基本概念 学习目标：学会如何使用jQuery，掌握jQuery的常用api，能够使用jQuery实现常见的效果。 为什么要学习jQuery？ 【01-让div显示与设置内容.html】 使用javasc...

    codecook 评论0 收藏0

  • 前端基础入门五（掌握jQuery的常用api，实现动态效果）

    摘要：基本概念学习目标学会如何使用，掌握的常用，能够使用实现常见的效果。想要实现简单的动画效果，也很麻烦代码冗余。实现动画非常简单，而且功能更加的强大。注意选择器返回的是对象。 jQuery基本概念 学习目标：学会如何使用jQuery，掌握jQuery的常用api，能够使用jQuery实现常见的效果。 为什么要学习jQuery？ 【01-让div显示与设置内容.html】 使用javasc...

    WalkerXu 评论0 收藏0

发表评论

登陆后可评论

0条评论

pingan8787

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<