关于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自动完成插件(autocomplete)应用之PHP版
Dec 15 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
Jun 13 Javascript
JavaScript拆分字符串时产生空字符的解决方案
Sep 26 Javascript
即将发布的jQuery 3 有哪些新特性
Apr 14 Javascript
数据结构中的各种排序方法小结(JS实现)
Jul 23 Javascript
jQuery基于正则表达式的表单验证功能示例
Jan 21 Javascript
JavaScript 中的12种循环遍历方法【总结】
May 31 Javascript
关于微信小程序bug记录与解决方法
Aug 15 Javascript
JS实现的碰撞检测与周期移动完整示例
Sep 02 Javascript
Element 默认勾选表格 toggleRowSelection的实现
Sep 04 Javascript
Vue使用虚拟dom进行渲染view的方法
Dec 26 Javascript
Vue父子之间值传递的实例教程
Jul 02 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
PHPLog php 程序调试追踪工具
2009/09/09 PHP
fetchAll()与mysql_fetch_array()的区别详解
2013/06/05 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
javascript 常用关键字列表集合
2007/12/04 Javascript
JavaScript学习笔记(一) js基本语法
2011/10/25 Javascript
给artDialog 5.02 增加ajax get功能详细介绍
2012/11/13 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
解析Javascript中中括号“[]”的多义性
2013/12/03 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
2014/04/11 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
2020/07/28 Javascript
对称加密与非对称加密优缺点详解
2017/02/06 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
2017/12/24 jQuery
vue-router重定向和路由别名的使用讲解
2019/01/19 Javascript
javascript数组元素删除方法delete和splice解析
2019/12/09 Javascript
jQuery实现获取多选框的值示例
2020/02/07 jQuery
[03:12]2016完美“圣”典风云人物:单车专访
2016/12/02 DOTA
Python中对元组和列表按条件进行排序的方法示例
2015/11/10 Python
探究python中open函数的使用
2016/03/01 Python
对Python中for复合语句的使用示例讲解
2018/11/01 Python
python读写文件write和flush的实现方式
2020/02/21 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
详解使用canvas保存网页为pdf文件支持跨域
2018/11/23 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
2017/02/06 HTML / CSS
Sunglasses Shop瑞典:欧洲领先的太阳镜网上商店
2018/04/22 全球购物
酒店门卫岗位职责
2013/12/29 职场文书
大学生简短的自我评价分享
2014/02/20 职场文书
廉政承诺书范文
2015/04/28 职场文书
入党积极分子群众意见
2015/06/01 职场文书
新年祝酒词大全
2015/08/11 职场文书
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
2021/03/31 HTML / CSS
MySQL 可扩展设计的基本原则
2021/05/14 MySQL
用React Native制作一个简单的游戏引擎
2021/05/27 Javascript
Python 阶乘详解
2021/10/05 Python
WebWorker 封装 JavaScript 沙箱详情
2021/11/02 Javascript
聊聊Python String型列表求最值的问题
2022/01/18 Python