1 使用JQuery的ready处理器
如果你的代码操作DOM,则需要DOM加载完成后再运行代码。推荐使用如下的第一种写法,第二种写法在JQuery3.x中已经不推荐使用了。
$(function () {
/* 你的代码 */
}); //或者
$(document).ready(function () {
/* 你的代码 */
});
2 用noConflict()避免冲突并定义别名
如果你的jQuery代码与其它使用$符号作为别名的类库冲突,则使用noConflict()方法定义别名。
$jq = jQuery.noConflict();
$jq(function () {
/* 你的代码 */
}
3 缓存JQuery对象及链式调用
调用jQuery选择器函数$()代价较大,反复调用效率更低。
3.1 错误的方式
//错误
$('#list li').addClass('strong');
$('#list li').css('color', 'red');
3.2 缓存JQuery对象
//正确
var $li = $('#list li');
$li.addClass('strong');
$li.css('color', 'red');
3.3 链式调用
//正确
$('#list li').addClass('strong').css('color', 'red');
4 JQuery变量命名习惯
jQuery包装变量通常以$开头,以区别于标准JavaScript对象。
//良好的命名习惯
var $li = $('#list li');
5 利用DOM原生的属性和函数
虽然jQuery的目标之一是对DOM进行抽象,但利用DOM原生的属性和函数效率更高。在不了解DOM的情况下学习jQuery的人中最常犯的错误之一就是利用jQuery访问元素的属性。
5.1 冗长而缓慢
$('img').click(function () {
$(this).attr('src');
});
5.2 简洁而快速
$('img').click(function () {
this.src;
});
6 创建元素的通用语法
6.1 创建元素通用语法方式
$('<p>', {
text: p_text,
"class": 'red',
title: p_title,
id: p_id
}).appendTo("#myDiv");
6.2 字符串拼接方式
$('<p class="red" id="'+p_id+'" title="'+p_title+'">'+p_text+'</p>').appendTo(#myDiv);
虽然上述两种方式语法正确,功能相同,但是第一种方式更好。第二种字符串拼接的方式可读性差,也更脆弱。
第一种方式对特殊字符的输入是十分强大的。但第二种方式效率较第一种方式更好一些。