关于jQuery参考实例2.0 用jQuery选择元素

译自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');

与之前的例子相比，该代码的作用相同，但却节省了不少性能开销。值得注意的是，有时我们可以通过指定选择器的上下文背景来进一步提升性能。

赞 (0)

相关推荐

  • 关于jQuery参考实例2.0 用jQuery选择元素

    译自jQuery Cookbook (O'Reilly 2009) Chapter 2 Selecting Elements with jQuery, 2.0 Introduction jQuery的核心是它的选择器引擎,其作用是从文档中通过名称.属性.状态等将元素筛选出来.由于CSS的广泛使用,在jQuery中采用CSS的选择器语法就成了很自然的选择.在支持绝大多数CSS1-3规范中的选择器之外,jQuery还增加了很多自定义的选择器来根据一些特殊的状态选择元素:与此同时,我们还可以自己编写选

  • 关于jQuery参考实例 1.0 jQuery的哲学

    本文翻译自jQuery Cookbook (O'Reilly 2009) 1.0 The jQuery Philosophy jQuery的哲学是"写更少的代码,做更多的事情",这一哲学可分述为三个概念: 用CSS选择器查找元素,并通过jQuery方法来操作这些元素 在元素集上链式调用多个jQuery方法 jQuery封装与隐式遍历 充分理解这三个概念对于编写jQuery代码来说至关重要.我们来详细看一下这三个概念. 查找元素并进行操作 更准确的说,是在DOM树中定位一批元素,然后对该

  • js案例之鼠标跟随jquery版(实例讲解)

    废话不多说,直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body,div{ margin:0; padding:0; } img{ display:block; border:none; } .box{ position:rel

  • JQuery实现带排序功能的权限选择实例

    本文实例讲述了JQuery实现带排序功能的权限选择.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

  • jquery+CSS3模拟Path2.0动画菜单效果代码

    jquery+CSS3模拟Path2.0动画菜单效果代码

    本文实例讲述了jquery+CSS3模拟Path2.0动画菜单效果代码.分享给大家供大家参考.具体如下: CSS3实现的仿手机软件菜单,动画菜单,注意的地方,小按钮位移后有个缓冲,每个小按钮缓冲的距离不一样,每个小按钮位移的时间有间隔,处理好这些细节才能体现出灵动的效果. CSS3代码:(请用非IE标准浏览器访问)由于代码运行框缺陷,请先刷新一下页面动画运行更流畅.Path菜单的小按钮本来应该也可以旋转的,但CSS3动画的位移和旋转同时出现时不知道为何旋转就没效果了,所以这里没弄出来,感兴趣的朋

  • jQuery的实例及必知重要的jQuery选择器详解

    Jquery能做什么 访问和操作DOM元素   控制页面样式    对页面事件进行处理    扩展新的jQuery插件   与Ajax技术完美结合 Jquery的优势 体积小,压缩后只有100KB左右   l强大的选择器   出色的DOM封装   l可靠的事件处理机制   出色的浏览器兼容性   使用隐式迭代简化编程   丰富的插件支持 jQuery的知识的分解: 1.关于window.onload和$(function(){})区别   解析:window.onload等待页面上所有资源(ht

  • jQuery+SpringMVC中的复选框选择与传值实例

    jQuery+SpringMVC中的复选框选择与传值实例

    一.checkbox选择 在jQuery中,选中checkbox通用的两种方式: $("#cb1").attr("checked","checked"); $("#cb1").attr("checked",true); 对应的jQuery函数,主要完成三个功能: 1.第一个复选框选中或取消选中,则下面的复选框为全选或取消全选: 2.当下面的复选框全部选中时,则将第一个复选框设置为选中,当下面的复选框中有一个

  • jQuery UI 实例讲解 - 日期选择器(Datepicker)

    默认功能 日期选择器(Datepicker)绑定到一个标准的表单 input 字段上.把焦点移到 input 上(点击或者使用 tab 键),在一个小的覆盖层上打开一个交互日历.选择一个日期,点击页面上的任意地方(输入框即失去焦点),或者点击 Esc 键来关闭.如果选择了一个日期,则反馈显示为 input 的值. <!doctype html> <html lang="en"> <head> <meta charset="utf-8&

  • jQuery菜单实例(全选,反选,取消)

    废话不多说,直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="button" value="全选" onclick="chec

  • jQuery Ajax 实例代码 ($.ajax、$.post、$.get)

    $.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一.$.ajax的一般格式 $.ajax({ type: 'POST', url: url , data: data , success: success , dataType: dataType }); 二.$.ajax的参数描述 参数 描述 url 必需.规定把请求发送到哪个 URL. data 可选.映射或字符串值.规定连同请求发送到服务器的数据. success(data, textS

随机推荐