jQuery选择器--简洁又全面(转)
原文:http://www.cr173.com/html/21124_1.html
选择器是jQuery的根基,在jQuery中,对事件处理、遍历DOM和Ajax操作都依赖于选择器。jQuery选择器完全继承了CSS的风格。
jQuery选择器可简单分为基本选择器、层次选择器、过滤选择器、表单选择器。下面通过表格进行一一介绍。
1.基本选择器
选择器 | 描 述 | 返 回 | 示 例 |
---|---|---|---|
#id | 匹配给定的id | 单个元素 | $(“header”) |
.class | 匹配给定的类名 | 集合元素 | $(“.test”) |
E | 匹配给定的标签名 | 集合元素 | $(“div”) |
* | 匹配所有元素 | 集合元素 | $(“*’) |
E, .class, E… | 匹配给定的集合 | 集合元素 | $(“span, .tips”) |
2.层次选择器
选择器 | 描 述 | 返 回 | 示 例 |
---|---|---|---|
$(“ancestor descendant”) | 匹配ancestor里的所有 descendant(后代)元素 |
集合元素 | $(“body div”) |
$(“parent>child”) | 匹配parent下的所有直接 child(子)元素 |
集合元素 | $(“div>span”) |
$(“prev+next”) | 匹配紧接在prev后的 next元素 |
集合元素 | $(“.error+span”) |
$(“prev~siblings”) | 匹配prev后的所有 siblings元素 |
集合元素 | $(“span~a”) |
3.过滤选择器
3.1 基本过滤选择器
选择器 | 描 述 | 返 回 | 示 例 |
---|---|---|---|
:first | 匹配第一个元素 | 单个元素 | $(“div:first”) |
:last | 匹配最后一个元素 | 单个元素 | $(“span:last”) |
:even | 匹配索引是偶数的元素 索引从0开始 |
集合元素 | $(“li:even”) |
: odd | 匹配索引是奇数的元素 索引从0开始 |
集合元素 | $(“li:odd”) |
:eq(index) | 匹配索引等于index的元 素(索引从0开始) |
单个元素 | $(“input:eq(2)”) |
:gt(index) | 匹配索引大于index的元 素(索引从0开始) |
集合元素 | $(“input:gt(1)”) |
:lt(index) | 匹配索引小于index的元 素(索引从0开始) |
集合元素 | $(“input:lt(5)”) |
:header | 匹配所有h1,h2…等 标题元素 |
集合元素 | $(“:header”) |
:animated | 匹配所有正在执行 动画的元素 |
集合元素 | $(“div:animated”) |
3.2 内容过滤选择器
选择器 | 描 述 | 返 回 | 示 例 |
---|---|---|---|
:contains(text) | 匹配含有文本内容text 的元素 |
集合元素 | $(“p:contains(今天)”) |
:empty | 匹配不含子元素或 文本元素的空元素 |
集合元素 | $(“p:empty”) |
:has(selector) | 匹配包含selector元素 的元素 |
集合元素 | $(“div:has(span)”) |
:parent | 匹配含有子元素或文本 的元素 |
集合元素 | $(“div:parent”) |
3.3 可见性过滤选择器
选择器 | 描 述 | 返 回 | 示 例 |
---|---|---|---|
:hidden | 匹配所有不可见 的元素 |
集合元素 | $(“:hidden”) |
:visible | 匹配所有可见元素 | 集合元素 | $(“:visible”) |
3.4 属性过滤选择器
选择器 | 描 述 | 返 回 | 示 例 |
---|---|---|---|
[attr] | 匹配拥有此属性 的元素 |
集合元素 | $(“img[alt]“) |
[attr=value] | 匹配属性值为value 的元素 |
集合元素 | $(“a[title=test]“) |
[attr!=value] | 匹配属性值不等于 value的元素 |
集合元素 | $(“a[title!=test]“) |
[attr^=value] | 匹配属性值以value 开头的元素 |
集合元素 | $(“img[alt^=welcome]“) |
[attr$=value] | 匹配属性值以value 结尾的元素 |
集合元素 | $(“img[alt$=last]“) |
[attr*=vlaue] | 匹配属性值中含有 value的元素 |
集合元素 | $(“div[title*=test]“) |
[attr1][attr2]… | 通过多个属性 进行匹配 |
集合元素 | $(“div[id][title*=test]“) |
3.5 子元素过滤选择器
选择器 | 描 述 | 返 回 | 示 例 |
---|---|---|---|
:nth-child | 匹配每个父元素下的 第index个子元素 索引从1开始 |
集合元素 | $(“div:nth-child(2)”) |
:first-child | 匹配每个父元素的 第一个子元素 |
集合元素 | $(“div:first-child”) |
:last-child | 匹配每个父元素的 最后一个子元素 |
集合元素 | $(“div:last-child”) |
: only-child | 某元素是它父元素中 的唯一的子元素 则匹配它 |
集合元素 | $(“div:only-child”) |
3.6 表单对象属性过滤选择器
选择器 | 描 述 | 返 回 | 示 例 |
---|---|---|---|
:enabled | 匹配所有可用元素 | 集合元素 | $(“form :enabled”) |
:disabled | 匹配所有不可用 的元素 |
集合元素 | $(“form :disabled”) |
:checked | 匹配所有被选中的元素 (含单选框,复选框) |
集合元素 | $(“input:checked”) |
:selected | 匹配所有被选中的 选项元素 |
集合元素 | $(“select :selected”) |
4.表单选择器
选择器 | 描 述 | 返 回 | 示 例 |
---|---|---|---|
:input | 匹配所有input, textarea, select, button元素 |
集合元素 | $(“input”) |
:text | 匹配所有文本框 | 集合元素 | $(“:text”) |
:password | 匹配所有密码框 | 集合元素 | $(“:password”) |
:radio | 匹配所有单选框 | 集合元素 | $(“:radio”) |
:checkbox | 匹配所有所有多选框 | 集合元素 | $(“:checkbox”) |
:submit | 匹配所有提交按钮 | 集合元素 | $(“:submit”) |
:image | 匹配所有图像按钮 | 集合元素 | $(“:image”) |
:reset | 匹配所有重置按钮 | 集合元素 | $(“:reset”) |
:button | 匹配所有按钮 | 集合元素 | $(“:button”) |
:file | 匹配所有上传域 | 集合元素 | $(“:file”) |
jQuery选择器--简洁又全面(转)的更多相关文章
- JQuery 选择器
选择器是JQuery的根基,在JQuery中,对事件的处理,遍历DOM和AJAX操作都依赖于选择器.如果能够熟练地使用选择器,不仅能简化代码,而且还可以事半功倍. JQuery选择器的优势 1.简洁的 ...
- 《锋利的jQuery(第2版)》笔记-第2章-jQuery选择器
选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.熟练使用选择器,不仅可以简化代码,而且可以达到事半功倍的效果. 2.1 jQuery选择器是什么 1. ...
- 在.NET中使用JQuery 选择器精确提取网页内容
1. 前言 相信很多人做开发时都有过这样的需求:从网页中准确提取所需的内容.思前想后,方法无非是以下几种:(本人经验尚浅,有更好的方法还请大家指点) 1. 使用正则表达式匹配所需元素.(缺点:同类型的 ...
- 我人生中的jQuery选择器
Jquery选择器 一.Jquery选择器简介 JavaScript只是一种运行于客户端,可以被客户端浏览器解析的一段代码.它和java没有任何关系.JavaScript简称JS.jQuery是对JS ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- jQuery选择器(一)
晚上闲着没事,正好用来整理下jQuery的选择器,毕竟没有总结就不算学习嘛. 首先,对事件处理.遍历DOM和Ajax操作,都依赖于选择器. 1.CSS选择器 要使用某个HTML元素,就先要找到它,而c ...
- jQuery选择器和DOM操作——《锋利的jQuery》(第2版)读书笔记1
第1章 认识jQuery jQuery有以下优势: 轻量级: 强大的选择器: 出色的DOM操作的封装: 可靠的事件处理机制: 完善的Ajax: 不污染顶级变量: 出色的浏览器兼容性: 链式操作方式: ...
- 浅谈jquery选择器
首先来说说jquery选择器的优势: 1.简洁的写法 2.支持css1.0到3.0选择器 3.完善的处理机制. 再来说说分类: jquery选择器分为基本选择器.层次选择器.属性选择器.基本过滤选择 ...
- 【前端学习】【jQuery选择器】
jQuery选择器 jQuery选择器 本文内容引自于单东林<锋利的jQuery>,未经原作者准许,禁止以商业目的转载发布! 选择器是jQuery的根基,在jQuery中,对事件处 ...
随机推荐
- luogu2375 动物园 (kmp)
首先求出fail数组,如果没有不重叠的限制的话,我们可以在求fail的时候递推出个数cnt[i]=cnt[fail[i]]+1(这个cnt是算上自己本身==自己本身的) 然后如果是要求不重叠的话,就是 ...
- c# 16进制byte转成int
]; Ratedata=System.BitConverter.GetBytes(FreResultTBoxValue); 上面这个 FreResultTBoxValue 变量是int,系统中自带in ...
- Dist
Description 数据范围:\(1<=n<=10^5,1<=k<=18,1<=k_i<=10^7,\sum |s_i|<=3*10^5\) Soluti ...
- 【uoj428】普通的计数题
Portal --> uoj428 Solution 不会胖子的一个log正解qwq只能怂怂滴写分治了qwq 首先就是一个我想不到的转化qwq 我们将第\(i\)次操作加入的数看成一个编 ...
- RPC与RMI的区别
分布式项目按照以下发展经历了以下技术: CORBA: RMI:基于远程接口的调用 RMI-RROP:这是RMI与CORBA的结合,用在了EJB技术上,EJB留给世界上是优秀的理论和糟糕的架构. WEB ...
- 数学:莫比乌斯反演-GCD计数
Luogu3455:莫比乌斯反演进行GCD计数 莫比乌斯反演就是用来解决这一类问题的,通常f函数是要求的那个,F函数是显然的 这样利用F的结果就可以推出来f的结果 在计算结果的时候整除分快儿一下就可以 ...
- springboot(五):springboot整合shiro-登录认证和权限管理
http://z77z.oschina.io/ http://www.cnblogs.com/aqsunkai/category/982003.html https://www.cnblogs.com ...
- 【原创】when.js2.7.1源码解析
现在,用回调处理一些复杂的逻辑,显得代码臃肿,难于阅读,特别是异步,嵌套. 解决这样的问题,可以是之前所说的Backbone.Events的pubsub,或者是今天要说的when.js所实现的prom ...
- 关于Web安全的那些事(XSS攻击)
概述 XSS攻击是Web攻击中最常见的攻击方法之一,它是通过对网页注入可执行代码且成功地被浏览器执行,达到攻击的目的,形成了一次有效XSS攻击,一旦攻击成功,它可以获取用户的联系人列表,然后向联系人发 ...
- json转化数组
//json格式数据 $data = '[{ "F_ModuleId": "1", "F_ParentId": "0", ...