[每日一题jQuery] jQuery选择器总结:进一步过滤、同级操作、后代操作
jQuery选择器继承自CSS的风格,可以通过jQuery选择器找出特定的DOM元素,在此基础上对该元素做相应处理。jQuery不仅支持简单的标签选择器、类选择器、id选择器,还针对表单状态、子元素、元素顺序提供相应的选择器。如果熟练运用,则事半功倍。但是有些事情复杂了之后,使用、记忆就都有了难度。经过分析总结,我把jQuery选择器分选择结果进一步过滤 、针对同级元素操作和针对子元素操作三大类,方便理解,具体细节如下。
最简单的选择器类型
标签选择器、类选择器、ID选择器
针对同辈元素
选择结果为同辈元素,可以继续添加选择器选择特定的同辈元素。
进一步过滤
在当前的选择结果的基础上,根据添加的过滤条件,更精细地筛选出相应元素。我把过滤条件分为:根据位置、根据内容、根据状态、根据属性几类。
根据位置
根据内容
根据属性
根据属性的选择器还有很多,可以选出属性不为某些值的元素、属性包含某些值的元素,在这里不再具体列出。
根据状态
针对后代元素
最简单
根据位置
注意:
1、返回的是单个元素还是集合元素,类似于$("div:first")带有“一个”字样的选择器返回的是一个元素,其他的选择器都返回了符合此条件的多个元素。
2、依据位置选择元素时,对选择结果进一步过滤时索引从0开始,对子元素进一步过滤时索引从1开始。
[每日一题jQuery] jQuery选择器总结:进一步过滤、同级操作、后代操作的更多相关文章
- jQuery常用选择器总结
jQuery常用选择器总结: 我们都知道jQuery是JavaScript(JS)的框架,它的语法简单使用方便,被广大开发人员青睐.现在我就它常用的并且十分强大的选择器的方式,做一个总结.鉴于它的选择 ...
- jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax
jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...
- JQuery:选择器、动画、AJAX请求
选择器 1.事件编程与动画效果 一个选择器可以在概念上理解为指针.借助与JQuery库中的选择器$,线程可以获取到界面元素的引用,从而可以调用 ready().click()方法把用户事件和动作方法关 ...
- jQuery学习笔记——jQuery常规选择器
一.简单选择器在使用 jQuery 选择器时,我们首先必须使用“$()”函数来包装我们的 CSS 规则.而CSS 规则作为参数传递到 jQuery 对象内部后,再返回包含页面中对应元素的 jQuery ...
- jQuery 的选择器常用的元素查找方法
jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...
- HTML 学习笔记 JQuery(选择器)
学习前端也有一段时间了,今天终于进入到JQuery阶段了,对于新手来讲,JQuery的选择器类型之多 功能之强大实在不是一天两天能够记得完的.现在,就采用边学边记录的方式.以后要是忘了的话,也有一个地 ...
- 什么是jquery $ jQuery对象和DOM对象 和一些选择器
1什么是jQuery: jQuery就是将一些方法封装在一个js文件中.就是个js库 我们学习这些方法. 2为什么要学习jQuery: 原生js有以下问题: 1.兼容性问题2.代码重复3.DOM提供的 ...
- jQuery的选择器中的通配符总结
1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']&quo ...
- JQuery(选择器、事件、DOM操作)
一.jQuery简介 jQuery 是一个 JavaScript 库. jQuery 极大地简化了 JavaScript 编程. jQuery 库位于一个 JavaScript 文件中,其中包含了所有 ...
随机推荐
- Smarty 插件开发
插件包含了: functions modifiers block functions compiler functions prefilters postfilters outputfilters r ...
- ETL工具框架开源软件
http://www.oschina.net/project/tag/453/etl 开源ETL工具 Kettle Talend KETL CloverETL Apatar Scriptella ET ...
- 2014-07-31 ASP.NET的母版页使用
今天是在吾索实习的第17天.我在这天主要负责系统的骨架的搭建.首当其冲,要用的知识点就是ASP.NET母版页的使用了. ASP.NET的母版页有两种:一种是MasterPage,最常用也是最普通的母版 ...
- HDOJ 1420 Prepared for New Acmer(DP)
Problem Description 集训进行了将近2个礼拜,这段时间以恢复性训练为主,我一直在密切关注大家的训练情况,目前为止,对大家的表现相当满意,首先是绝大部分队员的训练积极性很高,其次,都很 ...
- ORACLE归档模式和非归档模式的利与弊
转: 在Oracle数据库中,主要有两种日志操作模式,分别为非归档模式与归档模式.默认情况下,数据库采用的是非归档模式.作为一个合格的数据库管理员,应当深入了解这两种日志操作模式的特点,并且在数据库建 ...
- Javascript:浮动的导航条
代码主体及说明 Javascript部分: /** * @函数名:flexScroll * @功能:滚动超出一定高度,指定元素悬浮 * @两个参数:target_id:目标元素id;topEle:限定 ...
- Baidu与Google地图API初探
前天周六,有个好友过来玩,他说想在他的站点中加入地图导航模块,但不知道选择哪个第三方Map API 在网上查了下Baidu.Google.QQ和MapBar等4种Map API(都是採用JS开放API ...
- [React] React Router: Redirect
The Redirect component in react-router does exactly what it sounds like. It allows us to redirect fr ...
- C#调用R语言输出图片
参考:http://rdotnet.codeplex.com/documentation REngine.SetEnvironmentVariables(); REngine engine = R ...
- 输入内容, 列出可选的项: QComboBox
#include "widget.h" #include "ui_widget.h" #include <QtGui/QCompleter> #in ...







