[每日一题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 文件中,其中包含了所有 ...
随机推荐
- qt-solutions提供了8个开源项目
其实这是官方提供的源代码,至于为什么会另建项目,而没有整合到QT项目里去,我猜可能有2个原因: 1. 这几个项目本身不完善,并且也不是QT项目的核心,因此没有必要花精力去完善 2. 一定程度上可以维护 ...
- Android 解决listview中checkBox错位选择
假如ListView,分成2页(或者设置数据可以纵向拉,可隐藏),每页3条数据,每个Listview的Item 里面有个checkBox,现在,当我选择第一页的前两天数据,翻到第二页,竟然第二页后两条 ...
- js中()()问题
var aa=function(){}(); var bb=(function(){})(); 今天被问到这个问题,这段js有撒区别. 总结一下,两个函数都是立即执行的意思.但是不同之处是执行的顺序, ...
- COJ 0358 xjr考考你数据结构(根号3)线段树区间修改
xjr考考你数据结构(根号3) 难度级别:C: 运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 请你编写一个数据结构,完成以下功能: 1)求出第 ...
- [LeetCode] Course Schedule I (207) & II (210) 解题思路
207. Course Schedule There are a total of n courses you have to take, labeled from 0 to n - 1. Some ...
- SQL Server 启用 xp_cmdshell 与bcp 使用
启用 xp_cmdshell 1: sp_configure 'show advanced options',1 2: reconfigure 3: GO 4: 5: sp_configure 'xp ...
- EF并发性能文章
http://www.cnblogs.com/farb/p/ConcurrencyAndTransctionManagement.html
- Android学习之路——Android四大组件之activity(二)数据的传递
上一篇讲了activity的创建和启动,这一篇,我们来讲讲activity的数据传递 activity之间的数据传递,这里主要介绍的是activity之间简单数据的传递,直接用bundle传递基本数据 ...
- 关于Javascript语言中this关键字(变量)的用法
最近很多 Javascript初学者朋友总在问: Javascript 的this 关键字的用法.我在这里索性总结一下 this关键字的用法. this 关键字是面向对象编程语言中的一个重要概念!在J ...
- [React] React Router: activeStyle & activeClassName
react-router provides two props for setting a specific style on a Link component whose path matches ...







