关于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函数的重载
Sep 22 Javascript
SUN的《AJAX与J2EE》全文译了
Feb 23 Javascript
jquery实现搜索框常见效果的方法
Jan 22 Javascript
JavaScript实现cookie的写入、读取、删除功能
Nov 05 Javascript
Express的路由详解
Dec 10 Javascript
JS实现alert中显示换行的方法
Dec 17 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
Aug 29 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
Sep 20 Javascript
在js中实现邮箱格式的验证方法(推荐)
Oct 24 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
Aug 18 Javascript
利用Vue2.x开发实现JSON树的方法
Jan 04 Javascript
Javascript之datagrid查询详解
Sep 15 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
第九节--绑定
2006/11/16 PHP
分享一段php获取linux服务器状态的代码
2014/05/27 PHP
PHP导入导出Excel代码
2015/07/07 PHP
json 入门基础教程 推荐
2009/10/31 Javascript
基于jquery实现控制经纬度显示地图与卫星
2013/05/20 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
JavaScript的setAttribute兼容性问题解决方法
2013/11/11 Javascript
js定时器的使用(实例讲解)
2014/01/06 Javascript
jquery浏览器滚动加载技术实现方案
2014/06/03 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
javascript设置页面背景色及背景图片的方法
2015/12/29 Javascript
JS转换HTML转义符的方法
2016/08/24 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
2017/01/04 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
图解javascript作用域链
2019/05/27 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
2019/06/21 Javascript
vue实现抖音时间转盘
2019/09/08 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
2020/07/21 Javascript
python实现bitmap数据结构详解
2014/02/17 Python
python 将列表中的字符串连接成一个长路径的方法
2018/10/23 Python
python 批量添加的button 使用同一点击事件的方法
2019/07/17 Python
python正则爬取某段子网站前20页段子(request库)过程解析
2019/08/10 Python
matplotlib绘制多个子图(subplot)的方法
2019/12/03 Python
Python基于codecs模块实现文件读写案例解析
2020/05/11 Python
美国领先的家庭健康检测试剂盒提供商:LetsGetChecked
2019/03/18 全球购物
用Python匹配HTML tag的时候,<.*>和<.*?>有什么区别
2012/11/04 面试题
什么是servlet链?
2014/07/13 面试题
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
运动会表扬稿大全
2014/01/16 职场文书
优秀体育委员自荐书
2014/01/31 职场文书
运动会闭幕式解说词
2014/02/21 职场文书
2014年文学毕业生自我鉴定
2014/04/23 职场文书
学生安全责任书模板
2014/07/25 职场文书
员工自我工作评价
2015/03/06 职场文书
2016小学优秀教师先进事迹材料
2016/02/26 职场文书
MySQL中优化SQL语句的方法(show status、explain分析服务器状态信息)
2022/04/09 MySQL