关于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 Validation插件防止重复提交表单的解决方法
Mar 05 Javascript
javascript实现简单的Map示例介绍
Dec 23 Javascript
jquery如何把数组变为字符串传到服务端并处理
Apr 30 Javascript
js判断鼠标位置是否在某个div中的方法
Feb 26 Javascript
layer弹窗插件操作方法详解
May 19 Javascript
vue父组件点击触发子组件事件的实例讲解
Feb 08 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
JS如何生成随机验证码
Mar 02 Javascript
基于javascript实现日历功能原理及代码实例
May 07 Javascript
详解Vue的组件中data选项为什么必须是函数
Aug 17 Javascript
JS继承实现方法及优缺点详解
Sep 02 Javascript
JS ES6异步解决方案
Apr 29 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字符串截取问题
2006/11/28 PHP
php实现cc攻击防御和防止快速刷新页面示例
2014/02/13 PHP
thinkphp分页实现效果
2016/10/13 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
Javascript - HTML的request类
2006/07/15 Javascript
防止动态加载JavaScript引起的内存泄漏问题
2009/10/08 Javascript
JQuery 文本框使用小结
2010/05/22 Javascript
JavaScript中的apply()方法和call()方法使用介绍
2012/07/25 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
2014/03/05 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
基于node.js实现微信支付退款功能
2017/12/19 Javascript
Vue单页应用引用单独的样式文件的两种方式
2018/03/30 Javascript
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
js使用文件流下载csv文件的实现方法
2019/07/15 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
2019/08/22 Javascript
js实现直播点击飘心效果
2020/08/19 Javascript
Python探索之Metaclass初步了解
2017/10/28 Python
在pycharm中设置显示行数的方法
2019/01/16 Python
Python如何爬取微信公众号文章和评论(基于 Fiddler 抓包分析)
2019/06/28 Python
python openpyxl使用方法详解
2019/07/18 Python
使用Python快乐学数学Github万星神器Manim简介
2019/08/07 Python
pytorch 模拟关系拟合——回归实例
2020/01/14 Python
Jupyter notebook 启动闪退问题的解决
2020/04/13 Python
Django实现后台上传并显示图片功能
2020/05/29 Python
python编写softmax函数、交叉熵函数实例
2020/06/11 Python
浅谈css3中的前缀
2016/07/20 HTML / CSS
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
2018/02/07 HTML / CSS
Ibatis如何调用存储过程
2015/05/15 面试题
公司经理任命书
2014/06/05 职场文书
2014年打非治违工作总结
2014/11/13 职场文书
奔腾年代观后感
2015/06/09 职场文书
告诉你一个秘密:富人致富的五大优点
2019/07/11 职场文书
html+css 实现简易导航栏功能
2021/04/07 HTML / CSS
《最终幻想14》6.01版本4月5日推出 追加新任务新道具
2022/04/03 其他游戏