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

 更新时间:2013年04月07日 17:16:24   作者:  
本篇文章小编为大家介绍,关于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');

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


相关文章

  • js 数组操作代码集锦

    js 数组操作代码集锦

    用js有很久了,但都没有深究过js的数组形式。偶尔用用也就是简单的string.split(char)。
    2009-04-04
  • JavaScript闭包详解

    JavaScript闭包详解

    本文详细介绍了javascript闭包,十分的详尽,推荐给有需要的小伙伴参考下。
    2015-02-02
  • JavaScript中函数的常用写法及调用方法

    JavaScript中函数的常用写法及调用方法

    这篇文章介绍了JavaScript中函数的常用写法及调用方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • javaScript语法总结

    javaScript语法总结

    本篇文章主要是对javascript语法进行总结,相信对大家的学习和复习都会有所帮助,需要的朋友可以过来看一下
    2016-11-11
  • mailto的使用技巧分享

    mailto的使用技巧分享

    如何使用mailto?对于大多数人来说并不是很陌生,但是实用上的细节部分你们有没有注意到,接下来分享一下本人在使用过程中的经验,需要了解的朋友可以参考下
    2012-12-12
  • 详细讲解JS节点知识

    详细讲解JS节点知识

    最近发现DOMDocument对象很重要,还有XMLHTTP也很重要
    2010-01-01
  • JavaScript编程中的Promise使用大全

    JavaScript编程中的Promise使用大全

    这篇文章主要介绍了JavaScript中的Promise使用详解,promise对象是JS进阶学习中的重要知识点,需要了解的朋友可以参考下
    2015-07-07
  • ASP.NET实现Repeater控件的数据绑定

    ASP.NET实现Repeater控件的数据绑定

    这篇文章介绍了ASP.NET实现Repeater控件数据绑定的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-07-07
  • javaScript中两个等于号和三个等于号之间的区别介绍

    javaScript中两个等于号和三个等于号之间的区别介绍

    这篇文章主要介绍了javaScript中两个等于号和三个等于号之间的区别,还不知道的朋友可以学习下
    2014-06-06
  • getElementById().innerHTML与getElementById().value的区别

    getElementById().innerHTML与getElementById().value的区别

    这篇文章主要介绍了getElementById().innerHTML与getElementById().value的区别,因为经常有新手朋友问到,特整理一下,需要的朋友可以参考下
    2016-10-10

最新评论