`
yhz61010
  • 浏览: 562456 次
  • 来自: -
博客专栏
63c13ecc-ef01-31cf-984e-de461c7dfde8
libgdx 游戏开发
浏览量:12270
社区版块
存档分类
最新评论

[转] 5个关于提高 jQuery 选择器的小技巧

阅读更多
原文地址:
5 Tips for More Efficient jQuery Selectors
http://www.sitepoint.com/efficient-jquery-selectors/

As the name implies, jQuery focuses on queries. The core of the library allows you to find DOM elements using CSS selector syntax and run methods on that collection.

jQuery uses native browser API methods to retrieve DOM collections. Newer browsers support getElementsByClassName, querySelector and querySelectorAll which parses CSS syntax. However, older browsers only offer getElementById and getElementByTagName. In the worst scenarios, jQuery’s Sizzle engine must parse the selector string and hunt for matching elements.

Here are five tips which could help you optimize your jQuery selectors…

1. Use an ID if Possible

HTML ID attributes are unique in every page and even older browsers can locate a single element very quickly:
$("#myelement");

2. Avoid Selecting by Class Only

The following class selector will run quickly in modern browsers:

$(".myclass");

Unfortunately, in older browser such as IE6/7 and Firefox 2, jQuery must examine every element on the page to determine whether “myclass” has been applied.

The selector will be more efficient if we qualify it with a tag name, e.g.

$("div.myclass");

jQuery can now restrict the search to DIV elements only.

3. Keep it Simple!

Avoid overly complex selectors. Unless you have an incredibly complex HTML document, it’s rare you’ll need any more than two or three qualifiers.

Consider the following complex selector:

$("body #page:first-child article.main p#intro em");

p#intro must be unique so the selector can be simplified:

$("p#intro em");

4. Increase Specificity from Left to Right

A little knowledge of jQuery’s selector engine is useful. It works from the last selector first so, in older browsers, a query such as:

$("p#intro em");

loads every em element into an array. It then works up the parents of each node and rejects those where p#intro cannot be found. The query will be particularly inefficient if you have hundreds of em tags on the page.

Depending on your document, the query can be optimized by retrieving the best-qualified selector first. It can then be used as a starting point for child selectors, e.g.

$("em", $("p#intro")); // or
$("p#intro").find("em");

5. Avoid Selector Repetition

It’s rarely necessary to use the same selector twice. The following code selects every p tag three times:

$("p").css("color", "blue");
$("p").css("font-size", "1.2em");
$("p").text("Text changed!");

Remember jQuery offers chaining; multiple methods can be applied to the same collection. Therefore, the same code can be re-written so it applies to a single selector:

$("p").css({ "color": "blue", "font-size": "1.2em"}).text("Text changed!");

You should cache the jQuery object in a variable if you need to use the same set of elements multiple times, e.g.

var $p = $("p");
$p.css("color", "blue");
$p.text("Text changed!");

Unlike standard DOM collections, jQuery collections aren’t live and the object is not updated when paragraph tags are added or removed from the document. You can code around this restriction by creating a DOM collection and passing it to the jQuery function when it’s required, e.g.

var p = document.getElementByTagName("p");
$(p).css("color", "blue");
// update the DOM
$(p).text("Text changed!");

Do you have any further jQuery selector optimization tips?
分享到:
评论

相关推荐

    JQuery选择器特辑 详细小结

    ### JQuery选择器特辑详细小结 #### 一、基本选择器 基本选择器是JQuery中最基础也是最常用的选择器,通过元素的ID、类名(Class)和标签名等来查找DOM元素。基本选择器主要包括: - ID选择器:通过元素ID来选取...

    jQuery使用经验小技巧(推荐)

    优化jQuery选择器,尽可能使用ID选择器(最快)和类选择器(次之),避免使用通配符和复杂的后代选择器,以提高性能。 9. **使用$.data()存储数据**: 利用`$.data()`方法存储和检索元素关联的数据,这比在DOM...

    jQuery日期选择器插件自定义多种日期选择

    在开发这个插件时,我们可以参考现有的jQuery日期选择器库,如jQuery UI的DatePicker,学习其设计理念和实现技巧。同时,考虑到不同用户的习惯和无障碍需求,插件应提供良好的可配置性和自适应性,例如改变日期格式...

    15个Jquery 技巧

    ### 15个jQuery技巧深度解析 在前端开发领域,jQuery作为一款优秀的JavaScript库,以其简洁、高效的特点深受开发者喜爱。以下是对“15个Jquery 技巧”文章中的核心知识点进行的深入分析,旨在帮助使用jQuery框架的...

    jQuery选择器大全(48个代码片段+21幅图演示).pdf

    《jQuery选择器大全》这篇文档详细介绍了jQuery中的各种选择器,包括基本选择器、层次选择器和过滤选择器,这些都是jQuery操作DOM元素的核心工具。以下是对这些知识点的深入解析: 一、基本选择器 1. **ID选择器**...

    2个jquery小游戏

    通常,这种类型的项目会涵盖基础的jQuery选择器、DOM操作、事件绑定、动画效果以及可能用到的JavaScript编程技巧。 标签 "源码" 和 "工具" 提示我们,除了游戏的介绍,可能还可以从提供的源代码中学习到实际的编程...

    26个Jquery使用小技巧

    根据给定的文件信息,以下是对“26个Jquery使用小技巧...以上五个技巧仅是“26个Jquery使用小技巧”中的部分内容,它们覆盖了从事件处理、DOM操作到浏览器兼容性检查等多个方面,充分展示了jQuery的强大功能和灵活性。

    Jquery使用小技巧汇总

    以下是一些实用的JQuery使用小技巧,涵盖了多个方面,包括用户交互、页面行为、兼容性处理等。 1. **禁止右键点击**:通过监听`contextmenu`事件并返回`false`,可以阻止用户在页面上右键点击。 ```javascript $...

    50个Jquery经典实例 50个Jquery经典实例

    1. **jQuery选择器**:jQuery提供了丰富的选择器,如ID选择器(#id)、类选择器(.class)、元素选择器(tag)、属性选择器([attr=value])等,能快速精准地选取DOM元素。 2. **DOM操作**:jQuery提供简便的方法来...

    jQuery使用的小例子

    1. **选择器**:如ID选择器(`#id`)、类选择器(`.class`)、元素选择器(`tag`)等,以及组合选择器和属性选择器的使用。 2. **DOM操作**:包括添加、删除、查找元素,如`append()`, `remove()`, `find()`, `siblings()...

    关于用jQuery实现效果

    总结来说,这篇博客“关于用jQuery实现效果”可能涉及了jQuery的选择器、事件处理、动画制作、Ajax交互以及可能的插件使用。通过学习和实践这些内容,开发者可以创建出更富交互性和用户体验的网页。

    提高jquery性能方法.rar_jquery

    如果必须使用多个选择器,考虑使用更具体的选择器组合,而不是用后代选择器(`>`)和相邻兄弟选择器(`+`)。 2. **缓存DOM查询**:多次查询相同的DOM元素会导致性能下降。可以将结果存储在变量中,避免重复查询,...

    js框架Jquery知识讲解

    - 选择器:使用jQuery选择器选取需要操作的DOM元素。 - 动作:执行针对选取元素的操作,如修改内容、添加样式或绑定事件。 3. **jQuery 对象与 DOM 对象的转换** - jQuery对象是jQuery库中的封装对象,可以执行...

    100多个 jquery例子

    1. **选择器**: jQuery 提供了丰富的选择器,如 ID 选择器(#id)、类选择器(.class)和元素选择器(element),使得选取DOM元素变得简单。 2. **DOM 操作**: jQuery 提供 `.html()`, `.text()`, `.append()`, `....

    js 小项目练习,jQuery 小例子

    jQuery的核心特性包括选择器(用于高效地选取DOM元素)、链式调用(允许连续执行多个方法)和函数封装(将复杂操作简化为单一调用)。 **jQuery小项目** 在"js 小项目练习,jQuery 小例子"中,我们可以看到几个...

    jQuery权威指南-源代码

    2.1 jQuery选择器概述/13 2.1.1 什么是选择器/13 2.1.2 选择器的优势/13 2.2 jQuery选择器详解/17 2.2.1 基本选择器/18 2.2.2 层次选择器/20 2.2.3 简单过滤选择器/22 2.2.4 内容过滤选择器/25 2.2.5 可见...

    自制编辑器jquery版

    1. jQuery基础:此编辑器的核心是jQuery,理解jQuery的基本概念、选择器、事件处理、DOM操作以及动画方法是使用和定制编辑器的前提。 2. 头像上传:涉及文件上传功能,可能利用了HTML5的File API,用户选择文件后,...

    Learning jQuery 1.3 | Jquery基础教程(第二版)

    ### 二、jQuery选择器 jQuery选择器类似于CSS选择器,用于在HTML文档中选取元素。基础选择器包括ID选择器(#id)、类选择器(.class)、元素选择器(tagname)和组合选择器(多个选择器结合)。此外,还有属性选择...

    jQuery中:selected选择器用法实例

    这个专题应该会更详细地讲解jQuery选择器的种类、使用方法和技巧,对于深入学习jQuery选择器的开发者而言是一份很好的资源。 综合上述,:selected选择器是jQuery中用于选取元素中被选中的元素的一个非常有用的工具...

Global site tag (gtag.js) - Google Analytics