关于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禁用右键单击功能屏蔽F5刷新
Mar 17 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
Jul 01 Javascript
省市二级联动小案例讲解
Jul 24 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
Aug 03 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
Sep 17 Javascript
Node.js中process模块常用的属性和方法
Dec 13 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
Dec 25 Javascript
微信小程序 支付功能(前端)的实现
May 24 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
Feb 25 Javascript
vue模块移动组件的实现示例
May 20 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中的Class的几点个人看法
2006/10/09 PHP
php多个文件及图片上传实例详解
2014/11/10 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
深入讲解PHP的Yii框架中的属性(Property)
2016/03/18 PHP
PHP中header用法小结
2016/05/23 PHP
PHP中的use关键字及文件的加载详解
2016/11/28 PHP
PHP实现自动发送邮件功能代码(qq 邮箱)
2017/08/18 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
Javascript 表单之间的数据传递代码
2008/12/04 Javascript
IE 条件注释详解总结(附实例代码)
2009/08/29 Javascript
JavaScript CSS修改学习第五章 给“上传”添加样式
2010/02/19 Javascript
日历查询的算法 如何计算某一天是星期几
2012/12/12 Javascript
5分钟理解JavaScript中this用法分享
2013/11/09 Javascript
jquery实现submit提交表单
2015/02/03 Javascript
js/jquery判断浏览器类型的方法小结
2015/05/12 Javascript
jQuery实现弹出窗口弹出div层的实例代码
2017/01/09 Javascript
JS实现520 表白简单代码
2018/05/21 Javascript
讲解vue-router之命名路由和命名视图
2018/05/28 Javascript
JavaScript回调函数callback用法解析
2020/01/14 Javascript
Node.js web 应用如何封装到Docker容器中
2020/09/01 Javascript
Python使用urllib模块的urlopen超时问题解决方法
2014/11/08 Python
Python中SOAP项目的介绍及其在web开发中的应用
2015/04/14 Python
python将ansible配置转为json格式实例代码
2017/05/15 Python
django2用iframe标签完成网页内嵌播放b站视频功能
2018/06/20 Python
numpy.linspace 生成等差数组的方法
2018/07/02 Python
python3读取图片并灰度化图片的四种方法(OpenCV、PIL.Image、TensorFlow方法)总结
2019/07/04 Python
用Python去除图像的黑色或白色背景实例
2019/12/12 Python
pytorch的batch normalize使用详解
2020/01/15 Python
使用python求斐波那契数列中第n个数的值示例代码
2020/07/26 Python
GitHub上值得推荐的8个python 项目
2020/10/30 Python
python-地图可视化组件folium的操作
2020/12/14 Python
团员学习总结的自我评价范文
2013/10/14 职场文书
庭外和解协议书
2016/03/23 职场文书
2019年圣诞节祝福语集锦
2019/12/25 职场文书
Win11黑色桌面背景怎么办?Win11黑色壁纸解决方法汇总
2022/04/05 数码科技
Python使用Opencv打开笔记本电脑摄像头报错解问题及解决
2022/06/21 Python