关于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 相关文章推荐
JavaScript语法着色引擎(demo及打包文件下载)
Jun 13 Javascript
JavaScript 判断浏览器类型及版本
Feb 21 Javascript
javascript document.compatMode兼容性
Feb 23 Javascript
jQuery 数据缓存模块进化史详细介绍
Nov 19 Javascript
js对象基础实例分析
Jan 13 Javascript
使用jQuery获得内容以及内容的属性
Feb 26 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Oct 05 Javascript
详解JS实现简单的时分秒倒计时代码
Apr 25 Javascript
layui动态加载多表头的实例
Sep 05 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
Mar 12 Javascript
vue中用 async/await 来处理异步操作
Jul 18 Javascript
JS前端基于canvas给图片添加水印
Nov 11 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&mysql(四)
2006/10/09 PHP
php获取服务器端mac和客户端mac的地址支持WIN/LINUX
2014/05/15 PHP
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
PHP比较运算符的详细介绍
2015/09/29 PHP
PHP 获取 ping 时间的实现方法
2017/09/29 PHP
PHP基于phpqrcode类生成二维码的方法示例详解
2020/08/07 PHP
jQuery.each()用法分享
2012/07/31 Javascript
js 动态加载事件的几种方法总结
2013/12/25 Javascript
jquery的live使用注意事项
2014/02/18 Javascript
jQuery实现简单的列表式导航菜单效果代码
2015/08/31 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
JS判断时间段的实现代码
2017/06/14 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
2017/06/26 Javascript
js学习总结_选项卡封装(实例讲解)
2017/07/13 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
基于JavaScript伪随机正态分布代码实例
2019/11/07 Javascript
微信小程序实现横向滚动导航栏效果
2019/12/12 Javascript
python循环监控远程端口的方法
2015/03/14 Python
Python编程pygame模块实现移动的小车示例代码
2018/01/03 Python
Python实现的rsa加密算法详解
2018/01/24 Python
python交互界面的退出方法
2019/02/16 Python
解决Python3 被PHP程序调用执行返回乱码的问题
2019/02/16 Python
python如何实现异步调用函数执行
2019/07/08 Python
通过python实现随机交换礼物程序详解
2019/07/10 Python
解决Python中pandas读取*.csv文件出现编码问题
2019/07/12 Python
python被修饰的函数消失问题解决(基于wraps函数)
2019/11/04 Python
JetBrains PyCharm(Community版本)的下载、安装和初步使用图文教程详解
2020/03/19 Python
Python OpenCV实现测量图片物体宽度
2020/05/27 Python
香港化妆品经销商:我的公主
2016/08/05 全球购物
计算机专业个人求职信范例
2013/09/23 职场文书
买房协议书范本
2014/10/23 职场文书
2014年医务科工作总结
2014/12/18 职场文书
公司欠款证明
2015/06/24 职场文书
工程移交协议书
2016/03/24 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers