[转]整理jquery使用好习惯
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使用好习惯的更多相关文章
- [转]整理jquery开发技巧
1.创建一个嵌套的过滤器 1.$(jquery).filter(":not(:has(.selected))") //去掉所有不包含class为.selected的元素 2.使 ...
- 前端面试题整理—jQuery篇
1.为什么使用jquery,他有哪些好处? 1)轻量级.代码简洁 2)强大的选择器,出色的DOM操作封装 3)有可靠的事件处理机制 4)浏览器兼容性好 5)支持链式操作 6)支持丰富的插件 2.jqu ...
- [整理] jQuery插件开发
1.类级别的插件开发 类级别的插件开发,可似为给jQuery类添加方法,调用方式:$.你的方法(),如:$.ajax() 函数. 1.1.给jQuery类添加方法 $.alertMsg = funct ...
- jQuery选择器使用习惯
http://www.cnblogs.com/fredlau/archive/2009/03/19/1416327.html
- jQuery整理笔记文件夹
jQuery整理笔记文件夹 jQuery整理笔记一----jQuery開始 jQuery整理笔记二----jQuery选择器整理 jQuery整理笔记三----jQuery过滤函数 jQuery整理笔 ...
- 解析Jquery取得iframe中元素的几种方法
iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作,需要的朋友可以参考下 DOM方法:父窗口操作IFRAME:window.frames[&q ...
- jQuery 2.0.3 源码分析Sizzle引擎 - 高效查询
为什么Sizzle很高效? 首先,从处理流程上理解,它总是先使用最高效的原生方法来做处理 HTML文档一共有这么四个API: getElementById 上下文只能是HTML文档 浏览器支持情况:I ...
- jQuery从无知到无所不知
说明: 本文以读书笔记的方式整理jQuery的重要知识点,言简意赅,一语中的,删繁就简,引人入胜. 本文先对jQuery强大的功能作一系统的介绍,再详细整理jQuery的选择器.过滤器.DOM操作.事 ...
- 《锋利的Jquery第二版》读书笔记 第一章
按照书本介绍顺序整理jquery库相关的语法.要点. window.onload与$(document).ready()功能类似,前者需要所有资源加载完毕,且不能同时编写多个:后者加载完DOM结构即执 ...
随机推荐
- jquery 图片遮罩 坠落遮挡效果
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- fpga串口通信
---恢复内容开始--- 1.波特率的计算公式:9600bps 是指每秒可以传输9600位 则一位需要的时间为1/9600 约等于0.000104 开发板晶振大小为50M则传输一位需要的时间为 0.0 ...
- java操作mongodb——连接数据库
import com.mongodb.MongoClient; MongoClient mongoClient = new MongoClient(); 连接MongoDB实例,默认为localhos ...
- RockMongo 安装
1. yum install php-pecl-http php 2. yum install httpd 3. yum install php-devel 4. pecl install mongo ...
- openstack私有云布署实践【11.2 计算nova - compute节点配置(办公网环境)】
这里我只使用compute1节点配置为示例,其它节点的配置基本是一样的,只是声明的管理IP不同而已 计算节点 # yum install openstack-nova-compute sysfsu ...
- Qt 外观之一 ——Qt Style Sheet
Qt Style Sheet 目录 使用 对于应用程序 创建自定义控件 QSS语法 一般选择器(selector) 伪选择器 解决冲突 使用specificity Namespace冲突 级联效应 设 ...
- [NYLG-OJ] 77 开灯问题(白书例题)
#include<stdio.h> int main() { int a[1010]={0}; //储存灯的开闭情况 int n,k,i,j; scanf("%d%d" ...
- jquery获取radio的值
Html代码是 <label><input type="radio" name="proofing" value="1"& ...
- c#中,委托Func的简单实践
c# 委托Func的简单实践最近才真正的接触委托,所以针对Func类型的委托,做一个实践练习. 首先说一些我对委托的初级理解:"就是把方法当做参数,传进委托方法里". 我平时用到的 ...
- JAVA MONGODB group查询的UTC时间问题
BasicDBList dateList = new BasicDBList(); dateList.add("$t"); dateList.add(28800000); DBOb ...