关于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 相关文章推荐
基于jQuery的日期选择控件
Oct 27 Javascript
js 居中漂浮广告
Mar 21 Javascript
JS中Iframe之间传值及子页面与父页面应用
Mar 11 Javascript
js取消单选按钮选中示例代码
Nov 14 Javascript
JS实现获取剪贴板内容的方法
Jun 21 Javascript
jsTree使用记录实例
Dec 01 Javascript
Vue.js第四天学习笔记
Dec 02 Javascript
详解vue slot插槽的使用方法
Jun 13 Javascript
JavaScript实现一个简易的计算器实例代码
May 10 Javascript
vue给对象动态添加属性和值的实例
Sep 09 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
Apr 28 Javascript
VUE项目axios请求头更改Content-Type操作
Jul 24 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
三国漫画《火凤燎原》宣布动画化PV放出 预计2020年播出
2020/03/08 国漫
php面向对象全攻略 (十四) php5接口技术
2009/09/30 PHP
几种有用的变型 PHP中循环语句的用法介绍
2012/01/30 PHP
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
2021/03/09 Javascript
JSChart轻量级图形报表工具(内置函数中文参考)
2010/10/11 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
详解JavaScript操作HTML DOM的基本方式
2015/10/21 Javascript
JS实现兼容性较好的随屏滚动效果
2015/11/09 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
2016/07/22 Javascript
JavaScript数据类型转换的注意事项
2016/07/31 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
2016/08/02 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
2016/10/24 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
Angular异步变同步处理方法
2018/08/13 Javascript
基于canvas实现手写签名(vue)
2020/05/21 Javascript
Python中实现两个字典(dict)合并的方法
2014/09/23 Python
在Python中使用正则表达式的方法
2015/08/13 Python
python 排序算法总结及实例详解
2016/09/28 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
Python统计一个字符串中每个字符出现了多少次的方法【字符串转换为列表再统计】
2019/05/05 Python
python实现小球弹跳效果
2019/05/10 Python
pandas dataframe的合并实现(append, merge, concat)
2019/06/24 Python
Python判断字符串是否xx开始或结尾的示例
2019/08/08 Python
Tensorflow限制CPU个数实例
2020/02/06 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
详解pandas映射与数据转换
2021/01/22 Python
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
宣传普通话标语
2014/06/27 职场文书
学雷锋志愿者活动方案
2014/08/21 职场文书
政府班子四风问题整改措施思想汇报
2014/10/08 职场文书
python中的装饰器该如何使用
2021/06/18 Python
分享7个 Python 实战项目练习
2022/03/03 Python
python turtle绘图
2022/05/04 Python
cypress测试本地web应用
2022/06/01 Javascript