一、优化选择器执行速度
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是选择器查找的范围。这样会比在全局查找效率高一些。
实例:
二、处理选择器不规范元素
1. 选择器属性中包含特殊符号:特殊字符前添加转义字符\\。
2. 选择器中空格符:包含空格时表示祖先元素和后代元素的关系;不包含空格时表示一个选择器中两种筛选条件的合并。
三、解决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元素直接操作的次数。
- 使用子查询优化选择器性能。
五、区分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对象。