关于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自定义的函数
Aug 05 Javascript
Extjs学习笔记之六 面版
Jan 08 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
Oct 09 Javascript
JS多物体 任意值 链式 缓冲运动
Aug 10 Javascript
引用外部脚本时script标签关闭的写法
Jan 20 Javascript
jQuery 选择器详解
Jan 19 Javascript
轻松掌握JavaScript策略模式
Aug 25 Javascript
jquery滚动条插件slimScroll使用方法
Feb 09 Javascript
three.js中文文档学习之创建场景
Nov 20 Javascript
浅谈es6中export和export default的作用及区别
Feb 07 Javascript
vue axios请求频繁时取消上一次请求的方法
Nov 10 Javascript
JavaScript实现轮播图片完整代码
Mar 07 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和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
YII中assets的使用示例
2014/07/31 PHP
PHP中非常有用却鲜有人知的函数集锦
2019/08/17 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
2013/11/18 Javascript
js获取客户端外网ip的简单实例
2013/11/21 Javascript
Node.js中child_process实现多进程
2015/02/03 Javascript
JS实现的Select三级下拉菜单代码
2015/08/20 Javascript
JavaScript+html5 canvas实现本地截图教程
2020/04/16 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
JS原型链怎么理解
2016/06/27 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
2017/08/23 Javascript
Node 自动化部署的方法
2017/10/17 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
2018/05/06 Javascript
js中split()方法得到的数组长度问题
2018/07/19 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
2019/11/07 Javascript
python统计字符串中指定字符出现次数的方法
2015/04/04 Python
Python  pip安装lxml出错的问题解决办法
2017/02/10 Python
python操作redis方法总结
2018/06/06 Python
python实现人脸签到系统
2020/04/13 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
S’well Bottle保温杯官网:绝缘不锈钢水瓶
2018/05/09 全球购物
美国糖果店:Sugarfina
2019/02/21 全球购物
俄罗斯运动、健康和美容产品在线商店:Lactomin.ru
2020/07/23 全球购物
Envie de Fraise意大利:法国网上推出的孕妇装品牌
2020/10/18 全球购物
市场营销专业个人求职信范文
2013/12/14 职场文书
企业申诉管理制度
2014/01/30 职场文书
追悼会主持词
2014/03/20 职场文书
物流管理专业求职信
2014/05/29 职场文书
2016春节家属慰问信
2015/03/25 职场文书
2015年大学生工作总结
2015/04/21 职场文书
HTML速写之Emmet语法规则的实现
2021/04/07 HTML / CSS
nginx代理实现静态资源访问的示例代码
2022/07/07 Servers
maven 解包依赖项中的文件的解决方法
2022/07/15 Java/Android