关于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 相关文章推荐
JS input 数字验证代码
Jul 30 Javascript
JavaScript 面向对象的 私有成员和公开成员
May 13 Javascript
异步动态加载js与css文件的js代码
Sep 15 Javascript
js实现固定显示区域内自动缩放图片的方法
Jul 18 Javascript
JavaScript中的原型prototype完全解析
May 10 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
May 18 Javascript
JS弹出窗口插件zDialog简单用法示例
Jun 12 Javascript
AngularJS 文件上传控件 ng-file-upload详解
Jan 13 Javascript
react的滑动图片验证码组件的示例代码
Feb 27 Javascript
vue router导航守卫(router.beforeEach())的使用详解
Apr 19 Javascript
vue的列表交错过渡实现代码示例
May 05 Javascript
layui默认选中table的CheckBox复选框方法
Sep 19 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 ctype函数中文翻译和示例
2014/03/21 PHP
PHP实现数字补零功能的2个函数介绍
2014/05/12 PHP
修改destoon会员公司的伪静态中的com目录的方法
2014/08/21 PHP
有关PHP 中 config.m4 的探索
2020/08/26 PHP
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
2009/04/01 Javascript
在Firefox下js select标签点击无法弹出
2014/03/06 Javascript
javascript制作sql转换为stringBuffer的小工具
2015/04/03 Javascript
JS实现弹性菜单效果代码
2015/09/07 Javascript
超实用的JavaScript代码段 附使用方法
2016/05/22 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
2018/08/09 Javascript
浅谈Node框架接入ELK实践总结
2019/02/22 Javascript
JS实现的合并两个有序链表算法示例
2019/02/25 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
探究一道价值25k的蚂蚁金服异步串行面试题
2020/08/21 Javascript
JavaScript实现多球运动效果
2020/09/07 Javascript
[54:54]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python 捕获shell脚本的输出结果实例
2017/01/04 Python
Python装饰器原理与简单用法实例分析
2018/04/29 Python
Python 获取中文字拼音首个字母的方法
2018/11/28 Python
python实现列表的排序方法分享
2019/07/01 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
使用HTML5技术开发一个属于自己的超酷颜色选择器
2013/09/22 HTML / CSS
Mytheresa英国官网:拥有160多个奢侈品品牌
2016/10/09 全球购物
美国在线鲜花速递:ProFlowers
2017/01/05 全球购物
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
介绍一下HDLC(High-Level Data Link Control)高层数据链路协议
2012/01/21 面试题
超市促销实习自我鉴定
2013/09/23 职场文书
销售类个人求职信范文
2013/09/25 职场文书
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
送餐员岗位职责范本
2014/02/21 职场文书
抽奖活动主持词
2014/03/31 职场文书
小区门卫岗位职责范本
2014/08/24 职场文书
新疆民族团结演讲稿
2014/08/27 职场文书
一篇文章带你复习java知识点
2021/06/28 Java/Android