1、基于ID选择器进行查询,并且使用find方法。

 //快速
$("#container div.footer"); //超快
$("#container").find("div.footer");

使用find方法会减少遍历节点的时间。

2、使用混合选择器时,在右边的选择器最好具体一些。

 //优化前
$("div.data .footer"); //优化后
$(".data div.footer");

左边最好只使用tag或class这样的选择器,右边最好使用tag.class这样的方式。

3、避免使用过多的选择器。

 //糟糕
$("div p.data span.test"); //很好
$("div span.test");

这样可以减少选择器引擎遍历节点的时间。

4、避免使用通用的选择器,会花费很多查找时间。

 $(".buttons > *");            // Extremely expensive.
$(".buttons").children(); // Much better. $(".category :radio"); // Implied universal selection.
$(".category *:radio"); // Same thing, explicit now.
$(".category input:radio"); // Much better.

jQuery选择器最佳实践--来自jQ官网的更多相关文章

  1. JQuery高性能最佳实践

    [使用最佳选择器] 使用JQuery时,你可以使用多种选择器,选择同一个元素,各种方法之间的性能是不一样的,有时候差异会特别大. 通常比较常用的选择器有以下几个: ID选择器 $("#id& ...

  2. atitit.编辑表单的实现最佳实践dwr jq easyui

    atitit.编辑表单的实现最佳实践dwr jq easyui 1. 提交表单 1 2. 表单验证 1 3. 数据保存使用meger方式取代save&update方式 1 3.1. Filte ...

  3. 验证Xcode真伪的方法,来自苹果官网

    验证Xcode真伪的方法,来自苹果官网   Xcode的验证你的版本 2015年9月22日    注意:中文为有道翻译,看下验证方法即可.   我们最近将应用程序从应用程序商店,还建有Xcode的假冒 ...

  4. Reveal常用技巧(翻译来自Reveal官网blog)

    翻译来自官网:http://revealapp.com/blog/reveal-common-tips-cn.html 以下基于Reveal 1.6. 用于快速上手的内置应用 刚刚下载Reveal,啥 ...

  5. jQuery编程最佳实践笔记

    优化选择器   选择器优化已经不如从前那么重要,因为更多的浏览器实现了document.querySelectorAll()方法,所以选择的重担由jQuery转移到了浏览器. 但是仍然有一些技巧是需要 ...

  6. consul eureka区别(来自Consul官网)

    consul 与 eureka Eureka是一个服务发现工具.该体系结构主要是客户端/服务器,每个数据中心有一组Eureka服务器,通常每个可用区域一个.通常Eureka的客户使用嵌入式SDK来注册 ...

  7. 省市县镇村五级地址智能提取(标准地址源来自国家统计局官网)SpringBoot+Elasticsearch 5.6

    项目目的 根据传入的地址,智能提取所属的省市县镇村5级地址.例如:用户输入“江苏南通嗨安李堡镇陈庄村8组88号”,我们需要提取到江苏省  南通市  海安县(即便用户输入了错字,“海”写成了“嗨”) 李 ...

  8. 将一个数组转化为需要的格式,来自react官网的商品列表示例

    //原来的格式 const PRODUCTS = [ { category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Foot ...

  9. 【工利其器】必会工具之(三)systrace篇(1)官网翻译

    前言 Android 开发者官网中对systrace(Android System Trace)有专门的介绍,本篇文章作为systrace系列的开头,笔者先不做任何介绍,仅仅翻译一下官网的介绍.在后续 ...

随机推荐

  1. 使用Sass优雅并高效的实现CSS中的垂直水平居中(附带Flex布局,CSS3+SASS完美版)

    实现css水平垂直居中的方法有很多,在这里我简单的说下四种比较常用的方法: 1.使用CSS3中的Flex布局 对于flex,我们要了解的是它是一个display的属性,而且必须要给他的父元素设置fle ...

  2. Linux下安装firefox的flash插件

    OS:ORACLE-LINUX 5.71.下载"install_flash_player_11_linux.i386.tar.gz" 包2.自己创建个目录,解压[root@b28- ...

  3. java 格式化日期(DateFormat)

    import java.text.DateFormat; import java.util.Date; /** * 格式化时间类 DateFormat.FULL = 0 * DateFormat.DE ...

  4. OC的类方法、对象方法和函数

    OC语言中的方法和函数是有区别的:类内部叫方法,单独定义的叫函数,定义的格式也不同 类方法:+ (void) 方法名.对象方法:- (void) 方法名.函数:void 函数名(参数列表) #impo ...

  5. easyui toolbar 可以放在datagrid底下

    html: <div class="easyui-tabs" style="height: 250px;" tools="#t_rank&quo ...

  6. Educational Codeforces Round 13 E. Another Sith Tournament 概率dp+状压

    题目链接: 题目 E. Another Sith Tournament time limit per test2.5 seconds memory limit per test256 megabyte ...

  7. Java多线程——<四>让线程有返回值

    一.概述 到目前为止,我们已经能够声明并使一个线程任务运行起来了.但是遇到一个问题:现在定义的任务都没有任何返回值,那么加入我们希望一个任务运行结束后告诉我一个结果,该结果表名任务执行成功或失败,此时 ...

  8. powerdesigner使用之——从“概念模型”到“物理模型”

    现实问题在计算机上的解决,需要我们从现实问题中抽象出实体模型,然后再将实体模型对应到数据库关系表中. 例如,我们在思考学生选课,这件事情上,实体模型就是“学生”和“课程”两个 此时,我们使用power ...

  9. 20160725noip模拟赛“Paodekuai” alexandrali

    T1: 我们可以用火柴棒来表示十进制下的0~9, 如图所示 现给定火柴数n, 问用这n根火柴能组成的最小数和最大数分别是多少. 所有火柴必须全部用完, 并且所有数字必须是正的且不含前缀零. [解题] ...

  10. JavaScript高级---桥模式设计

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...