`
micro-feng
  • 浏览: 6540 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
最近访客 更多访客>>
社区版块
存档分类
最新评论

锋利的jQuery之jQuery选择器

 
阅读更多

jQuery选择器

 

1.基本选择器

基本选择器是jQuery中最常用的选择器。基本选择器有:

#id根据给定的Id匹配一个元素,返回单个元素。

.class根据给定的类名匹配元素,返回集合元素。

tag根据给定的标签名匹配元素,返回集合元素。

*匹配所有元素,返回集合元素。

s1,s2,...,sn逐个选择器匹配,返回集合元素。

 

2.层次选择器

层次选择器,顾名思义,就是根据DOM元素之间的层次关系来选取元素,例如有父元素,子元素,兄弟元素等等。层次选择器有:

ancestor descendent选取ancestor元素中所有的descendent元素,返回集合元素

parent > children选取parent元素的子元素中的children元素,返回集合元素

prev + next选取紧接在prev元素后的next元素,返回集合元素

prev ~ siblings选取prev后的所有siblinngs元素,返回集合元素

 

3.过滤选择器

过滤选择器就是通过特定的规则筛选所需要的DOM元素。过滤规则与伪类选择器类似,过滤选择器的分类有基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象属性过滤选择器。

3.1基本过滤选择器

:first选取第一个元素,返回单个元素

:last选取最后一个元素,返回单个元素

:not(selector)去除所有与给定选择器匹配的元素,返回集合元素

:even选取所有索引为偶数的元素,返回集合元素

:odd选取所有索引为奇数的元素,返回集合元素

:eq(index)选取索引等于index的元素(从0开始),返回单个元素

:gt(index)选取所有索引值大于index的元素(从0开始),返回集合元素

:lt(index)选取所有索引值小于index的元素(从0开始),返回集合元素

:header选取所有的标题元素,返回集合元素

:animated选取所有当前正在执行动画的元素,返回集合元素

:focus选取当前获取焦点的元素,返回集合元素

3.2内容过滤选择器,内容选择过滤器主要体现在他所包含的子元素或文本内容上。

:contains(text)选取含有文本内容为"text"的元素,返回集合元素

:empty选取不包含子元素或文本的空元素

:has(selector)选取含有选择器所匹配的元素的元素

:parent选取含有子元素或文本的元素

3.3可见性过滤选择器,根据元素的可见性选取相应的元素。

:hidden选取所有的不可见元素,返回集合元素

:visible选取所有的可见元素,返回集合元素

3.4属性过滤选择器,通过元素的属性选取元素。

[attribute]选取所有拥有此属性的元素,返回集合元素

[attribute=value]选取所有属性值为value的元素,返回集合元素

[attribute!=value]选取所有属性值不是value的元素,返回集合元素

[attribute^=value]选取所有属性值以value开头的元素,返回集合元素

[attribute$=value]选取所有属性值以value结尾的元素,返回集合元素

[attribute*=value]选取所有属性值中包含value的元素,返回集合元素

[attribute|=value]选取所有属性值为value或以value作为前缀的元素,返回集合元素

[attribute~=value]选取属性中用空格分隔的值中包含value的元素,返回集合元素

[attribute1]..[attributeN]复合属性选择器,选取满足所有属性选择器的元素,返回集合元素

3.5子元素过滤选择器

:nth-child(index/even/odd/equation)选取每个父元素下的第index个子元素,索引为偶数的子元素,索引为奇数的子元素,索引值等于equation(equation中的n从1开始计算)计算出的值的子元素,返回集合元素

:first-child选取每个父元素的第一个子元素,返回集合元素

:last-child选取每个父元素的最后一个子元素,返回集合元素

:only-child选取所有只有一个子元素的子元素,返回集合元素

3.6表单对象属性过滤器,对所选取的表单元素进行过滤。

:enabled选取所有可用元素,返回集合元素

:disabled选取所有不可用元素,返回集合元素

:checked选取所有被选中的元素(单选框,复选框),返回集合元素

:selected选取所有被选择的元素(下拉列表),返回集合元素

 

4.表单选择器

:input选取所有的<input><textarea><select><button>元素,返回集合元素

:text 选取所有的单行文本框,返回集合元素

:password选取所有的密码框,返回集合元素

:radio选取所有的单选框,返回集合元素

:checkbox选取所有的复选框,返回集合元素

:submit选取所有的提交按钮,返回集合元素

:image选取所有的图像按钮,返回集合元素

:reset选取所有的重置按钮,返回集合元素

:button选取所有的按钮,返回集合元素

:file选取所有的上传域,返回集合元素

:hidden选取所有不可见元素,返回集合元素

 

 

分享到:
评论

相关推荐

    基于jquery的H5移动端选择器,日期选择器,自定义级联选择器,自定义html选择器

    基于jQuery的H5移动端选择器是为适应移动设备特性和用户体验需求而设计的组件。这些组件通常包括日期选择器、级联选择器和自定义HTML选择器,它们能够提高移动应用的交互性和可操作性。 日期选择器是网页应用中常见...

    jQuery颜色选择器ColorPicker

    **jQuery颜色选择器ColorPicker详解** 在Web开发中,用户界面的交互性和视觉效果往往对用户体验有着重要影响。其中,颜色选择器是一个常见的组件,它允许用户方便地选取颜色。`jQuery ColorPicker`是一个轻量级且...

    jquery周历选择器

    本项目“jquery周历选择器”利用jQuery的灵活性和易用性,构建了一个适用于混合应用程序(Hybrid App)的周历选择器组件。 1. **周历选择器设计**: - 周历选择器通常用于日程管理或时间规划应用,显示一周的日期...

    jQuery基础选择器练习题

    在JavaScript的世界里,jQuery是一个非常流行和...记住,熟练掌握jQuery选择器将极大地提升你的前端开发效率,让你编写出更加简洁高效的代码。在学习过程中,不断实践和应用这些知识点,你将会成为一个jQuery的大师。

    jquery 城市选择器

    《jQuery城市选择器详解》 在网页开发中,经常需要实现一种功能,即用户可以选择他们的所在省份和城市,这在注册、填写地址等场景中尤为常见。jQuery城市选择器就是解决这一需求的有效工具,它利用JavaScript和...

    jQuery选择器.rar

    jQuery选择器是其核心功能之一,它们用于在HTML文档中找到特定的元素,以便进行进一步的操作。下面是对jQuery选择器的一些详细说明: 1. **基本选择器**:包括`$()`函数内的ID选择器(如`$("#myID")`)、类选择器...

    城市选择器jquery

    jquery 城市选择器代码

    jquery日期选择器

    3. **初始化插件**:使用jQuery选择器选择该元素,然后调用日期选择器插件的初始化方法,例如`$(selector).dateInput(options);`,其中`options`是可选的配置对象。 4. **配置选项**:根据需求设置日期选择器的配置...

    Jquery实验室的选择器工具

    **jQuery选择器工具详解** jQuery库是JavaScript中最广泛使用的库之一,它简化了DOM操作、事件处理、动画制作以及Ajax交互。在这个“jQuery实验室的选择器工具”中,我们将深入探讨jQuery选择器的强大功能,它是...

    jQuery学习资料之万能的选择器

    jQuery选择器是其强大之处,它们基于CSS选择器,但扩展了更多功能,允许更复杂的选取方式。以下是一些常见选择器: - **基本选择器**:`#id`(ID选择器)、`.class`(类选择器)、`tag`(标签选择器)和`*`(通用...

    锋利的jQuery实例

    jQuery是一个广泛应用于Web开发的JavaScript库,其核心特性在于它的轻量级设计和强大的DOM操作能力,特别是其高效的选择器引擎,使得开发者能更便捷地选取和操作页面元素。 一、jQuery的选择器 jQuery的选择器是其...

    《锋利的jQuery》

    1. jQuery选择器是jQuery的核心特性之一。选择器使得开发者能够快速选择页面中的元素,从而进行各种操作。选择器基于CSS选择器的语法,但扩展了它的功能。常见的选择器包括基本选择器(如标签名、ID和类选择器),...

    jquery实现颜色选择器

    **jQuery 实现颜色选择器** 在网页开发中,颜色选择器是一个常见的交互元素,它允许用户方便地选取颜色。在本教程中,我们将探讨如何利用 jQuery 和相关插件来实现一个功能完备的颜色选择器。 首先,`jQuery` 是一...

    jQuery日期时间选择器插件.rar

    jQuery日期时间选择器插件.rar jQuery日期时间选择器插件.rar jQuery日期时间选择器插件.rar jQuery日期时间选择器插件.rar jQuery日期时间选择器插件.rar jQuery日期时间选择器插件.rar jQuery日期时间选择器插件....

    jquery城市选择器

    《jQuery城市选择器详解》 在网页开发中,常常需要为用户提供便捷的城市选择功能,以满足用户在填写地址或选择服务区域时的需求。jQuery城市选择器便是为此而设计的工具,它结合了jQuery库的强大功能,实现了高效、...

    jquery实例+锋利的jquery+api

    1. **jQuery选择器**:书中可能详细介绍了CSS选择器、jQuery特有的选择器以及如何组合使用它们高效地选取DOM元素。 2. **jQuery对象与DOM元素**:区分jQuery对象和原生DOM元素,理解它们之间的转换方法,如`get()`,...

    jQuery选择器的一个Bug

    然而,即便如此成熟的库,也难免存在一些已知的问题和限制,其中之一就是我们今天要探讨的"jQuery选择器的一个Bug"。 首先,我们要理解jQuery选择器的基本原理。jQuery基于CSS选择器,它允许开发者通过类似CSS的...

    jquery 颜色选择器,使用简单

    jQuery,一个流行的JavaScript库,提供了许多插件来简化开发人员的工作,其中包括颜色选择器。本篇文章将深入探讨如何利用jQuery轻松实现颜色选择功能,以提高用户界面的交互性。 一、jQuery颜色选择器简介 jQuery...

    锋利的jquery-第一版

    jQuery对象的创建通常通过"$()"函数开始,它可以是一个CSS选择器,用于选取页面上的元素。例如,`$("div")`会选择所有的`&lt;div&gt;`元素。jQuery还支持链式调用,这意味着一个方法的返回值仍是jQuery对象,可以接着调用...

    jquery样式选择器插件源码demo

    通过阅读和理解这段源码,开发者不仅可以学习到jQuery选择器的工作原理,还能提升对CSS选择器、DOM操作以及JavaScript性能优化的理解。 总结来说,这个"jquery样式选择器插件"是一个浓缩的精华,它展示了如何用最少...

Global site tag (gtag.js) - Google Analytics