关于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 27 Javascript
JQuery Dialog的内存泄露问题解决方法
Jun 18 Javascript
jQuery网页选项卡插件rTabs用法实例分析
Aug 26 Javascript
微信小程序  简单实例(阅读器)的实例开发
Sep 29 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
Jan 21 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
May 20 Javascript
微信小程序点击控件修改样式实例详解
Jul 07 Javascript
Vue调试神器vue-devtools安装方法
Dec 12 Javascript
electron demo项目npm install安装失败的解决方法
Feb 06 Javascript
element UI upload组件上传附件格式限制方法
Sep 04 Javascript
微信小程序常用的3种提示弹窗实现详解
Sep 19 Javascript
Vue组件化(ref,props, mixin,.插件)详解
May 15 Vue.js
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 explode()函数用法、切分字符串
2012/10/03 PHP
PHP远程采集图片详细教程
2014/07/01 PHP
Codeigniter(CI)框架分页函数及相关知识
2014/11/03 PHP
浅谈PHP中output_buffering
2015/07/13 PHP
详解Window7 下开发php扩展
2015/12/31 PHP
PHP判断数组是否为空的常用方法(五种方法)
2017/02/08 PHP
php lcg_value与mt_rand生成0~1随机小数的效果对比分析
2017/04/05 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
prototype 1.5 & scriptaculous 1.6.1 学习笔记
2006/09/07 Javascript
读jQuery之三(构建选择器)
2011/06/11 Javascript
基于NodeJS的前后端分离的思考与实践(二)模版探索
2014/09/26 NodeJs
网页收藏夹显示ICO图标(代码少)
2015/08/04 Javascript
详解AngularJS中ng-src指令的使用
2016/09/07 Javascript
微信小程序 支付功能开发错误总结
2017/02/21 Javascript
深入理解React高阶组件
2017/09/28 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
2019/07/26 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
python 正则式 概述及常用字符
2009/05/07 Python
python多进程共享变量
2016/04/06 Python
Python中的字符串替换操作示例
2016/06/27 Python
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
python中os和sys模块的区别与常用方法总结
2017/11/14 Python
Python pickle模块实现对象序列化
2019/11/22 Python
通过实例解析Python调用json模块
2019/12/11 Python
详解python破解zip文件密码的方法
2020/01/13 Python
世界上最大的巴士旅游观光公司:Big Bus Tours
2016/10/20 全球购物
Oroton中国官网:澳洲知名奢侈配饰品牌
2017/03/26 全球购物
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
荷兰浴室和卫浴网上商店:Badkamerxxl.nl
2020/10/06 全球购物
2015年医院后勤工作总结
2015/05/20 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书
Nginx流量拷贝ngx_http_mirror_module模块使用方法详解
2022/04/07 Servers