1.选择器Selector的使用
1)使用id定位性能最好

 
1.$("#id")

2)使用标签名定位,性能其次

 
1.$("p"),$("div"),$("input")

3)使用.class方法对于IE8或者更早版本来说性能很差

 
1.$(".class")

4)属性定位性能极差

 
1.$("[attribute=value]")
2.$(":hidden")

因此组合使用提高性能,减少对dom遍历

 
1.$("#gbdiv").find(":hidden")

2.链式调用

1)坏习惯

 
1.$("#gbdiv").hide();
2.$("#gbdiv").css("color", "#202020");
3.$("#gbdiv").show();

2)好习惯

 
1.$("#gbdiv").hide()
2.  .css("color", "#202020")
3.  .show()

好处在于你不用多次调用$("#gbdiv"),当然,如果你非要这样写,建议你考虑使用缓存方式

3.缓存

 
1.var
gbin1=$("#gbdiv");
2.gbin1.hide();
3.gbin1.css("color", "#202020");
4.gbin1.show();

4.循环语句

1)坏习惯

 
1.var
data = ["Saab","Volvo","BMW"];
2.$.each(data,
function(i, item){
3.  var newitem='<div>' + item + '</div>';
4.  $("#gbcontainer").append(newitem);  
5.});

以上代码中,我们将每一个新添加的tag都作为一个节点添加到容器ID中,实际上jQuery操作节点的成本也不低,更好的方式是尽可能的减少DOM操作

2)好习惯

 
1.var
data = ["Saab","Volvo","BMW"];
2.var
tmp = ''
3.$.each(data,
function(i, item){
4.    tmp +='<div>' + item + '</div>';
5.});
6.$("#gbcontainer").append(tmp);  

3)对于字符串特长的,字符串相加在IE6会有性能问题,那就如下

 
1.var
data = ["Saab","Volvo","BMW"];
2.var
tmp = []; 
3.$.each(data,
function(i, item){
4.    tmp.push('<div>' + item + '</div>')
5.});
6.$("#gbcontainer").append(tmp.join('\n'));  

5.事件代理

假如gbin1里有1000个div,添加click事件
1)坏习惯

 
1.$('#gbin1').find('div').click(function() {
2.    ......
3.});

你将绑定1000个事件

2)好习惯

 
1.$('#gbin1').on('click','div',function() {
2.    ......
3.});

使用.on方法,帮助你有效的优化性能:

[转]整理jquery使用好习惯的更多相关文章

  1. [转]整理jquery开发技巧

    1.创建一个嵌套的过滤器   1.$(jquery).filter(":not(:has(.selected))") //去掉所有不包含class为.selected的元素 2.使 ...

  2. 前端面试题整理—jQuery篇

    1.为什么使用jquery,他有哪些好处? 1)轻量级.代码简洁 2)强大的选择器,出色的DOM操作封装 3)有可靠的事件处理机制 4)浏览器兼容性好 5)支持链式操作 6)支持丰富的插件 2.jqu ...

  3. [整理] jQuery插件开发

    1.类级别的插件开发 类级别的插件开发,可似为给jQuery类添加方法,调用方式:$.你的方法(),如:$.ajax() 函数. 1.1.给jQuery类添加方法 $.alertMsg = funct ...

  4. jQuery选择器使用习惯

    http://www.cnblogs.com/fredlau/archive/2009/03/19/1416327.html

  5. jQuery整理笔记文件夹

    jQuery整理笔记文件夹 jQuery整理笔记一----jQuery開始 jQuery整理笔记二----jQuery选择器整理 jQuery整理笔记三----jQuery过滤函数 jQuery整理笔 ...

  6. 解析Jquery取得iframe中元素的几种方法

    iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作,需要的朋友可以参考下   DOM方法:父窗口操作IFRAME:window.frames[&q ...

  7. jQuery 2.0.3 源码分析Sizzle引擎 - 高效查询

    为什么Sizzle很高效? 首先,从处理流程上理解,它总是先使用最高效的原生方法来做处理 HTML文档一共有这么四个API: getElementById 上下文只能是HTML文档 浏览器支持情况:I ...

  8. jQuery从无知到无所不知

    说明: 本文以读书笔记的方式整理jQuery的重要知识点,言简意赅,一语中的,删繁就简,引人入胜. 本文先对jQuery强大的功能作一系统的介绍,再详细整理jQuery的选择器.过滤器.DOM操作.事 ...

  9. 《锋利的Jquery第二版》读书笔记 第一章

    按照书本介绍顺序整理jquery库相关的语法.要点. window.onload与$(document).ready()功能类似,前者需要所有资源加载完毕,且不能同时编写多个:后者加载完DOM结构即执 ...

随机推荐

  1. jquery 图片遮罩 坠落遮挡效果

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  2. fpga串口通信

    ---恢复内容开始--- 1.波特率的计算公式:9600bps 是指每秒可以传输9600位 则一位需要的时间为1/9600 约等于0.000104 开发板晶振大小为50M则传输一位需要的时间为 0.0 ...

  3. java操作mongodb——连接数据库

    import com.mongodb.MongoClient; MongoClient mongoClient = new MongoClient(); 连接MongoDB实例,默认为localhos ...

  4. RockMongo 安装

    1. yum install php-pecl-http php 2. yum install httpd 3. yum install php-devel 4. pecl install mongo ...

  5. openstack私有云布署实践【11.2 计算nova - compute节点配置(办公网环境)】

    这里我只使用compute1节点配置为示例,其它节点的配置基本是一样的,只是声明的管理IP不同而已   计算节点 # yum install openstack-nova-compute sysfsu ...

  6. Qt 外观之一 ——Qt Style Sheet

    Qt Style Sheet 目录 使用 对于应用程序 创建自定义控件 QSS语法 一般选择器(selector) 伪选择器 解决冲突 使用specificity Namespace冲突 级联效应 设 ...

  7. [NYLG-OJ] 77 开灯问题(白书例题)

    #include<stdio.h> int main() { int a[1010]={0}; //储存灯的开闭情况 int n,k,i,j; scanf("%d%d" ...

  8. jquery获取radio的值

    Html代码是 <label><input type="radio" name="proofing" value="1"& ...

  9. c#中,委托Func的简单实践

    c# 委托Func的简单实践最近才真正的接触委托,所以针对Func类型的委托,做一个实践练习. 首先说一些我对委托的初级理解:"就是把方法当做参数,传进委托方法里". 我平时用到的 ...

  10. JAVA MONGODB group查询的UTC时间问题

    BasicDBList dateList = new BasicDBList(); dateList.add("$t"); dateList.add(28800000); DBOb ...