关于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实现的分页函数
Feb 07 Javascript
使用JavaScript switch case 另类写法
Mar 14 Javascript
Js 弹出框口并返回值的两种常用方法
Dec 30 Javascript
javascript代码加载优化方法
Jan 30 Javascript
js调用后台servlet方法实例
Jun 09 Javascript
JavaScript Promise启示录
Aug 12 Javascript
js实现九宫格图片半透明渐显特效的方法
Feb 16 Javascript
javascript实现别踩白块儿小游戏程序
Nov 22 Javascript
jQuery使用经验小技巧(推荐)
May 31 Javascript
AngularJS过滤器filter用法分析
Dec 11 Javascript
Vue仿支付宝支付功能
May 25 Javascript
AJAX实现省市县三级联动效果
Oct 16 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 in_array 函数使用说明与in_array需要注意的地方说明
2010/04/13 PHP
PHP Session机制简介及用法
2014/08/19 PHP
PHP 实现判断用户是否手机访问
2015/01/21 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
2013/05/13 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
2014/12/29 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
2015/03/19 Javascript
JavaScript实现上下浮动的窗口效果代码
2015/10/12 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
卸载安装Node.js与npm过程详解
2016/08/15 Javascript
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
js中document.write和document.writeln的区别
2018/03/11 Javascript
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
Angular PWA使用的Demo示例
2019/01/31 Javascript
使用apifm-wxapi模块中的问题及解决方法
2019/08/05 Javascript
js实现多个标题吸顶效果
2020/01/08 Javascript
解决vuecli3中img src 的引入问题
2020/08/04 Javascript
js实现简单的点名器随机色实例代码
2020/09/20 Javascript
Vue 实例中使用$refs的注意事项
2021/01/29 Vue.js
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
加拿大鞋网:Globo Shoes
2019/12/26 全球购物
Java的类可以定义为Protected或者Private得吗
2015/09/25 面试题
人力资源经理自我评价
2014/01/04 职场文书
音乐教育感言
2014/03/05 职场文书
小学节能减排倡议书
2014/05/15 职场文书
房地产开发项目建议书
2014/05/16 职场文书
计算机专业求职信
2014/06/02 职场文书
巾帼文明岗汇报材料
2014/12/24 职场文书
班委竞选稿范文
2015/11/21 职场文书
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL
Python办公自动化之教你如何用Python将任意文件转为PDF格式
2021/06/28 Python
PO模式在selenium自动化测试框架的优势
2022/03/20 Python
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python