选择器优化执行的速度

  • 选择器 优先:id>元素>类
  • 使用对象缓存:即使用变量来保存对象名,var $myDiv = $("#myDiv");$myDiv.show();
  • DOM元素查找可给上下文范围;$(exp,[context]);exp--被查询元素,context--范围
    •   var $obj = $("#myDiv");$obj.$(".div000",".myClass");在myClass这个类元素下查找div000元素;
    • 多层查询,使用子查询方式查找,如查询p元素
      <div id="box">
      <span></span>
      <div id="content">
      <p></p>
      </div>
      </div>

        $parent = $("div #content");$child = $parent.find("p");

处理选择器中不规范元素标志;防止有些选择器命名含有特殊字符

  在特殊字符前加入转义符\\;例如:查询"div#2#"的元素;$("div\\#2\\#").html();

data()方法缓存数据;

  •   针对元素定义数据,在元素中存取数据,避免数据被循环引用而出现不必要的风险

循环操作DOM的优化:

  • 一次性对DOM操作,而不是每次循环都操作DOM
  • 例如:动态新增<li>
  • $(function(){
    var arrList = ["list0","list1","list2"];
    var strList = "";
    $.each(arrList,function(index){
    strList = "<li>" + arrList[index] + "</li>"
    });
    $("ul").append(strList);
    }) //而不是 $.each(arrList,function(index){
    $("ul").append( "<li>" + arrList[index] + "</li>");
    });

  

jquery库和其他库冲突,$指向问题;

  • jQuery.noConflict();转移$的使用权;转移后jquery使用本身jquery对象访问

  

data()方法缓存数据,针对于元素定义数据

  • data([name]);存储数据名称
  • data(name,value);
  • data(name,{name1:value1,name2:value2});
  • removeData(name);
         

jquery优化的更多相关文章

  1. 新手必看的jQuery优化笔记十则

    jQuery优化 1.简介 jQuery正在成为Web开发人员首选的JavaScript库,作为Web开发者,除了要了解语言和框架的应用技巧外,如何提升语言本身的性能也是开发人员应该思考的问题.文章就 ...

  2. jquery优化引发的思考

    无意间看到jquery优化的一个细节让我觉得不可思议记录一下.仅仅只是换个地方代码就能提高数倍的效率,带给我的不是个仅是个小技巧,而是一总编程思想,技术大牛往往是在细节上体现. 通过缓存最小化选择操作 ...

  3. jquery优化28个建议

    我一直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些.找了很多文章后,我决定将最好最常用的一些优化性能的建议列出来.我也做了一个jQuery性能优化的简明样式表,你可 ...

  4. jquery优化轮播图2

    继续优化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  5. jQuery优化性能的十种方法

    1,总是从ID选择器开始继承 例如: <div id="content"> <form method="post" action=" ...

  6. jquery优化02

    缓存变量:DOM遍历是昂贵的,所以尽量将会重用的元素缓存. $element = $('#element'); h = $element.height(); //缓存 $element.css('he ...

  7. ☀【jQuery 优化】jQuery基础教程(第3版)

    jQuery代码优化:选择符篇 √ http://www.ituring.com.cn/article/377 jQuery代码优化:遍历篇 √ http://www.ituring.com.cn/a ...

  8. jquery优化01

    查找: children:     find(selector), children(selector): parent:       parent(), parents(selector), clo ...

  9. 15 款优化表单的 jQuery 插件

    网页上的表单提供给用户的一种交互的方式,用户输入数据,提交到服务器,等待后续的处理.这些表单在我们浏览的网页中随处可见,也容易被我们忽略. 比如,“联系我们”页面会提供一个表单给用户填写他们的信息和想 ...

随机推荐

  1. 4.Linux文件系统层次体系标准

    这是不完整的linux文件系统层次体系标准,不是所有Linux发行版都根据这个标准,但大多数都是: 目录 评论 / 根目录,万物起源. /bin 包含系统启动和运行所必须的二进制程序. /boot 包 ...

  2. PHP开发必用的mysql那么你知道Mysql中MyISAM和InnoDB的区别吗?

    构成上的区别: 每个MyISAM在磁盘上存储成三个文件.第一个文件的名字以表的名字开始,扩展名指出文件类型. .frm文件存储表定义. 数据文件的扩展名为.MYD (MYData). 索引文件的扩展名 ...

  3. SQL Server ->> PERCENTILE_CONT、PERCENTILE_DISC 和 PERCENT_RANK 函数

    PERCENTILE_CONT和PERCENTILE_DISC都是为了计算百分位的数值,比如计算在某个百分位时某个栏位的数值是多少.他们的区别就是前者是连续型,后者是离散型.CONT代表continu ...

  4. Linux ->> Apt-get命令安装软件

    Apt全称Advanced Package Tool.Apt-get适用于deb包管理式的操作系统,主要用于自动从互联网的软件仓库中搜索.安装.升级.卸载软件或操作系统. 用法: apt-cache ...

  5. Day02——Python基本数据类型

    一.运算符 1.算数运算符 2.比较运算符 3.复制运算符 4.逻辑运算符 5.成员运算符 二.基本数据类型 1.数字 整数(int) 在32位机器上,整数的位数为32位,取值范围为-2**31-2* ...

  6. C#图解教程读书笔记(第3章 类型、存储及变量)

    1.C#的中的数值不具有bool特性. 2.dynamic在使用动态语言编写的程序集时使用,这个不太明白,看到后面需要补充!! 动态化的静态类型 3.对于引用类型,引用是存放在栈中,而数据是存放在堆里 ...

  7. linux 里的`反引号

    Shell中可以将数字或字符直接赋予变量,也可以将Linux命令的执行结果赋予变量,如下: (1) $ count=9           #将数字赋予变量count (2) $ name=" ...

  8. HTML和CSS实现常见的布局

    https://segmentfault.com/a/1190000003931851#articleHeader15

  9. BZOJ5293:[BJOI2018]求和(LCA,差分)

    Description master 对树上的求和非常感兴趣.他生成了一棵有根树,并且希望多次询问这棵树上一段路径上所有节点深度的k  次方和,而且每次的k 可能是不同的.此处节点深度的定义是这个节点 ...

  10. vs使用libevent

    1.下载最新libevent-2.1.8-stable,并解压 2.使用vs2013 工具这里使用x64,这里更新一下,改为使用x86 进入到libevent目录 运行 nmake /f Makefi ...