关于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 相关文章推荐
js右键菜单效果代码
Jul 21 Javascript
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
Feb 07 Javascript
javascript数组去掉重复
May 12 Javascript
js特殊字符转义介绍
Nov 05 Javascript
表单序列化与jq中的serialize使用示例
Feb 21 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
Nov 20 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 Javascript
JavaScript DOM节点操作方法总结
Aug 23 Javascript
轻松理解JavaScript闭包
Mar 14 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
Vue中自定义全局组件的实现方法
Dec 08 Javascript
js getBoundingClientRect使用方法详解
Jul 17 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网页游戏学习之Xnova(ogame)源码解读(十六)
2014/06/30 PHP
PHP的Yii框架中过滤器相关的使用总结
2016/03/29 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
2013/04/26 Javascript
js onmousewheel事件多次触发问题解决方法
2014/10/17 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
JS实现不规则TAB选项卡效果代码
2015/09/16 Javascript
JavaScript编程的单例设计模讲解
2015/11/10 Javascript
js实现瀑布流的三种方式比较
2020/06/28 Javascript
jQuery制作网页版选项卡
2016/07/28 Javascript
详谈js原型继承的一些问题
2017/09/06 Javascript
layui实现左侧菜单点击右侧内容区显示
2019/07/26 Javascript
js实现旋转的星空效果
2019/11/01 Javascript
vue 开发企业微信整合案例分析
2019/12/02 Javascript
vue keep-alive的简单总结
2021/01/25 Vue.js
Element el-button 按钮组件的使用详解
2021/02/01 Javascript
Python虚拟环境virtualenv的安装与使用详解
2017/05/28 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
在tensorflow中设置保存checkpoint的最大数量实例
2020/01/21 Python
详解django中Template语言
2020/02/22 Python
提供世界各地便宜的机票:Sky-tours
2016/07/21 全球购物
英国袜子店:Sock Shop
2017/01/11 全球购物
英国Flybe航空官网:欧洲最大的独立支线廉价航空公司
2019/07/15 全球购物
斯洛伐克香水和化妆品购物网站:Parfemy-Elnino.sk
2020/01/28 全球购物
某公司C#程序员面试题笔试题
2014/05/26 面试题
软件测试工程师结构化面试题库
2016/11/23 面试题
解决方案设计综合面试题
2015/08/31 面试题
传统软件工程与面向对象的软件工程有什么区别
2012/05/31 面试题
求职简历的自我评价怎样写好
2013/10/07 职场文书
护士的岗位职责
2013/12/04 职场文书
护士思想汇报
2014/01/12 职场文书
2014年国庆节演讲稿
2014/09/02 职场文书
名人演讲稿范文
2014/09/16 职场文书
《搭石》教学反思
2016/02/18 职场文书
班级元旦晚会开幕词
2016/03/04 职场文书
JS实现简单控制视频播放倍速的实例代码
2021/04/18 Javascript