关于jQuery参考实例2.0 用jQuery选择元素


Posted in Javascript onApril 07, 2013

译自jQuery Cookbook (O'Reilly 2009) Chapter 2 Selecting Elements with jQuery, 2.0 Introduction

jQuery的核心是它的选择器引擎,其作用是从文档中通过名称、属性、状态等将元素筛选出来。由于CSS的广泛使用,在jQuery中采用CSS的选择器语法就成了很自然的选择。在支持绝大多数CSS1-3规范中的选择器之外,jQuery还增加了很多自定义的选择器来根据一些特殊的状态选择元素;与此同时,我们还可以自己编写选择器。

在文档中定位某个元素或者某些元素的最简单的方法,是使用jQuery封装函数和CSS选择器,比如:

jQuery('#content p a');
//选择所有#content元素内的p元素中的a元素

在选择好元素之后,就可以在这些元素上调用jQuery方法。比如,在所有选择的链接元素上添加selected的class属性:

jQuery('#content p a').addClass('selected');

jQuery提供了很多遍历DOM树的方法来帮助选择元素,比如next(),prev(),parent()等。这些方法接受一个选择器表达式作为其唯一的参数,从而对选择到的元素集进行过滤。因此,除了jQuery(…),CSS选择器还会在很多地方用到。

在构建选择器时,为了提升其性能,可以遵循一条法则:尽可能地简化选择器的编写。选择器字符串越复杂,jQuery进行处理的时间也就越长。jQuery内部使用了浏览器原生的DOM方法来选择元素,因此,直接用选择器来选择元素仅仅是一种抽象封装后的结果。直接使用选择器本身并无不妥,但是理解所写代码的执行性能这一点却非常重要。以下是一个过度使用选择器的例子:

jQuery('body div#wrapper div#content');

更精确的定位并不意味着代码的运行速度更快。上述选择器可以重写为:

jQuery('#content');

与之前的例子相比,该代码的作用相同,但却节省了不少性能开销。值得注意的是,有时我们可以通过指定选择器的上下文背景来进一步提升性能。


Javascript 相关文章推荐
日期函数扩展类Ver0.1.1
Sep 07 Javascript
Angular中的Promise对象($q介绍)
Mar 03 Javascript
jquery插件hiAlert实现网页对话框美化
May 03 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
Aug 24 Javascript
jquery图片轮播特效代码分享
Apr 20 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
Sep 20 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
Jun 19 Javascript
vue+vue-validator 表单验证功能的实现代码
Nov 13 Javascript
利用Node.js检测端口是否被占用的方法
Dec 07 Javascript
Layui Form 自定义验证的实例代码
Sep 14 Javascript
element-ui如何防止重复提交的方法步骤
Dec 09 Javascript
基于javascript实现移动端轮播图效果
Dec 21 Javascript
js将long日期格式转换为标准日期格式实现思路
Apr 07 #Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
Apr 07 #Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
Apr 07 #Javascript
有关于eclipse配置spket需要注意的一些地方
Apr 07 #Javascript
如何在一个页面显示多个百度地图
Apr 07 #Javascript
关于JS字符串函数String.replace()
Apr 07 #Javascript
有关于JS构造函数的重载和工厂方法
Apr 07 #Javascript
You might like
一个php作的文本留言本的例子(一)
2006/10/09 PHP
用PHP与XML联手进行网站编程代码实例
2008/07/10 PHP
收藏的PHP常用函数 推荐收藏保存
2010/02/21 PHP
二招解决php乱码问题
2012/03/25 PHP
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
Redis构建分布式锁
2017/03/28 PHP
jQuery隔行变色与普通JS写法的对比
2013/04/21 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
2013/08/13 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
AngularJS 执行流程详细介绍
2016/08/18 Javascript
简单理解vue中实例属性vm.$els
2016/12/01 Javascript
浅谈关于angularJs中使用$.ajax的注意点
2017/08/12 Javascript
微信小程序 获取javascript 里的数据
2017/08/17 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
2017/09/06 Javascript
vue中设置height:100%无效的问题及解决方法
2018/07/27 Javascript
js module大战
2019/04/19 Javascript
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
[00:47]DOTA2荣耀之路6:玩不了啦!
2018/05/30 DOTA
Python下实现的RSA加密/解密及签名/验证功能示例
2017/07/17 Python
python 利用for循环 保存多个图像或者文件的实例
2018/11/09 Python
纯python进行矩阵的相乘运算的方法示例
2019/07/17 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
Python 如何展开嵌套的序列
2020/08/01 Python
CSS3教程(9):设置RGB颜色
2009/04/02 HTML / CSS
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
2016/07/08 HTML / CSS
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
2013/01/09 HTML / CSS
美国在线轮胎零售商:SimpleTire
2019/04/08 全球购物
联想C++笔试题
2012/06/13 面试题
机电一体化大学生求职信
2013/11/08 职场文书
本科毕业生应聘自荐信范文
2014/06/26 职场文书
社区服务标语
2014/07/01 职场文书
英文辞职信范文
2015/05/13 职场文书
情侣餐厅的创业计划书范本!
2019/07/26 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers
在 Python 中利用 Pool 进行多线程
2022/04/24 Python