关于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 Array(数组)相关方法简述
Jul 25 Javascript
通过隐藏option实现select的联动效果
Nov 10 Javascript
JavaScript 学习笔记(十四) 正则表达式
Jan 22 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
Aug 22 Javascript
基于JQuery实现的Select级联
Jan 27 Javascript
JS中的构造函数详细解析
Mar 10 Javascript
AngularJS页面传参的5种方式
Apr 01 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
Jun 11 Javascript
微信小程序实现打卡日历功能
Sep 21 Javascript
JS实现普通轮播图特效
Jan 01 Javascript
JS实现轮播图效果
Jan 11 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
Apr 11 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中self,parent,this的区别以及实例介绍
2013/04/24 PHP
php下拉选项的批量操作的实现代码
2013/10/14 PHP
phpStudy访问速度慢和启动失败的解决办法
2015/11/19 PHP
PHP递归统计系统中代码行数
2019/09/19 PHP
BOOM vs RR BO5 第四场 2.14
2021/03/10 DOTA
jQuery 名称冲突的解决方法
2011/04/08 Javascript
基于JQuery的多标签实现代码
2012/09/19 Javascript
Javascript基础教程之数据类型 (字符串 String)
2015/01/18 Javascript
jQuery链使用指南
2015/01/20 Javascript
简介JavaScript中fixed()方法的使用
2015/06/08 Javascript
jquery实现简单的二级导航下拉菜单效果
2015/09/07 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
原生js实现键盘控制div移动且解决停顿问题
2016/12/05 Javascript
JS中的phototype详解
2017/02/04 Javascript
详解http访问解析流程原理
2017/10/18 Javascript
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
JS设置自定义快捷键并实现图片上下左右移动
2019/10/17 Javascript
[01:11:37]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第一场 11.19
2020/11/19 DOTA
Python+django实现文件下载
2016/01/17 Python
详解python实现读取邮件数据并下载附件的实例
2017/08/03 Python
python+selenium实现登录账户后自动点击的示例
2017/12/22 Python
Django中使用Celery的教程详解
2018/08/24 Python
11个Python Pandas小技巧让你的工作更高效(附代码实例)
2019/04/30 Python
python Django中models进行模糊查询的示例
2019/07/18 Python
python返回数组的索引实例
2019/11/28 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
化工机械应届生求职信
2013/11/04 职场文书
心理学专业大学生职业生涯规划范文
2014/02/19 职场文书
竞选学习委员演讲稿
2014/09/01 职场文书
大学生见习总结报告
2015/06/24 职场文书
2016年大学生实习单位评语
2015/12/01 职场文书
2016党员发展对象培训心得体会
2016/01/08 职场文书
大学生就业指导课心得体会
2016/01/15 职场文书
Spring Security动态权限的实现方法详解
2022/06/16 Java/Android