`

jquery Selectors

阅读更多
http://docs.jquery.com/Selectors
selectors其实也是jquery的核心内容, 没有跟core放在一起有些奇怪, 因为core的章节中已经提到了slector用法,那种类似xpath的取对象方式算得上是jquery最吸引人的特点了。

selectors基本方式:
#id Returns: Array<Element>
id属性唯一确认一个对象
element Returns: Array<Element(s)>
用name(name组成xpath)获取对象或对象数组
.class Returns: Array<Element(s)>
用class属性获取对象或对象数组
* Returns: Array<Element(s)>
*用来获取所有对象
selector1, selector2, selectorN Returns: Array<Element(s)>
用一组selectors(包含以上三种)来获取满足匹配要求的对象合集。

继承关系的选择:
ancestor descendant Returns: Array<Element(s)>
$("form input")类似这样, 用ancestor在前,descendant在后的形式来选择对象。这个形式实在非常常见。
parent > child Returns: Array<Element(s)>
$("div > input")类似这样, 来选择对象。 感觉跟$("div input")是等价的。
prev + next Returns: Array<Element(s)>
$("label + input")类似这样, 选择紧接着label的下一个兄弟对象。
prev ~ siblings Returns: Array<Element(s)>
$("label ~ input")类似这样, 选择lable的之后的全部兄弟对象。

Child Filters:
:nth-child(index/even/odd/equation) Returns: Array<Element(s)>
所选对象中,作为第n个child的对象
:first-child Returns: Array<Element(s)>
所选对象中,作为第一个child的对象
:last-child Returns: Array<Element(s)>
所选对象中,作为最后一个child的对象
:only-child Returns: Array<Element(s)>
所选对象中,作为叶子节点child的对象

基本Filters:
filters一般都是结合selectors,进一步筛选对象
:first Returns: Array<Element>
所选对象的第一个
:last Returns: Array<Element>
所选对象的最后一个
:not(selector) Returns: Array<Element(s)>
所选对象中不满足指定selector规则的对象
:even Returns: Array<Element(s)>
所选对象中的奇数编号的对象
:odd Returns: Array<Element(s)>
所选对象中的偶数编号的对象
:eq(index) Returns: Array<Element>
所选对象中的指定编号的对象
:gt(index) Returns: Array<Element(s)>
所选对象中大于指定编号的对象
:lt(index) Returns: Array<Element(s)>
所选对象中小于指定编号的对象

Content Filters:
:contains(text) Returns: Array<Element(s)>
所选对象中包含指定文本的对象
:empty Returns: Array<Element(s)>
所选对象中的没有子对象的对象(叶子对象)
:has(selector) Returns: Array<Element(s)>
所选对象中包含指定selector的对象
:parent Returns: Array<Element(s)>
所选对象中有子对象的对象(非叶子对象)

Visibility Filters:
:hidden Returns: Array<Element(s)>
所选对象中隐藏的对象
:visible Returns: Array<Element(s)>
所选对象中可见的对象

属性filter
[attribute] Returns: Array<Element(s)>
所选对象中有该属性的对象
[attribute=value] Returns: Array<Element(s)>
所选对象中,指定属性值的对象
[attribute!=value] Returns: Array<Element(s)>
所选对象中, 没有指定属性值的对象
[attribute^=value] Returns: Array<Element(s)>
所选对象中, 属性值以指定值开头的对象
[attribute$=value] Returns: Array<Element(s)>
所选对象中,属性值以指定值结束的对象
[attribute*=value] Returns: Array<Element(s)>
所选对象中,属性值以包含指定值的对象
[selector1][selector2][selectorN] Returns: Array<Element(s)>
所选对象中, 满足一组selector组合规则的对象

Forms的filter:
其实感觉这些都不算是限制于form的,不知道为何跟form扯上了关系
:input Returns: Array<Element(s)>
所有input对象
:text Returns: Array<Element(s)>
所有text对象
:password Returns: Array<Element(s)>
所有password对象
:radio Returns: Array<Element(s)>
所有radio对象
:checkbox Returns: Array<Element(s)>
所有checkbox对象
:submit Returns: Array<Element(s)>
所有submit对象
:image Returns: Array<Element(s)>
所有image对象
:reset Returns: Array<Element(s)>
所有reset对象
:button Returns: Array<Element(s)>
所有button对象
:file Returns: Array<Element(s)>
所有file对象
:hidden Returns: Array<Element(s)>
所有看不到,或者hidden的对象
:enabled Returns: Array<Element(s)>
所有enabled状态的对象
:disabled Returns: Array<Element(s)>
所有disabled状态的对象
:checked Returns: Array<Element(s)>
checked的对象
:selected Returns: Array<Element(s)>
selected的对象
分享到:
评论

相关推荐

    jQuery Selectors Refcard

    ### jQuery Selectors Refcard #### 什么是 jQuery 选择器? jQuery 选择器是 jQuery 库中最核心的功能之一,它利用 CSS 熟悉的语法帮助网页开发者快速且准确地定位到文档对象模型(DOM)中的元素集合。通过理解并...

    jQuery Selectors(选择器)的使用(二、层次篇)

    在"jQuery Selectors(选择器)的使用(二、层次篇)"中,我们将探讨与元素层级相关的选择器,这些选择器帮助我们基于元素之间的关系来选取元素。 1. **后代选择器(Descendant Selector)** 后代选择器使用空格分隔两...

    jQuery-Selectors-源码.rar

    《jQuery Selectors 源码解析》 jQuery 是一个广泛使用的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理和动画制作。其中,选择器(Selectors)是jQuery的核心功能之一,它允许开发者以CSS样式的方式...

    jQuery.Essentials.

    We start off with a quick glance through the basics of JQuery, followed by the explanation of JQuery selectors, filters, and DOM element manipulation. After this, you will learn how events and ...

    jQuery Selectors(选择器)的使用(四-五、内容篇可见性篇)

    本系列文章分为:基本篇、层次篇、简单篇、内容篇、可见性篇、属性篇、子元素篇、表单篇、表单对象属性篇共9篇文章。 本篇讲解::contains(text),:empty,...jQuery-Selectors-4 .div { width:95%; margin-left:15px;

    jQuery Selectors(选择器)的使用(六、属性篇)

    本文是关于jQuery框架选择器(Selectors)使用方法的系列文章的第六部分——属性篇。在本节中,我们将学习jQuery选择器的属性过滤方法,包括如何根据属性值的不同条件来选取HTML元素。这类选择器非常适用于对具有...

    jQuery Selectors(选择器)的使用(一、基本篇)

    我的学习方法:先入门,后进阶!本系列文章分为:基本篇、...jQuery-Selectors .div { width:95%; margin-left:15px; margin-top:15px; margin-right:15px; padding-left:5px; padding-top:5px; padding-botto

    jQuery Selectors(选择器)的使用(七、子元素篇)

    jQuery选择器是jQuery库中一个非常强大的特性,它允许开发者以非常高效和简洁的方式选取DOM元素集合。选择器可以看作是用特定的规则来查找页面元素的方式。在本系列文章中,将会逐一介绍和演示jQuery选择器的使用...

    jQuery Selectors(选择器)的使用(九、表单对象属性篇)

    jQuery的选择器是它的一个核心特性,允许开发者以声明的方式选取文档中的元素,从而对它们进行操作。在本篇文章中,将针对表单元素属性选择器进行详细介绍,这是整个系列的第九篇,也是最后一个关于表单对象属性的...

    jQuery Selectors(选择器)的使用(四-五、内容篇&amp;可见性篇)

    在本文中,我们将深入探讨jQuery选择器在内容篇和可见性篇的使用方法。jQuery选择器是操作DOM元素的强大工具,它允许开发者以高效和简洁的方式选择页面元素。在学习选择器之前,建议先掌握jQuery的基础知识,因为...

    Manning jQuery in Action.pdf

    - **Custom jQuery Selectors**: jQuery also provides methods for creating custom selectors that can match elements based on more complex conditions. **5. Generating New HTML (Chapter 2.2)** Creating ...

    经典的jQuery选择器应用例子

    在JavaScript的世界里,jQuery是一个非常流行且...在jQuerySelectors压缩包中,你将会找到这些选择器的实例代码,通过实际运行和调试,你将更深入地理解它们的工作原理和应用场景。动手实践,是掌握这些知识点的关键。

    JQUERY学习笔记.doc

    更多选择器信息可参考 [jQuery Selectors文档](http://docs.jquery.com/Selectors)。 ### 事件处理 (Event Handling) jQuery对事件处理进行了封装,使得绑定和解绑事件更加简单。常见的事件绑定方法有: 1. `.on...

    jquery基础解答和学习

    jqueryselectors. 基础入门

Global site tag (gtag.js) - Google Analytics