详解jQuery的选择器
1.基本选择器
基本选择器是jQuery中最常用的选择器,也是最简单的选择器,它通过元素id、class和标签名等来查找DOM对象。在网页中,每个id名称只能使用一次,class允许重复使用。
♠ #id
描述:根据给定的id匹配一个元素。
返回:单个元素。
示例:$("#test")选取id为test的元素。
♠ .class
描述:根据给定的类名匹配元素。
返回:集合元素。
示例:$(".test")选取class为test的元素。
♠ element
描述:根据给定的元素名匹配元素。
返回:集合元素。
示例:$("p")选取所有的<p>元素。
♠ *
描述:匹配所有元素。
返回:集合元素。
示例:$("*")选取所有的元素。
♠ selector1,selector2,......,selectorN
描述:将每一个选择器匹配到的元素合并后一起返回。
返回:集合元素。
示例:$("div,span,p.myClass")选取所有的<div>,<span>和拥有class为myClass的<p>标签的一组元素。
2.层次选择器
如果想通过DOM元素之间的层次关系来获取特定元素,例如后代元素,子元素,相邻元素合同辈元素等,那么层次是一个非常好的选择。
♠ $("ancestor descendant")
描述:选取ancestor元素里的所有descendant(后代)元素。
返回:集合元素。
示例:$("div span")选取<div>里的所有的<span>元素。
♠ $("parent>child")
描述:选取parent元素下的child(子)元素,与$("ancestor descendant") 的区别在于前者($("parent>child"))仅选择符合的子元素(符合的孙元素不选定),后者选择所有符合的后代元素。
返回:集合元素。
示例:$("div>span")选取<div>元素下元素名是<span>的子元素。
♠ $("prev+next")
描述:选取紧接在prev元素后的next元素。
返回:集合元素。
示例:$(".one+div")选取class为one的下一个<div>同辈元素。
♠ $("prev~siblings")
描述:选取prev元素之后的所有siblings元素。
返回:集合元素。
示例:$("#two~div")选取id为two的元素后面的所有<div>同辈元素。
在层次选择器中,第1个和第2个选择器比较常用,而后面两个因为在jQuery里可以用更加简单的方法代替,所以试用的几率相对少些。
可以使用next()方法来代替$('prev+next')选择器。$(".one+div"); 等价于 $(".one").next("div");
可以使用nextAll()方法来代替$('prev~siblings')选择器。$("#prev~div");等价于$(“”#prev“”).nextAll("div");
siblings()方法与$("#prev~div")选择器的比较:$("#prev~div")只选择"prev"后面的<div>元素。siblings()方法与前后位置无关,只要是同辈节点就都能匹配。
3.过滤选择器
基本过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选选出所需的DOM元素,过滤规则与CSS中的伪类选择器语法相同,都以一个冒号(:)开头。按照不同的过滤规则,过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。
♠ :first
描述:选取第一个元素。
返回:单个元素。
示例:$("div:first")选取所有<div>元素中第一个<div>元素。
♠ :last
描述:选取最后一个元素。
返回:单个元素。
示例:$("div:last")选取所有<div>元素中最后一个<div>元素。
♠ :not(selector)
描述:去除所有与给定选择器匹配的元素。
返回:集合元素。
示例:$("input:not(.myClass)")选取class不是myClass的<input>元素。
♠ :even
描述:选取索引是偶数的所有元素,索引从0开始。
返回:集合元素。
示例:$("input:even")选取索引是偶数的<input>元素。
♠ :odd
描述:选取索引是奇数的所有元素,索引从0开始。
返回:集合元素。
示例:$("input:odd")选取索引是奇数的<input>元素。
♠ :eq(index)
描述:选取索引等于index的元素(index从0开始)。
返回:单个元素。
示例:$("input:eq(1)")选取索引等于1的<input>元素。
♠ :gt(index)
描述:选取索引大于index的元素(index从0开始)。
返回:集合元素。
示例:$("input:gt(1)")选取索引大于1的<input>元素(注:大于1,而不包括1)。
♠ :lt(index)
描述:选取索引小于index的元素(index从0开始)。
返回:集合元素。
示例:$("input:lt(1)")选取索引小于1的<input>元素(注:小于1,而不包括1)。
♠ :header
描述:选取所有的标题元素,如h1,h2,h3等。
返回:集合元素。
示例:$(":header")选取网页中所有的<h1>、<h2>、<h3>...
♠ :animated
描述:选取当前正在执行动画的所有元素。
返回:集合元素。
示例:$("div:animated")选取正在执行动画的<div>元素。
♠ :focus
描述:选取当前获取焦点的元素。
返回:集合元素。
示例:$(":focus")选取当前获取焦点的元素。
内容过滤选择器
内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。
♠ :contains(text)
描述:选取含有文本内容为"text"的元素。
返回:集合元素。
示例:$("div:contains('我')")选取含有文本“我”的<div>元素。
♠ :empty
描述:选取不包含子元素或者文本的空元素。
返回:集合元素。
示例:$("div:empty")选取不包含子元素(包含文本元素)的<div>空元素。
♠ :has(selector)
描述:选取含有选择器所匹配元素的元素。
返回:集合元素。
示例:$("div:has(p)")选取含有<p>元素的<div>元素。
♠ :parent
描述:选取含有子元素或者文本的元素。
返回:集合元素。
示例:$("div:parent")选取拥有子元素(包括文本元素)的<div>元素。
可见性过滤选择器
可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。
♠ :hidden
描述:选取所有不可见的元素。
返回:集合元素。
示例:$(":hidden")选取所有不可见的元素。包括<input type="hidden"/>,<div style="display:none;">和<div style="visibility:hidden;">等元素。如果只想选取<input>元素,可以使用$("input:hidden")。
♠ :visible
描述:选取所有可见的元素。
返回:集合元素。
示例:$("div:visible")选取所有可见的<div>元素。
属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。
♠ [attribute]
描述:选取拥有此属性的元素。
返回:集合元素。
示例:$("div[id]")选取拥有属性id的元素。
♠ [attribute=value]
描述:选取属性的值为value的元素。
返回:集合元素。
示例:$("div[title=test]")选取属性title为"test"的<div>元素。
♠ [attribute!=value]
描述:选取属性的值不等于value的元素。
返回:集合元素。
示例:$("div[title!=test]")选取属性title不等于"test"的<div>元素。(注:没有属性title的<div>元素也会被选取)
♠ [attribute^=value]
描述:选取属性的值以value开始的元素。
返回:集合元素。
示例:$("div[title^=test]")选取属性title以"test"开始的<div>元素。
♠ [attribute$=value]
描述:选取属性的值以value结束的元素。
返回:集合元素。
示例:$("div[title$=test]")选取属性title以"test"结束的<div>元素。
♠ [attribute*=value]
描述:选取属性的值含有value的元素。
返回:集合元素。
示例:$("div[title*=test]")选取属性title含有"test"的<div>元素。
♠ [attribute|=value]
描述:选取属性等于给定字符串或以该字符串为前缀(该字符串后跟一个连字符“-”)的元素。
返回:集合元素。
示例:$("div[title|='en']")选取属性title等于en或以en为前缀(该字符串后跟一个连字符‘-’)的元素。
♠ [attribute~=value]
描述:选取属性用空格分隔的值中包含一个给定的值的元素。
返回:集合元素。
示例:$("div[title~='uk']")选取属性title用空格分隔的值中包含字符uk的元素。
♠ [attribute1][attribute2][attributeN]
描述:用属性选择器合并成一个复古属性选择器,满足多个条件。每选择一次,缩小一次范围。
返回:集合元素。
示例:$("div[id][title$='test']")选取拥有属性id,并且属性title以"test"结束的<div>元素。
子元素过滤选择器
♠ :nth-child(index/even/odd/equation)
描述:选取每个父元素下的第index个子元素或者奇偶元素。(index从1算起)
返回:集合元素。
示例::eq(index)只匹配到一个元素,而:nth-child将为每一个父元素匹配子元素,并且:nth-child(index)的index是从1开始的,而:eq(index)是从0开始的。
♠ :first-child
描述:选取每个父元素的第1个子元素
返回:集合元素。
示例::first只返回单个元素,而:first-child选择符将为每个父元素匹配第1个子元素。例如$("ul li:first-child");选取每个<ul>中第1个<li>元素。
♠ :last-child
描述:选取每个父元素的最后1个子元素
返回:集合元素。
示例::last只返回单个元素,而:last-child选择符将为每个父元素匹配最后1个子元素。例如$("ul li:last-child");选取每个<ul>中最后1个<li>元素。
♠ :only-child
描述:如果某个元素是它父元素中唯一的子元素,那么将会被匹配。如果父元素中含有其他元素,则不会匹配。
返回:集合元素。
示例:$("ul li:only-child")在<ul>中选取是唯一子元素的<li>元素。
表单对象属性过滤选择器
主要是对所选择的表单元素进行过滤,例如选择被选中的下拉框,多选框等元素。
♠ :enable
描述:选取所有可用元素。
返回:集合元素。
示例:$("#form1 :enable");选取id为"form1"的表单内的所有可用元素。
♠ :disabled
描述:选取所有不可用元素。
返回:集合元素。
示例:$("#form2 :disabled")选取id为“form2”的表单内的所有不可用元素。
♠ :checked
描述:选取所有被选中的元素(单选框,复选框)。
返回:集合元素。
示例:$("input:checked");选取所有被选中的<input>元素。
♠ :selected
描述:选取所有被选中的选项元素(下拉列表)。
返回:集合元素。
示例:$("select :selected");选取所有被选中的选项元素。
4.表单选择器
为了使用户能够更加灵活的操作表单,jQuery中专门加入了表单选择器。利用这个选择器,能极其方便的获取到表单的某个或某类型的元素。
♠ :input
描述:选取所有<input>、<textarea>、<select>和<button>元素。
返回:集合元素。
示例:$(":input")选取所有<input>、<textarea>、<select>和<button>元素。
♠ :text
描述:选取所有的单行文本框。
返回:集合元素。
示例:$(":text")选取所有的单行文本框。
♠ :password
描述:选取所有的密码框。
返回:集合元素。
示例:$(":password")选中所有的密码框。
♠ :radio
描述:选取所有的单选框。
返回:集合元素。
示例:$(":radio")选取所有的单选框。
♠ :checkbox
描述:选取所有的多选框。
返回:集合元素。
示例:$(":checkbox")选取所有的复选框。
♠ :submit
描述:选取所有的提交按钮。
返回:集合元素。
示例:$(":submit")选取所有的提交按钮。
♠ :image
描述:选取所有的图像按钮。
返回:集合元素。
示例:$(:image)选取所有的图像按钮。
♠ :reset
描述:选取所有的重置按钮。
返回:集合元素。
示例:$(":reset")选取所有的重置按钮。
♠ :button
描述:选取所有的按钮。
返回:集合元素。
示例:$(":button")选取所有的按钮。
♠ :file
描述:选取所有的上传域。
返回:集合元素。
示例:$(":file")选取所有的上传域。
♠ :hidden
描述:选取所有不可见元素。
返回:集合元素。
示例:$(":hidden")选取所有不可见元素(已经在不可见性过滤选择器中提过)。
详解jQuery的选择器的更多相关文章
- jQuery:详解jQuery中的事件(二)
上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...
- $.ajax()方法详解 jquery
$.ajax()方法详解 jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Str ...
- jQuery Validate验证框架详解(jquery.validate.min.js)
原博客 jQuery Validate验证框架详解 jQuery校验官网地址:https://jqueryvalidation.org/ 一.导入js库 <script type="t ...
- 详解jquery插件中(function ( $, window, document, undefined )的作用。
1.(function(window,undefined){})(window); Q:(function(window,undefined){})(window);中为什么要将window和unde ...
- JavaScript事件详解-jQuery的事件实现(三)
正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...
- jQuery的deferred对象详解 jquery回调函数
http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html jQuery的 ...
- 瀑布流布局使用详解——JQuery插件Isotope(动态实现子项目筛选)
瀑布流布局,听起来听牛逼的样子,其实就是简单的子元素筛选功能.不过这一功能在网站页面布局当中还是很常用的,特别是在电商网站中 经常会有点一个钮筛选,然后页面的子元素刷的以下变了样.接下来,我们先简单介 ...
- 详解jQuery的$符号和init函数
本文所有代码,出自jQuery.1.5.2,为方便理解,引入类的概念,虽然jQuery不是基于面向对象思想. jQuery是现在最流行的JavaScript框架, $是其中最常见的符号,已经在jQue ...
- 详解jQuery中 .bind() vs .live() vs .delegate() vs .on() 的区别
转载自:http://zhuzhichao.com/2013/12/differences-between-jquery-bind-vs-live/ 我见过很多开发者很困惑关于jQuery中的.bin ...
随机推荐
- android脱壳之DexExtractor原理分析
导语: 上一篇我们分析android脱壳使用对dvmDexFileOpenPartial下断点的原理,使用这种方法脱壳的有2个缺点: 1. 需要动态调试 2. 对抗反调试方案 为了提高工作效率, ...
- iebackground+icon图标兼容
<!DOCTYPE > <html> <head> <title>zepto</title> <meta name="nam ...
- Ant Design 使用小结
最近公司做了一个系统,因为页面涉及的表单交互非常多,如果使用之前的 Node + Express 的开发模式效率是非常低的,因此经过考虑,最后决定使用 Node + React 的开发模式,并且使用了 ...
- HTML页面为什么设置了UTF-8仍然中文乱码
如题,其实问题很简单,在用EditPlus写html页面的时候,发现设置为UTF-8的时候仍然出现了乱码,这是一个很奇怪的问题,而且我完全考虑了浏览器的解析问题,将title放在了了meta标签之后, ...
- L3-003. 社交集群(并查集)
L3-003. 社交集群 时间限制 1000 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 在社交网络平台注册时,用户通常会输入自己的兴趣爱好, ...
- 【数据结构】bzoj1455罗马游戏
Description 罗马皇帝很喜欢玩杀人游戏. 他的军队里面有n个人,每个人都是一个独立的团.最近举行了一次平面几何测试,每个人都得到了一个分数. 皇帝很喜欢平面几何,他对那些得分很低的人嗤之以鼻 ...
- [洛谷P2127] 序列排序
洛谷题目链接:序列排序 题目描述 小C有一个N个数的整数序列,这个序列的中的数两两不同.小C每次可以交换序列中的任意两个数,代价为这两个数之和.小C希望将整个序列升序排序,问小C需要的最小代价是多少? ...
- 【BZOJ2253】纸箱堆叠 [CDQ分治]
纸箱堆叠 Time Limit: 30 Sec Memory Limit: 256 MB[Submit][Status][Discuss] Description P 工厂是一个生产纸箱的工厂. 纸 ...
- codevs1063 合并果子 优先队列(小根堆)
题目传送门 这道题很容易想到优先把两堆重量最小的合并比较优 然后乱搞一下就可以啦 #include<cstdio> #include<cstring> #include< ...
- [BZOJ2502]清理雪道解题报告|带下界的最小流
滑雪场坐落在FJ省西北部的若干座山上. 从空中鸟瞰,滑雪场可以看作一个有向无环图,每条弧代表一个斜坡(即雪道),弧的方向代表斜坡下降的方向. 你的团队负责每周定时清理雪道.你们拥有一架直升飞机,每次飞 ...