关于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如何使用bind指定接收者
May 04 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
Jun 17 Javascript
javascript实现根据时间段显示问候语的方法
Jun 18 Javascript
jquery trigger函数执行两次的解决方法
Feb 29 Javascript
jQuery的deferred对象使用详解
Sep 25 Javascript
Javascript中call,apply,bind方法的详解与总结
Dec 12 Javascript
原生js实现选项卡功能
Mar 08 Javascript
JavaScript轮播停留效果的实现思路
May 24 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
Aug 28 Javascript
layui按条件隐藏表格列的实例
Sep 19 Javascript
Nuxt的路由动画效果案例
Nov 06 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
PHP4之真OO
2006/10/09 PHP
解决file_get_contents无法请求https连接的方法
2013/12/17 PHP
php选择排序法实现数组排序实例分析
2015/02/16 PHP
必须收藏的php实用代码片段
2016/02/02 PHP
php中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案
2016/05/31 PHP
PHP处理数组和XML之间的互相转换
2016/06/02 PHP
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
初窥JQuery(二)事件机制(2)
2010/12/06 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
2013/03/28 Javascript
node.js中的fs.readFile方法使用说明
2014/12/15 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
2015/03/23 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
如何动态加载外部Javascript文件
2015/12/02 Javascript
搞定immutable.js详细说明
2016/05/02 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
详解RequireJs官方使用教程
2017/10/31 Javascript
Python如何获取系统iops示例代码
2016/09/06 Python
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
Python3.5 Pandas模块之Series用法实例分析
2019/04/23 Python
Python使用mongodb保存爬取豆瓣电影的数据过程解析
2019/08/14 Python
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
python算的上脚本语言吗
2020/06/22 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
中科方德软件测试面试题
2016/04/21 面试题
财务会计人员岗位职责
2013/11/30 职场文书
小学数学教学反思
2014/02/02 职场文书
小学生放飞梦想演讲稿
2014/08/26 职场文书
谢师宴邀请函
2015/02/02 职场文书
2015入党自荐书范文
2015/03/05 职场文书
高中生综合素质自我评价
2015/03/06 职场文书
Redis持久化与主从复制的实践
2021/04/27 Redis
「天才王子的赤字国家重生术」妮妮姆·拉雷粘土人开订
2022/03/21 日漫
Java死锁的排查
2022/05/11 Java/Android