jQuery选择器继承自CSS的风格,可以通过jQuery选择器找出特定的DOM元素,在此基础上对该元素做相应处理。jQuery不仅支持简单的标签选择器、类选择器、id选择器,还针对表单状态、子元素、元素顺序提供相应的选择器。如果熟练运用,则事半功倍。但是有些事情复杂了之后,使用、记忆就都有了难度。经过分析总结,我把jQuery选择器分选择结果进一步过滤 、针对同级元素操作和针对子元素操作三大类,方便理解,具体细节如下。

最简单的选择器类型

标签选择器、类选择器、ID选择器

针对同辈元素

选择结果为同辈元素,可以继续添加选择器选择特定的同辈元素。

进一步过滤

在当前的选择结果的基础上,根据添加的过滤条件,更精细地筛选出相应元素。我把过滤条件分为:根据位置、根据内容、根据状态、根据属性几类。

根据位置

根据内容

根据属性

根据属性的选择器还有很多,可以选出属性不为某些值的元素、属性包含某些值的元素,在这里不再具体列出。

根据状态

针对后代元素

最简单

根据位置

注意:

1、返回的是单个元素还是集合元素,类似于$("div:first")带有“一个”字样的选择器返回的是一个元素,其他的选择器都返回了符合此条件的多个元素。

2、依据位置选择元素时,对选择结果进一步过滤时索引从0开始,对子元素进一步过滤时索引从1开始。

[每日一题jQuery] jQuery选择器总结:进一步过滤、同级操作、后代操作的更多相关文章

  1. jQuery常用选择器总结

    jQuery常用选择器总结: 我们都知道jQuery是JavaScript(JS)的框架,它的语法简单使用方便,被广大开发人员青睐.现在我就它常用的并且十分强大的选择器的方式,做一个总结.鉴于它的选择 ...

  2. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

  3. JQuery:选择器、动画、AJAX请求

    选择器 1.事件编程与动画效果 一个选择器可以在概念上理解为指针.借助与JQuery库中的选择器$,线程可以获取到界面元素的引用,从而可以调用 ready().click()方法把用户事件和动作方法关 ...

  4. jQuery学习笔记——jQuery常规选择器

    一.简单选择器在使用 jQuery 选择器时,我们首先必须使用“$()”函数来包装我们的 CSS 规则.而CSS 规则作为参数传递到 jQuery 对象内部后,再返回包含页面中对应元素的 jQuery ...

  5. jQuery 的选择器常用的元素查找方法

    jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...

  6. HTML 学习笔记 JQuery(选择器)

    学习前端也有一段时间了,今天终于进入到JQuery阶段了,对于新手来讲,JQuery的选择器类型之多 功能之强大实在不是一天两天能够记得完的.现在,就采用边学边记录的方式.以后要是忘了的话,也有一个地 ...

  7. 什么是jquery $ jQuery对象和DOM对象 和一些选择器

    1什么是jQuery: jQuery就是将一些方法封装在一个js文件中.就是个js库 我们学习这些方法. 2为什么要学习jQuery: 原生js有以下问题: 1.兼容性问题2.代码重复3.DOM提供的 ...

  8. jQuery的选择器中的通配符总结

    1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']&quo ...

  9. JQuery(选择器、事件、DOM操作)

    一.jQuery简介 jQuery 是一个 JavaScript 库. jQuery 极大地简化了 JavaScript 编程. jQuery 库位于一个 JavaScript 文件中,其中包含了所有 ...

随机推荐

  1. Smarty 插件开发

    插件包含了: functions modifiers block functions compiler functions prefilters postfilters outputfilters r ...

  2. ETL工具框架开源软件

    http://www.oschina.net/project/tag/453/etl 开源ETL工具 Kettle Talend KETL CloverETL Apatar Scriptella ET ...

  3. 2014-07-31 ASP.NET的母版页使用

    今天是在吾索实习的第17天.我在这天主要负责系统的骨架的搭建.首当其冲,要用的知识点就是ASP.NET母版页的使用了. ASP.NET的母版页有两种:一种是MasterPage,最常用也是最普通的母版 ...

  4. HDOJ 1420 Prepared for New Acmer(DP)

    Problem Description 集训进行了将近2个礼拜,这段时间以恢复性训练为主,我一直在密切关注大家的训练情况,目前为止,对大家的表现相当满意,首先是绝大部分队员的训练积极性很高,其次,都很 ...

  5. ORACLE归档模式和非归档模式的利与弊

    转: 在Oracle数据库中,主要有两种日志操作模式,分别为非归档模式与归档模式.默认情况下,数据库采用的是非归档模式.作为一个合格的数据库管理员,应当深入了解这两种日志操作模式的特点,并且在数据库建 ...

  6. Javascript:浮动的导航条

    代码主体及说明 Javascript部分: /** * @函数名:flexScroll * @功能:滚动超出一定高度,指定元素悬浮 * @两个参数:target_id:目标元素id;topEle:限定 ...

  7. Baidu与Google地图API初探

    前天周六,有个好友过来玩,他说想在他的站点中加入地图导航模块,但不知道选择哪个第三方Map API 在网上查了下Baidu.Google.QQ和MapBar等4种Map API(都是採用JS开放API ...

  8. [React] React Router: Redirect

    The Redirect component in react-router does exactly what it sounds like. It allows us to redirect fr ...

  9. C#调用R语言输出图片

    参考:http://rdotnet.codeplex.com/documentation   REngine.SetEnvironmentVariables(); REngine engine = R ...

  10. 输入内容, 列出可选的项: QComboBox

    #include "widget.h" #include "ui_widget.h" #include <QtGui/QCompleter> #in ...