一、注意定义jquery变量的时候添加var关键字
这个不仅仅是jquery,所有javascript开发过程中,都需要注意,请一定不要定义成如下:
$loading = $('#loading'); //这个是全局定义,不知道哪里位置倒霉引用了相同的变量名,就会郁闷至死的
二、请使用一个var来定义变量
如果你使用多个变量的话,请如下方式定义:
. 代码如下:
var page = 0,
$loading = $('#loading'),
$body = $('body');
. 代码如下:
var $loading = $('#loading');
. 代码如下:
$('#loading').html('完毕');
$('#loading').fadeout();
. 代码如下:
var $loading = $('#loading');
$loading.html('完毕');$loading.fadeout();
. 代码如下:
var $loading = $('#loading');
$loading.html('完毕').fadeout();
. 代码如下:
// !!反面人物
$button.click(function(){
$target.css('width','50%');
$target.css('border','1px solid #202020');
$target.css('color','#fff');
});
. 代码如下:
$button.click(function(){
$target.css({'width':'50%','border':'1px solid #202020','color':'#fff'});
});
. 代码如下:
if(!$something) {
$something = $('#something ');
}
. 代码如下:
$something= $something|| $('#something');
. 代码如下:
$('#content').hide();
. 代码如下:
$('#content p').hide();
. 代码如下:
var receivenewsletter = $('#nslform input.on');
. 代码如下:
var content = $('p#content'); // 非常慢,不要使用
. 代码如下:
var traffic_light = $('#content #traffic_light'); // 非常慢,不要使用
. 代码如下:
var header = $('#header');
var menu = header.find('.menu');
// 或者
var menu = $('.menu', header);
. 代码如下:
var linkcontacts = $('.contact-links p.side-wrapper');
. 代码如下:
var linkcontacts = $('a.contact-links .side-wrapper');
. 代码如下:
var ps = $('.testp', '#pagebody'); // 2353 on firebug 3.6
var ps = $('#pagebody').find('.testp'); // 2324 on firebug 3.6 - the best time
var ps = $('#pagebody .testp'); // 2469 on firebug 3.6
. 代码如下:
$.extend($.expr[':'], {
abovethefold: function(el) {
return $(el).offset().top < $(window).scrolltop() + $(window).height();
}
});
var nonvisibleelements = $('p:abovethefold'); // 选择元素
. 代码如下:
var header = $('#header');
var ps = header.find('p');
var forms = header.find('form');
当要进行dom插入时,将所有元素封装成一个元素
二十一、直接的dom操作很慢。尽可能少的去更改html结构。
. 代码如下:
var menu = '<ul id="menu">';
for (var i = 1; i < 100; i++) {
menu += '<li>' + i + '</li>';
}
menu += '</ul>';
$('#header').prepend(menu);
// 千万不要这样做:
$('#header').prepend('<ul id="menu"></ul>');
for (var i = 1; i < 100; i++) {
$('#menu').append('<li>' + i + '</li>');
尽管jquery不会抛出大量的异常给用户,但是开发者也不要依赖于此。jquery通常会执行了一大堆没用的函数之后才确定一个对象是否存在。所以在对一个作一系列引用之前,应先检查一下这个对象存不存在。
二十三. 使用直接函数,而不要使用与与之等同的函数
为了获得更好的性能,你应该使用直接函数如$.ajax(),而不要使用$.get(),$.getjson(),$.post(),因为后面的几个将会调用$.ajax()。
二十四、缓存jquery结果,以备后来使用
你经常会获得一个javasript应用对象——你可以用app.来保存你经常选择的对象,以备将来使用:
. 代码如下:
app.hiddendivs = $('p.hidden');
// 之后在你的应用中调用:
app.hiddendivs.find('span');
. 代码如下:
$('#head').data('name', 'value');
// 之后在你的应用中调用:
$('#head').data('name');
. 代码如下:
$('html').addclass('js');
. 代码如下:
/* 在css中 */
.js #mydiv{display:none;}
. 代码如下:
$("table").delegate("td", "hover", function(){
$(this).toggleclass("hover");
});
. 代码如下:
// 也不要使用
$(document).ready(function (){
// 代码
});
// 你可以如此简写:
$(function (){
// 代码
});
. 代码如下:
// 在firebug控制台记录数据的快捷方式
$.l($('p'));
// 获取unix时间戳
$.time();
// 在firebug记录执行代码时间
$.lt();
$('p');
$.lt();
// 将代码块放在一个for循环中测试执行时间
$.bm("var ps = $('.testp', '#pagebody');"); // 2353 on firebug 3.6
. 代码如下:
$('<style type="text/css"> p.class { color: red; } </style>')
.appendto('head');
如对本文有疑问, 点击进行留言回复!!
MFC的静态库.lib、动态库.dll(包含引入库.lib)以及Unicode库示例
CTF 刷题记录(一) 白云新闻搜索(手动与自动化SQL注入)
javascript如何使用函数random来实现课堂随机点名方法详解
网友评论