关于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 面向对象全新理练之继承与多态
Dec 03 Javascript
setTimeout与setInterval在不同浏览器下的差异
Jan 24 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
Sep 02 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
Jan 11 Javascript
jquery解决图片路径不存在执行替换路径
Feb 06 Javascript
JS实现自动变化的导航菜单效果代码
Sep 09 Javascript
SublimeText自带格式化代码功能之reindent
Dec 27 Javascript
Bootstrap Table使用方法解析
Oct 19 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
Dec 15 Javascript
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
了解javascript中let和var及const关键字的区别
May 24 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
Sep 22 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 开发环境配置(测试开发环境)
2010/04/28 PHP
php中用于检测一个地理IP地址是否可用的代码
2012/02/19 PHP
setcookie中Cannot modify header information-headers already sent by错误的解决方法详解
2013/05/08 PHP
解析ajax事件的调用顺序
2013/06/17 PHP
php加密解密函数authcode的用法详细解析
2013/10/28 PHP
Laravel5中Cookie的使用详解
2017/05/03 PHP
根据分辨率不同,调用不同的css文件
2006/07/07 Javascript
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
div移动 输入框不能输入的问题
2009/11/19 Javascript
一个可拖拽列宽表格实例演示
2012/11/26 Javascript
NodeJS中的MongoDB快速入门详细教程
2016/11/11 NodeJs
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
微信小程序实现图片压缩功能
2018/01/26 Javascript
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
ztree加载完成后显示勾选节点的实现代码
2018/10/22 Javascript
python 实现堆排序算法代码
2012/06/05 Python
python 获取等间隔的数组实例
2019/07/04 Python
利用python实现周期财务统计可视化
2019/08/25 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
45个非常奇妙的CSS3 特性应用示例
2012/01/01 HTML / CSS
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
美国药妆网站:EDCskincare.com(防晒、痤疮、抗衰老等)
2017/04/28 全球购物
AP澳洲中文网:澳洲正品直邮,包税收件无忧
2019/07/12 全球购物
波兰在线运动商店:YesSport
2020/07/23 全球购物
村委会主任先进事迹
2014/01/15 职场文书
晚会主持词开场白
2014/03/17 职场文书
公司晚会主持词
2014/03/22 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
售后客服工作职责
2014/06/16 职场文书
公司员工活动策划方案
2014/08/20 职场文书
优秀三好学生事迹材料
2014/08/31 职场文书
献爱心大型公益活动策划方案
2014/09/15 职场文书
运动员加油词
2015/07/18 职场文书
详解java如何集成swagger组件
2021/06/21 Java/Android
关于@OnetoMany关系映射的排序问题,使用注解@OrderBy
2021/12/06 Java/Android