发布于 2016-08-29 11:28:51 | 116 次阅读 | 评论: 0 | 来源: 网友投递
jQuery javascript框架
jQuery是一个兼容多浏览器的javascript框架,核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript高手加入,由Dave Methvin率领团队进行开发。
1. 从Google Code加载jQuery
Google Code上已经托管了多种JavaScript类库,从Google Code上加载jQuery比直接从你的服务器加载更有优势。它节省了你服务器上的带宽,能够很快的从Google的内容分布网络(CDN)上加载JS类库。更重要的是,如果用户访问那些发布在Google Code上的站点后它会被缓存下来。
这样做很有意义。有多少站点使用了没有被缓存的相同jQuery副本,而这些很容易做到,引入:
<script type="text/javascript" src=" http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
2. 使用备忘单
不仅仅是jQuery,很多编程语言也有类似的备忘单,在一张A4的纸上就可以很容易看到每个函数的用法。幸运的是已经有好心的家伙把jQuery的备忘单做得很完善了:
http://www.gscottolson.com/weblog/2008/01/11/jquery-cheat-sheet/
http://colorcharge.com/jquery/
3. 整合所有的脚本并缩减它们
不错,这是JavaScript的一个常见技巧。可是一个使用了jQuery的大项目可能使用了很多相关的jQuery插件(本站就使用了easing,localScroll,lightbox,preload),因此它通常是适用的。浏览器不能同时加载JS脚本(大多数情况下),这意味着如果你同一时间加载很多脚本的话,将减缓页面的加载速度。因此,如果每个页面都要加载这些脚本,你应该考虑在发布之前将这些脚本整合成一个稍大的JS脚本。一些jQuery插件已经最小化了,但是你应该打包你的JS脚本和那些没有缩减过的脚本,这仅需要几秒的时间就可以完成。
就个人而言,我推荐Packer by Dean Edwards
4. 使用Firebug出色的控制台日志工具
如果你还没有安装Firebug,那么你真的应该把它装上。除了许多其它有用的特性(比如允许你检查http传输情况、发现你的CSS问题),它也有极好的日志命令,允许你很容易调试JS脚本。
这里有Firebug所有特性的详细说明。
我最喜欢的特性有”console.info“,通过它你可以把信息和变量值输出到控制台上,而不必使用alert;”console.time”则允许你在一组代码上设置定时器,从而计算出JS脚本运行所花费的时间。这一切都很容易做到:
console.time('create list');
for (i = 0; i < 1000; i++) {
var myList = $('.myList');
myList.append('This is list item ' + i);
}
console.timeEnd('create list');
for (i = 0; i < 1000; i++) {
var myList = $('.myList');
myList.append('This is list item ' + i);
}
var myList = $('.myList');
for (i = 0; i < 1000; i++) {
myList.append('This is list item ' + i);
}
6. 最小化DOM操作
我们通过减少对DOM的插入操作可以让上面的代码运行得更快。DOM的插入操作(像.append(),.prepend(),.after(),.wrap())是相当耗时的,执行这些操作会拖慢程序的运行。
我们所要做的就是使用字符串拼接来构造一个list项并用一个函数往列表里添加这些项,比如.html()。请看下面的例子:
var myList = $('#myList');
for (i=0; i<1000; i++){
myList.append('This is list item ' + i);
}
var myList = $('.myList');
var myListItems = '';
for (i = 0; i < 1000; i++) {
myListItems += '<li>This is list item ' + i + '</li>';
}
myList.html(myListItems);
var myList = $('.myList');
var myListItems = '<ul>';
for (i = 0; i < 1000; i++) {
myListItems += '<li>This is list item ' + i + '</li>';
}
myListItems += '</ul>';
myList.html(myListItems);
// Create our list
var myList = $('.myList');
var myListItems = '<ul>';
for (i = 0; i < 1000; i++) {
myListItems += '<li class="listItem' + i + '">This is a list item</li>';
}
myListItems += '</ul>';
myList.html(myListItems);
// Select each item once
for (i = 0; i < 1000; i++) {
var selectedItem = $('.listItem' + i);
}
// Create our list
var myList = $('.myList');
var myListItems = '<ul>';
for (i = 0; i < 1000; i++) {
myListItems += '<li id="listItem' + i + '">This is a list item</li>';
}
myListItems += '</ul>';
myList.html(myListItems);
// Select each item once
for (i = 0; i < 1000; i++) {
var selectedItem = $('#listItem' + i);
}
9. 给选择器提供上下文
默认情况下,当你使用类似$('.myDiv')的选择器时将在整个DOM文档查找元素,这有很大的代价。
当执行选择操作时,jQuery函数可以指定第二个参数:jQuery( expression, context )通过给选择器提供一个上下文,那就会在这个context中进行元素查找,而不必在整个DOM文档中查找元素。
为了解释这个,我们采用前面的第一段代码。它创建一个有1000项内容的UL,每项都有一个单独的class。
然后遍历之每次选择一项。你应该记得通过class选择所有的1000项item需要耗时5秒多。
var selectedItem = $('#listItem' + i);
var selectedItem = $('#listItem' + i, $('.myList'));
$('myDiv').removeClass('off').addClass('on');
$('#mypanel')
.find('TABLE .firstCol')
.removeClass('.firstCol')
.css('background' : 'red')
.append('<span>This cell is now red</span>');
$('#myTable').find('.firstColumn').css('background','red');
$('#myTable')
.find('.firstColumn')
.css('background','red')
.end()
.find('.lastColumn')
.css('background','blue');
$.fn.makeRed = function() {
return $(this).css('background', 'red');
}
$('#myTable').find('.firstColumn').makeRed().append('hello');
11. 学会正确使用效果
在我刚开始使用jQuery的时候,就很喜欢这一点:它可以很容易使用预定义好的各种动画效果,像slideDown()和fadeIn()之类的。由于jQuery提供的animate()方法十分易用和强大,我们很容易深入使用它。事实上,在jQuery源代码中不少方法就是通过animate()函数来实现效果的。
slideDown: function(speed,callback){
return this.animate({height: "show"}, speed, callback);
},
fadeIn: function(speed, callback){
return this.animate({opacity: "show"}, speed, callback);
}
$('#myList li').mouseover(function() {
$(this).animate({"height": 100}, "slow");
});
$('#myBox').mouseover(function() {
$(this).animate({ "width": 200 }, "slow");
$(this).animate({"height": 200}, "slow");
});
$('#myBox').mouseover(function() {
$(this).animate({ "width": 200, "height": 200 }, "slow");
});
12. 了解事件代理
与之前相比,jQuery能够更容易得向DOM元素无缝添加事件。这是很棒的特性,然而向元素添加太多的事件是效率很差的。在很多情况下事件代理允许你用少量的事件实现同样的目的。最好的解释方法就是使用实例:
$('#myTable TD').click(function(){
$(this).css('background', 'red');
});
$('#myTable').click(function(e) {
var clicked = $(e.target);
clicked.css('background', 'red');
});
<div class="menuItem expanded">
<div class="button">
click me
</div>
<div class="panel">
<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
</ul>
</div>
</div>
$('.button').click(function() {
var menuItem = $(this).parent();
var panel = menuItem.find('.panel');
if (menuItem.hasClass("expanded")) {
menuItem.removeClass('expanded').addClass('collapsed');
panel.slideUp();
}
else if (menuItem.hasClass("collapsed")) {
menuItem.removeClass('collapsed').addClass('expanded');
panel.slideDown();
}
});
$('#myDiv').data('currentState', 'off');
$('.button').click(function() {
var menuItem = $(this).parent();
var panel = menuItem.find('.panel');
if (menuItem.data('collapsed')) {
menuItem.data('collapsed', false);
panel.slideDown();
}
else {
menuItem.data('collapsed', true);
panel.slideUp();
}
});
$.extend($.expr[':'], {
over100pixels: function(a) {
return $(a).height() > 100;
}
});
$('.box:over100pixels').click(function() {
alert('The element you clicked is over 100 pixels high');
});
16. 精简你的HTML并在页面加载后修改它
这个标题可能没有多大意思,但是这个技巧可能理顺你的代码、减小代码体积和页面的下载时间、有助优化你的搜索引擎。请看下面的例子:
<div class="fieldOuter">
<div class="inner">
<div class="field">This is field number 1</div>
</div>
<div class="errorBar">
<div class="icon"><img src="icon.png" alt="icon" /></div>
<div class="message"><span>This is an error message</span></div>
</div>
</div>
<div class="fieldOuter">
<div class="inner">
<div class="field">This is field number 2</div>
</div>
<div class="errorBar">
<div class="icon"><img src="icon.png" alt="icon" /></div>
<div class="message"><span>This is an error message</span></div>
</div>
</div>
<div class="field">This is field 1</div>
<div class="field">This is field 2</div>
<div class="field">This is field 3</div>
<div class="field">This is field 4</div>
<div class="field">This is field 5</div>
$(document).ready(function() {
$('.field').before('<div class="fieldOuter"><div class="inner">');
$('.field').after('</div><div class="errorBar"><div class="icon">
<img src="icon.png" alt="icon" /></div><div class="message">
<span>This is an error message</span></div></div></div>');
});
$('#forms').load('content/headerForms.html', function() {
// Code here runs once the content has loaded
// Put all your event handlers etc. here.
});
$('#selectList').val();
$('#selectList').val();
$('#myImage').attr('src', 'image.jpg').load(function() {
alert('Image Loaded');
});
22. 如何检查元素是否存在
你不必检查元素是否在页面上存在就可以使用它,因为如果没有在DOM中找到合适的元素,jQuery什么也不会做。可是当我们需要检查元素是否被选择了,或是有多少项被选择了,你可以使用length属性:
if ($('#myDiv).length) {
// your code
}
$('HTML').addClass('JS');
.JS #myDiv{display:none;}
<a href="#" class="popup">Click me!</a>
$('popup').click(function(){
// Launch popup code
});
$('popup').click(function(){
// Launch popup code
return false;
});
25. ready事件的简写
一个小技巧但是通过使用$(document).ready()的简写,你可以少输入几个字符。
取代:
$(document).ready(function (){
// your code
});
$(function (){
// your code
});