读<jquery 权威指南>[7]-性能优化与最佳实践
一、优化选择器执行速度
1. 优先使用ID选择器和标记选择器
- 使用选择器时应该首选ID选择器($("#id")),其次是标记选择器($("div")),最后再选用class、属性等选择器。
- 避免重复使用ID号修饰ID号,例如$("#div1 #div2")。也避免使用tag,class等修饰ID号,例如$(".title #id")。
- 使用属性选择器时,尽量使用标记进行修饰。例如$(div[title='aa'])。
2. 使用jQuery对象缓存
- 如果多次操作同一个DOM元素,可以将其存在全局变量中,避免重复调用选择器。
- 缓存JQuery的变量命名规则尽量以$开头。
- 如果同一个DOM对象进行多个操作,尽量使用链式写法。
3. 给选择器一个上下文
格式:$(expression,[context]),expression是选择器表达式,context是选择器查找的范围。这样会比在全局查找效率高一些。
实例:
<script type="text/javascript">
$( function() {
window.$objPub = { //在全局范围中,定义一个windows对象
$objTmp0: $( "#div0", ".MyCls0" ),
$objTmp1: $( "#div1")
}
TestFun();
})
function TestFun() { //自定义显示div内容的函数
$objPub.$objTmp0.html( "Tmp0").css("width" ,"100px");
$objPub.$objTmp1.html( "Tmp1");
}
</script >
二、处理选择器不规范元素
1. 选择器属性中包含特殊符号:特殊字符前添加转义字符\\。
2. 选择器中空格符:包含空格时表示祖先元素和后代元素的关系;不包含空格时表示一个选择器中两种筛选条件的合并。
<script type="text/javascript">
$( function() {
var $objTmp0 = $(".MyCls :hidden" );//含有空格符,.MyCls子元素中的隐藏元素
var $objTmp1 = $(".MyCls:hidden" );//没有空格符,.MyCls类名并且隐藏的元素
var $objTest = $("#div\\[test\\]" );//选择器特殊符号
})
</script >
三、解决jQuery库与其他库$冲突问题
使用jQuery.noConflict()转让$使用权,然后只能使用jQuery变量访问jQuery对象。
1.jQuery库先于其他库导入
无需使用jQuery.noConflict()方法。只要使用jQuery方法时不要使用$符号而是使用jQuery符号就可以了。
2.jQuery库后于其他库导入
需要先使用jQury.noConflict(),然后使用jQuery符号操作jQuery中的对象。如果仍然想使用简洁符号,有两种方法
①自定义其他符号用作快捷方式:
var j=jQuery.noConflict();
j( function() {
j( "#Button1").click(function () {
获取对象
var $objTmp = j("#txtName" );
显示内容
j( "#divTmp").html("J_" + $objTmp.val());
})
})
②在jQuery方法内部继续使用$符号。
jQuery.noConflict();
jQuery( function($) {
$( "#Button1").click(function () {
//获取对象
var $objTmp = $("#txtName" );
//显示内容
$( "#divTmp").html("J_" + $objTmp.val());
})
})
四、其他优化
- 尽量减少对DOM元素直接操作的次数。
<script type="text/javascript">
$( function() {
//定义数组
var arrList = ["list0" , "list1", "list2", "list3" , "list4", "list5"];
var strList = "" ; //初始化字符
$.each(arrList, function(index) {
//遍历后累加数组元素
strList += ( "<li>" + arrList[index] + "</li>" );
})
//一次性完成DOM元素的增加
$( "#ulFrame").append(strList);
})
</script >
- 使用子查询优化选择器性能。
五、区分DOM对象和jQuery对象
1.DOM对象和jQuery对象定义的区别
- DOM对象:通过传统js方法获取的DOM元素对象;
- jQuery对象:通过jQuery方法包装原始的DOM对象后生成的新对象。
2.DOM对象和jQuery对象的转换
如果想使DOM对象和jQuery对象之间的方法相互调用,需要先将对象进行类型转换。
- DOM转jQuery:DOM对象通过$()方法进行包装就可以转换为jQuery对象。
- jQuery转DOM:通过get(index)或者[index]方法,可以将jQuery对象转换为DOM对象。
<script type="text/javascript">
$( function() {
//***** DOM对象转成jQuery对象 *****//
//DOM对象
var objDom0 = document.getElementById("div0");
//转成jQuery对象
var $obj0 = $(objDom0);
//调用jQuery中的方法设置其中的内容
$obj0.html( "DOM对象转成jQuery对象后设置的内容" ); //***** jQuery对象转成DOM对象 *****//
//jQuery对象
var $obj1 = $("#div1" );
//转成DOM对象
var objDom1 = $obj1[0];//或者$obj1.get(0);
//调用JavaScript中的对象方法设置内容
objDom1.innerHTML = "jQuery对象转成DOM对象后设置的内容" ;
})
</script >
读<jquery 权威指南>[7]-性能优化与最佳实践的更多相关文章
- 读<jquery 权威指南>[1]-选择器及DOM操作
今天是小年了,2013马上要过去了,但是学习不能间断啊.最近正在看<jQuery权威指南>,先温习一下选择器和DOM操作. 一.基本选择器 1.table单双行: $(function ( ...
- 读<jquery 权威指南>[3]-动画
一. 显示与隐藏——hide(),show() 1. 方法: hide(speed,[callback]); show(speed,[callback]); 说明:这两个方法还可以实现带动画效果的显示 ...
- 读<jquery 权威指南>[4]-Ajax
一.获取异步数据 jQuery可以从服务器异步获得静态数据. ①load() $.load(url,data,callback) url要加载的页面地址, data发送到服务器的数据key/value ...
- 读<jQuery 权威指南>[5]-插件
一.说明 jQuery插件官网:http://plugins.jquery.com/ 使用插件时引用顺序:插件引用要位于主jquery库之后. 二.插件应用实例 演示插件jquery.validate ...
- 读<jQuery 权威指南>[6]--实用工具函数
官方地址:http://api.jquery.com/category/utilities/ 一.数组和对象操作 1. $.each——遍历 $.each(obj,function(param1,pa ...
- 读<jquery 权威指南>[2]-事件
1. 事件冒泡 阻止事件冒泡的两种方式: event.stopPropagation(); return false ; 2. 绑定事件——bind(type,[data],function) ty ...
- 跟小静读《jQuery权威指南》——目录
前言 2014年开始了,年底给自己制订的学习计划,第一步先从学习<jQuery权威指南>开始. jQuery大家都很比较熟悉,但是我经常是边用的时候边对照着API,这次找本书通读一遍,记录 ...
- 《jQuery权威指南》学习笔记之第2章 jQuery选择器
2.1 jQuery选择器概述 2.1.1 什么使选择器 2.1.2 选择器的优势: 代码更简单,完善的检测机制 1.代码更简单 示例2-1 使用javascript实现隔行变色 < ...
- 如何让HTTPS站点评级达到A+? 还得看这篇HTTPS安全优化配置最佳实践指南
0x00 前言简述 SSL/TLS 简单说明 描述: 当下越来越多的网站管理员为企业站点或自己的站点进行了SSL/TLS配置, SSL/TLS 是一种简单易懂的技术,它很容易部署及运行,但要对其进行安 ...
随机推荐
- Linux 下修改配置实现在当前目录下寻找可执行文件
# vim .bash_profile 添加 export LD_LIBRARY_PATH=$LD_LIBRARY_PATH:. # vreboot
- windows7 professional.iso
目前使用的笔记本是PC,在重新安装系统的时候,我比较挑剔. 我希望它是原样的,我希望它能够 windows update,拥有 office 2007/2003,它的个人文件夹就原封不动地在默认在 C ...
- VBA好的插件
VBE 小插件--- Office 编程助手 :http://club.excelhome.net/thread-1055425-1-1.html VB以及VBA的编程助手MZ-tools7.0破解版 ...
- CSS 颜色代码大全//////////////////////z
FFFFFF #DDDDDD #AAAAAA #888888 #666666 #444444 # #FFB7DD #FF88C2 #FF44AA #FF0088 #C10066 #A2005 ...
- 开发板A/D转换原理
A/D转换器(Analog-to-Digital Converter)又叫模/数转换器,即使将模拟信(电压或是电流的形式)转换成数字信号.这种数字信号可让仪表,计算机外设接口或是微处理机来加以操作或是 ...
- redis windows下使用及redis命令
出自:http://www.cnblogs.com/chenping-987123/archive/2012/01/29/2331079.html Redis 是一个开源,高级的键值对的存储.它经常作 ...
- aws在线技术峰会笔记-游戏解决方案
选项1:可以将aws的SDK嵌入到APP中. 选项2:Mobile Hub自动生成代码. 选项3:开源免费的游戏引擎.可视化脚本编程,实现客户端的逻辑代码. 用户管理 Cognito Identity ...
- yii2中gii外网访问的配置方法
if (YII_ENV_DEV) { // configuration adjustments for 'dev' environment $config['bootstrap'][] = 'debu ...
- POSTGRESQL 数据库导入导出
导入整个数据库 psql -U postgres(用户名) 数据库名(缺省时同用户名) < /data/dum.sql 导出整个数据库 pg_dump -h localhost -U po ...
- python 高级特性
from http://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000 set set和dict ...