《锋利的jQuery》笔记 第2章 jQuery选择器
2024-04-08 16:37:35
常见用法
$(’.demo’)： 按类搜索
$(’#demo’)：按ID搜索
优势
- 防止 undefined 错误
//假设当前网页中没有ID为id的元素，$('#id')只是返回一个简单的jQuery实例，后面的链式操作静默失败，
//绝不会发生错误，相反如果你使用document.getElementById('id')，则会返回undefined，后面无法进行链式操作
$('#id').css('color', 'red')
基本选择器
| 选择器 | 描述 | 示例 |
|---|---|---|
| #id | 根据id匹配一个元素 | $(’#id) 选择ID为id的单个元素 |
| .class | 根据给定的类名匹配元素 | $(’.text’) 选择所有class为text的所有元素 |
| element | 根据给定的元素名匹配元素 | $(‘p’) 选择所有的<p>元素 |
| * | 匹配所有元素 | $(’*’) 选择所有的元素 |
| selector1, selector2, …selectorN | 将每一个选择器匹配到的元素合并后一起返回 | $(‘div, span, p.myClass’) 选择所有<div>,<span>,以及class为myClass的p元素 |
层次选择器
| 选择器 | 描述 | 示例 |
|---|---|---|
| $(‘ancestor descendant’) | 选择ancestor元素里的所有descendant(后代)元素 | $(‘div span’)选择<div>里的所有的<span>元素 |
| $(‘parent > child’) | 选择parent元素下的直接子元素child | $(‘div>span’)选择<div>元素下的直接<span>子元素 |
| $(‘prev+next’) | 选择紧接在prev元素后的next元素 | $(’.one+div’)选择class为one的后面的兄弟元素<div> |
| $(‘prev ~ siblings’) | 选择prev元素之后的所有siblings元素 | $(’#two~div’)选择id为two的元素后面的所有<div>同辈元素 |
选择器与 jQuery中的等价方法
在jQuery中的源代码文件src\traversing.js中，可以看到如下几个方法：
jQuery.each( {parent: function( elem ) {var parent = elem.parentNode;return parent && parent.nodeType !== 11 ? parent : null;},....
上面这些方法就是用来遍历元素的，通常与层次选择器有关联，我们先来分析一下这些常用的方法是怎么使用的。
先来一个demo文件吧。
<div class="one" id="one" >id为one,class为one的div<div class="mini">class为mini</div>
</div><div class="one" id="two" title="test" >id为two,class为one,title为test的div.<div class="mini" title="other">class为mini,title为other</div><div class="mini" title="test">class为mini,title为test</div>
</div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"></div>
</div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
parent()方法
// 找到class是mini的所有元素的父元素
$('.mini').parent();
一共有4个父元素，都是div元素：
我们看一下parent()是怎么执行的：
//在这里把对应的方法全部添加到了jQuery.fn中去，也就是变成jQuery实例方法了
}, function( name, fn ) {jQuery.fn[ name ] = function( until, selector ) {//until，selector参数都是undefined，在jQuery.map()中会调用fn()函数，也就是我们文件中的// parent方法var matched = jQuery.map( this, fn, until );
在core.js中可以看到jQuery.map方法的实现：
// arg is for internal usage onlymap: function( elems, callback, arg ) {var length, value,i = 0,ret = [];// Go through the array, translating each of the items to their new valuesif ( isArrayLike( elems ) ) {length = elems.length;for ( ; i < length; i++ ) {// 就是针对当前jQuery实例$('.mini')中的每个网页元素遍历调用callback方法，其实也就是// parent()方法，并且把结果存储起来value = callback( elems[ i ], i, arg );看一下parent方法：
parent: function( elem ) {//很简单，直接调用元素的parentNode属性，如果类型不是DocumentFragment,就直接返回，否则返回nullvar parent = elem.parentNode;return parent && parent.nodeType !== 11 ? parent : null;
},
所以最后的操作结果就是4个div元素。
我们还可以加个过滤，比如只取parent中id为two的元素：
$('.mini').parent('#two');
结果只有一个：
这时候看一下parent()方法怎么执行的：
}, function( name, fn ) {//参数until为'#two', selector为undefinedjQuery.fn[ name ] = function( until, selector ) {var matched = jQuery.map( this, fn, until );// selector变成'#two'if ( name.slice( -5 ) !== "Until" ) {selector = until;}// 针对selector为"#two"，对结果进行过滤，这样就把4个结果变成了1个结果if ( selector && typeof selector === "string" ) {matched = jQuery.filter( selector, matched );}
parents()方法
这个方法是查找某个元素的所有祖先元素：
$('.mini').parents();
看一下结果，多了2个元素，分别是body, html元素：
parents实现如下：
parents: function( elem ) {//递归调用parentNode属性return dir( elem, "parentNode" );
},
// src\traversing\var\dir.js
export default function( elem, dir, until ) {var matched = [],truncate = until !== undefined;//只要父结点不是Document类型，而且结点类型是元素，就加入进来while ( ( elem = elem[ dir ] ) && elem.nodeType !== 9 ) {if ( elem.nodeType === 1 ) {if ( truncate && jQuery( elem ).is( until ) ) {break;}matched.push( elem );}}return matched;
}
你也可以传入参数，对结果进行再过滤。
上面两个方法只是抛砖引玉，这样你了解了上面方法的使用，其他方法的使用也就会了。
有些层次选择器可以找到对应的方法调用：
| 选择器 | 等价方法 |
|---|---|
| $(’.one + div’) | $(’.one’).next(‘div’) |
| $(’#prev~div’) | $(’#prev’).nextAll(‘div’) |
选择过滤器
基本过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| :first | 选取第1个元素 | 单个元素 | $(‘div:first’)选取所有<div>元素中的第1个<div>元素 |
| :last | 选择最后1个元素 | 单个元素 | $(‘div:last’)选取所有<div>元素中的最后1个<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>元素的<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的<div>元素 |
| [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的元素 |
| [attribute][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>中第一个<li>元素 |
| :last-child | 选取每个父元素的最后一个子元素 | 集合元素 | 同样，:last只返回单个元素，而:last-child选择符将为每个父元素匹配最后一个子元素。例如$(‘ul li:last-child’)选择每个<ul>中最后一个<li>元素 |
| :only-child | 如果某个元素是它父元素中惟一的子元素，那么将会被匹配。如果父元素中含有其他元素，则不会被匹配 | 集合元素 | $(‘ul li:only-child’)，在<ul>中选择是唯一子元素的<li>元素 |
表单对象属性过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| :enabled | 选取所有可用元素 | 集合元素 | $(’#form1 :enabled’)选择id为‘form1‘ 表单内的所有可用元素 |
| :disabled | 选取所有不可用元素 | 集合元素 | $(’#form2 :disabled’)选取id为’form2’的表单内的所有不可用元素 |
| :checked | 选取所有被选中的元素(单选框，复选框) | 集合元素 | $(‘input:checked’)选择所有被选中的<input>元素 |
| :selected | 选择所有被选中的选项元素(下拉列表) | 集合元素 | $(‘select option:selected’)选取所有被选中的选项元素 |
表单选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| :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》笔记 第2章 jQuery选择器相关推荐
- jQuery系列 第五章 jQuery框架动画特效
第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQ ...
- jQuery系列 第四章 jQuery框架的选择器
第四章 jQuery框架的选择器 4.1 jQuery选择器说明 jQuery 最核心的组成部分就是选择器引擎.它完全继承了 CSS 的风格,可以对 DOM 元 素的标签名.属性名.状态等进行快速准确 ...
- jQuery系列 第六章 jQuery框架事件处理
第六章 jQuery框架事件处理 JavaScript以事件驱动来实现页面的交互,其核心是以消息为基础,以事件来驱动.虽然利用传统的JavaScript事件处理方式也能够完成页面交互,但jQuery框 ...
- jQuery系列 第三章 jQuery框架操作CSS
第三章 jQuery框架操作CSS 3.1 jQuery框架的CSS方法 jQuery框架提供了css方法,我们通过调用该方法传递对应的参数,可以方便的来批量设置标签的CSS样式. 使用JavaScr ...
- 锋利的Jquery【读书笔记】 -- 第四章 jQuery中的事件和动画
锋利的Jquery读书笔记 第三章 jQuery中的DOM操作 jQuery中的事件 事件绑定 bind方法 合成事件 hover方法 toggle方法 事件冒泡 事件对象 停止事件冒泡 阻止默认行为 ...
- 【jQuery笔记Part3】01-jQuery-each遍历
each遍历 静态方法:jQuery.each(object, [callback]) 对象方法:$().each(callback) 遍历数组 javaScript 中的遍历数组 静态方法遍历数组 ...
- 锋利的jQuery第2版学习笔记8~11章
第8章,用jQuery打造个性网站 网站结构 文件结构 images文件夹用于存放将要用到的图片 styles文件夹用于存放CSS样式表,个人更倾向于使用CSS文件夹 scripts文件夹用于存放jQ ...
- 《锋利的jQuery》笔记 第1章 认识jQuery
jQuery是支持链式操作的,现在我们用jQuery来实现一个导航栏: ./css/default.css: /* reset */ body{margin:0;padding:0 0 12px 0; ...
- jQuery实战读书笔记（第一章至第四章）
2019独角兽企业重金招聘Python工程师标准>>> 第一章 jQuery 基础 1. 包装器 jQuery对包装器(Wrapper)或包装集(wrapped set)进行操作,即 ...
- jQuery笔记（锋利的jQuery）
知识: jQuery对象和DOM对象不是互通的 相互转换的方法: //jQuery转换DOM //法一:使用数组下标[index] var $cr=$("#cr"); //jQue ...
最新文章
- C++__conversion function,Non-explicit one argument constructor
- Racket 6.7最新版本：提供对Android App的支持及改进的REPL等等
- 实用的HTML5的上传图片方法
- 03-04 元素定位工具
- c# post 读取返回html_PHP GET与POST
- as 使用类模拟枚举类
- Visio安装与下载
- SQLServer 2008 r2 安装图解
- Java 猜单词游戏
- 资深HR告诉你到底怎么写一份好的简历（非常全面）
- 30岁 android,90后30岁倒计时
- Python无法打开.xlsx文件：xlrd.biffh.XLRDError: Excel xlsx file； not supported
- linux无线网卡速度慢,Linux如何解决英特尔无线网卡WiFi网速慢、WiFi蓝牙无法共存等问题...
- javaweb JAVA JSP水费管理系统JSP电费管理系统JSP缴费管理系统JSP水费缴费系统JSP水电费管理
- 微信域名防封跳转技术原理，微信域名防封的细节把控
- 河南南阳：筹备火热 卧龙岗文化园春节大庙会1月22日启幕
- 量化投资--技术篇(5) 投资法则
- IDEA新推出的优雅美观字体初体验（赏心悦目）——JetBrainsMono
- linux 性能测试 antutu,安兔兔“不诚实”？这三款跑分软件绝对值得一试！
- 诺基亚S40机型新手美化攻略