本文会给你们展示50个jquery代码片段，这些代码能够给你的javascript项目提供帮助。其中的一些代码段是从jQuery1.4.2才开始支持的做法，另一些则是真正有用的函数或方法，他们能够帮助你又快又好地把事情完成。如果你发现你任何可以做得更好的地方的话，欢迎把你的版本粘贴在评论中!1. 如何修改jQuery默认编码（例如默认UTF-8改成改GB2312）：
$.ajaxSetup({
ajaxSettings:{ contentType:"application/x-www-form-chartset=GB2312"}
2. 解决jQuery, prototype共存，$全局变量冲突问题：
&script src="prototype.js"&&/script&
&script src="/jquery.js"&&/script&
&script type="text/javascript"&
jQuery.noConflict();
注意：一定要先引入prototype.js 再引入jquery.js，先后顺序不可错。3. jQuery 判断元素上是否绑定了事件
//jQuery event封装支持判断元素上是否绑定了事件，此方法只适用于jQuery绑定的事件var $events = $("#foo").data("events");
if( $events && $events["click"] ){
　　//your code}
4. 如何使用jQuery来切换样式表
//找出你希望切换的媒体类型（media-type），然后把href设置成新的样式表。$('link[media='screen']').attr('href', 'alternative.css');
5. 如何限制选择范围（基于优化目的）：
//尽可能使用标签名来作为类名的前缀，
//这样jQuery就不需要花费更多的时间来搜索
//你想要的元素。还要记住的一点是，
//针对于你的页面上的元素的操作越具体化，
//就越能降低执行和搜索的时间。var in_stock = $('#shopping_cart_items input.is_in_stock');
&ul id="shopping_cart_items"&
　　&li&&input type="radio" value="Item-X" name="item" class="is_in_stock" /& Item X&/li&
　　&li&&input type="radio" value="Item-Y" name="item" class="3-5_days" /& Item Y&/li&
　　&li&&input type="radio" value="Item-Z" name="item" class="unknown" /& Item Z&/li&
6. 如何正确地使用toggleClass：
//切换（toggle）类允许你根据某个类的
//是否存在来添加或是删除该类。
//这种情况下有些开发者使用：a.hasClass('blueButton') ? a.removeClass('blueButton') : a.addClass('blueButton');
//toggleClass允许你使用下面的语句来很容易地做到这一点a.toggleClass('blueButton');
7. 如何设置IE特有的功能：
if ($.browser.msie) {
// Internet Explorer就是个虐待狂}
8. 如何使用jQuery来代替一个元素：
$('#thatdiv').replaceWith('fnuh');
9. 如何验证某个元素是否为空：
// 方法一if (! $('#keks').html()) {
//什么都没有找到;}
// 方法二if ($('#keks').is(":empty")) {
//什么都没有找到;}
10. 如何从一个未排序的集合中找出某个元素的索引号
$("ul & li").click(function () {
　　var index = $(this).prevAll(). //prevAll([expr]): 查找当前元素之前所有的同辈元素});
11. 如何把函数绑定到事件上：
//方法一$('#foo').click(function(event) {
　　alert('User clicked on "foo."');
//方法二, 支持动态传参$('#foo').bind('click', {test1:"abc", test2:"123"}, function(event) {
　　alert('User clicked on "foo."' + event.data.test1 + event.data.test2 );
12. 如何追加或是添加html到元素中：
$('#lal').append('sometext');
13. 在创建元素时，如何使用对象字面量（literal）来定义属性
var e = $("", { href: "#", class: "a-class another-class", title: "..." });
14. 如何使用多个属性来进行过滤
//在使用许多相类似的有着不同类型的input元素时，
//这种基于精确度的方法很有用 var elements = $('#someid input[type=sometype][value=somevalue]').get();
15. 如何使用jQuery来预加载图像：
jQuery.preloadImages = function() {
　　for(var i = 0; i & arguments. i++) {
　　　　$("&img /&").attr('src', arguments[i]);
//用法 $.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg');
16. 如何为任何与选择器相匹配的元素设置事件处理程序：
$('button.someClass').live('click', someFunction);
//注意，在jQuery 1.4.2中，delegate和undelegate选项
//被引入代替live，因为它们提供了更好的上下文支持
//例如，就table来说，以前你会用$("table").each(function(){
　　$("td", this).live("hover", function(){
　　　　$(this).toggleClass("hover");
//现在用 $("table").delegate("td", "hover", function(){
　　$(this).toggleClass("hover");
17. 如何找到一个已经被选中的option元素：
$('#someElement').find('option:selected');
18. 如何隐藏一个包含了某个值文本的元素：
$("p.value:contains('thetextvalue')").hide();
19. 如何创建嵌套的过滤器：
//允许你减少集合中的匹配元素的过滤器，
//只剩下那些与给定的选择器匹配的部分。在这种情况下，
//查询删除了任何没（:not）有（:has）
//包含class为&selected&（.selected）的子节点。.filter(":not(:has(.selected))")
20. 如何检测各种浏览器：检测Safari (if( $.browser.safari)),&&检测IE6及之后版本 (if ($.browser.msie && $.browser.version & 6 )),&&检测IE6及之前版本 (if ($.browser.msie && $.browser.version &= 6 )),&&检测FireFox 2及之后版本 (if ($.browser.mozilla && $.browser.version &= '1.8' ))
21. 任何使用has()来检查某个元素是否包含某个类或是元素：
//jQuery 1.4.*包含了对这一has方法的支持。
//该方法找出某个元素是否包含了其他另一个元素类或是其他任何的你正在查找并要在其之上进行操作的东东。$("input").has(".email").addClass("email_icon");
22. 如何禁用右键单击上下文菜单：
$(document).bind('contextmenu',function(e){
　　return false;
23. 如何定义一个定制的选择器
$.expr[':'].mycustomselector = function(element, index, meta, stack){
// element- 一个DOM元素
// index & 栈中的当前循环索引
// meta & 有关选择器的元数据
// stack & 要循环的所有元素的栈
// 如果包含了当前元素就返回true
// 如果不包含当前元素就返回false };
// 定制选择器的用法： $('.someClasses:test').doSomething();
24. 如何检查某个元素是否存在
if ($('#someDiv').length) {
//万岁！！！它存在&& }
25. 如何使用jQuery来检测右键和左键的鼠标单击两种情况：
$("#someelement").live('click', function(e) {
if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {
alert("Left Mouse Button Clicked");
} else if(e.button == 2) {
alert("Right Mouse Button Clicked");
26. 如何替换串中的词
var el = $('#id');
el.html(el.html().replace(/word/ig, ''));
27. 如何在一段时间之后自动隐藏或关闭元素（支持1.4版本）：
//这是1.3.2中我们使用setTimeout来实现的方式 setTimeout(function() {
$('.mydiv').hide('blind', {}, 500)
//而这是在1.4中可以使用delay()这一功能来实现的方式（这很像是休眠） $(".mydiv").delay(5000).hide('blind', {}, 500);
28. 如何把已创建的元素动态地添加到DOM中：
var newDiv = $('&div&&/div&');
newDiv.attr('id','myNewDiv').appendTo('body');
29. 如何限制&Text-Area&域中的字符的个数：
jQuery.fn.maxLength = function(max){
return this.each(function(){
var type = this.tagName.toLowerCase();
var inputType = this.type? this.type.toLowerCase() : null;
if(type == "input" && inputType == "text" || inputType == "password"){
//Apply the standard maxLength
this.maxLength =
} else if(type == "textarea"){
this.onkeypress = function(e){
var ob = e ||
var keyCode = ob.keyC
var hasSelection = document.selection? document.selection.createRange().text.length & 0 : this.selectionStart != this.selectionE
return !(this.value.length &= max && (keyCode & 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) && !ob.ctrlKey && !ob.altKey && !hasSelection);
this.onkeyup = function(){
if(this.value.length & max){
this.value = this.value.substring(0,max);
//用法 $('#mytextarea').maxLength(500);
30. 如何jQuery注册和禁用jQuery全局事件
//jQuery注册ajax全局事件ajaxStart，ajaxStop：$(document).ajaxStart(function(){
$("#background,#progressBar").show();
}).ajaxStop(function(){
$("#background,#progressBar").hide();
//ajax请求禁用全局事件：$.ajax() 有个参数global (默认: true) 是否触发全局 AJAX 事件.设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。
31. 如何在jQuery中克隆一个元素：
var cloned = $('#somediv').clone();
32. 在jQuery中如何测试某个元素是否可见
if($(element).is(':visible')) {
　　//该元素是可见的 }
33. 如何把一个元素放在屏幕的中心位置：
jQuery.fn.center = function () {
　　return this.each(function(){
　　　　$(this).css({
　　　　　　position:'absolute',
　　　　　　top, ( $(window).height() - this.height() ) / 2 + $(window).scrollTop() + 'px',
　　　　　　left, ( $(window).width() - this.width() ) / 2 + $(window).scrollLeft() + 'px'
　　　　});
//这样来使用上面的函数：
$(element).center();
34. 如何把有着某个特定名称的所有元素的值都放到一个数组中：
var arrInputValues = new Array();
$("input[name='xxx']").each(function(){
　　arrInputValues.push($(this).val());
35. 如何从元素中除去HTML
(function($) {
$.fn.stripHtml = function() {
　　var regexp = /&("[^"]*"|'[^']*'|[^'"&])*&/
　　this.each(function() {
　　　　$(this).html( $(this).html().replace(regexp,'') );
　　return $(this);
})(jQuery);
//用法： $('p').stripHtml();
36. 如何使用closest来取得父元素：
$('#searchBox').closest('div');
37. 如何使用Firebug和Firefox来记录jQuery事件日志：
// 允许链式日志记录jQuery.log = jQuery.fn.log = function (msg) {
　　if (console){
　　　　console.log("%s: %o", msg, this);
　　return this;
// 用法： $('#someDiv').hide().log('div hidden').addClass('someClass');
38. 如何强制在弹出窗口中打开链接：
$('a.popup').live('click', function(){
　　var newwindow = window.open($(this).attr('href'),'','height=200,width=150');
　　if (window.focus) {
　　　　newwindow.focus();
　　return false;
39. 如何强制在新的选项卡中打开链接：
$('a.newTab').live('click', function(){
　　var newwindow=window.open(this.href);
　　$(this).target = "_blank";
　　return false;
40. 在jQuery中如何使用.siblings()来选择同辈元素
// 不这样做 $('#nav li').click(function(){
　　$('#nav li').removeClass('active');
　　$(this).addClass('active');
//替代做法是 $('#nav li').click(function(){
　　$(this).addClass('active').siblings().removeClass('active');
41. 如何切换页面上的所有复选框：
var tog = false;
// 或者为true，如果它们在加载时为被选中状态的话 $('a').click(function() {
　　$("input[type=checkbox]").attr("checked",!tog);
　　tog = !
42. 如何基于一些输入文本来过滤一个元素列表：
//如果元素的值和输入的文本相匹配的话,该元素将被返回 $('.someClass').filter(function() {
　　return $(this).attr('value') == $('input#someId').val();
43. 如何获得鼠标垫光标位置x和y
$(document).ready(function() {
　　$(document).mousemove(function(e){
　　　　$(&#XY&).html(&X Axis : & + e.pageX + & | Y Axis & + e.pageY);
44. 如何扩展String对象的方法
$.extend(String.prototype, {
isPositiveInteger:function(){
return (new RegExp(/^[1-9]\d*$/).test(this));
isInteger:function(){
return (new RegExp(/^\d+$/).test(this));
isNumber: function(value, element) {
return (new RegExp(/^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/).test(this));
trim:function(){
return this.replace(/(^\s*)|(\s*$)|\r|\n/g, "");
trans:function() {
return this.replace(/&/g, '&').replace(/&/g,'&').replace(/&/g, '"');
replaceAll:function(os, ns) {
return this.replace(new RegExp(os,"gm"),ns);
skipChar:function(ch) {
if (!this || this.length===0) {return '';}
if (this.charAt(0)===ch) {return this.substring(1).skipChar(ch);}
return this;
isValidPwd:function() {
return (new RegExp(/^([_]|[a-zA-Z0-9]){6,32}$/).test(this));
isValidMail:function(){
return(new RegExp(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/).test(this.trim()));
isSpaces:function() {
for(var i=0; i&this. i+=1) {
var ch = this.charAt(i);
if (ch!=' '&& ch!="\n" && ch!="\t" && ch!="\r") {return false;}
return true;
isPhone:function() {
return (new RegExp(/(^([0-9]{3,4}[-])?\d{3,8}(-\d{1,6})?$)|(^\([0-9]{3,4}\)\d{3,8}(\(\d{1,6}\))?$)|(^\d{3,8}$)/).test(this));
isUrl:function(){
return (new RegExp(/^[a-zA-z]+:\/\/([a-zA-Z0-9\-\.]+)([-\w .\/?%&=:]*)$/).test(this));
isExternalUrl:function(){
return this.isUrl() && this.indexOf("://"+document.domain) == -1;
45. 如何规范化写jQuery插件：
(function($){
$.fn.extend({
pluginOne: function(){
return this.each(function(){
// my code
pluginTwo: function(){
return this.each(function(){
// my code
})(jQuery);
46. 如何检查图像是否已经被完全加载进来
$('#theImage').attr('src', 'image.jpg').load(function() {
　　alert('This Image Has Been Loaded');
47. 如何使用jQuery来为事件指定命名空间：
//事件可以这样绑定命名空间 $('input').bind('blur.validation', function(e){
　　// ... });
//data方法也接受命名空间 $('input').data('validation.isValid', true);
48. 如何检查cookie是否启用
var dt = new Date();
dt.setSeconds(dt.getSeconds() + 60);
document.cookie = "cookietest=1; expires=" + dt.toGMTString();
var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;
if(!cookiesEnabled) {
　　//没有启用cookie }
49. 如何让cookie过期：
var date = new Date();
date.setTime(date.getTime() + (x * 60 * 1000));
$.cookie('example', 'foo', { expires: date });&
50. 如何使用一个可点击的链接来替换页面中任何的URL
$.fn.replaceUrl = function() {
　　var regexp = /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/
　　return this.each(function() {
　　　　$(this).html(
　　　　　　$(this).html().replace(regexp,'&a href="$1"&$1&/a&')
　　　　);
$('p').replaceUrl();
----------------------------------------------------------------
1.预加载图片
function($) {
var cache = [];
// Arguments are image paths relative to the current page.
$.preLoadImages = function() {
var args_len = arguments.
for (var i = args_ i--;) {
var cacheImage = document.createElement('img');
cacheImage.src = arguments[i];
cache.push(cacheImage);
jQuery.preLoadImages("image1.gif", "/path/to/image2.png");
2. 让页面中的每个元素都适合在移动设备上展示
var scr = document.createElement('script');
scr.setAttribute('src', '/ajax/libs/jquery/1.5.2/jquery.min.js');
document.body.appendChild(scr);
scr.onload = function(){
$('div').attr('class', '').attr('id', '').css({
'margin' : 0,
'padding' : 0,
'width': '100%',
'clear':'both'
3.图像等比例缩放
$(window).bind("load", function() {
// IMAGE RESIZE
$('#product_cat_list img').each(function() {
var maxWidth = 120;
var maxHeight = 120;
var ratio = 0;
var width = $(this).width();
var height = $(this).height();
if(width & maxWidth){
ratio = maxWidth /
$(this).css("width", maxWidth);
$(this).css("height", height * ratio);
height = height *
var width = $(this).width();
var height = $(this).height();
if(height & maxHeight){
ratio = maxHeight /
$(this).css("height", maxHeight);
$(this).css("width", width * ratio);
width = width *
//$("#contentpage img").show();
// IMAGE RESIZE
4.返回页面顶部
// Back To Top
$(document).ready(function(){
$('.top').click(function() {
$(document).scrollTo(0,500);
//Create a link defined with the class .top
&a href="#" class="top"&Back To Top&/a&
5.使用jQuery打造手风琴式的折叠效果
var accordion = {
init: function(){
var $container = $('#accordion');
$container.find('li:not(:first) .details').hide();
$container.find('li:first').addClass('active');
$container.on('click','li a',function(e){
e.preventDefault();
var $this = $(this).parents('li');
if($this.hasClass('active')){
if($('.details').is(':visible')) {
$this.find('.details').slideUp();
$this.find('.details').slideDown();
$container.find('li.active .details').slideUp();
$container.find('li').removeClass('active');
$this.addClass('active');
$this.find('.details').slideDown();
6.通过预加载图片廊中的上一幅下一幅图片来模仿Facebook的图片展示方式
var nextimage = "/images/some-image.jpg";
$(document).ready(function(){
window.setTimeout(function(){
var img = $("").attr("src", nextimage).load(function(){
//all done
7.使用jQuery和Ajax自动填充选择框
$(function(){
$("select#ctlJob").change(function(){
$.getJSON("/select.php", {
id: $(this).val(),
ajax: 'true'
}, function(j){
var options = '';
for (var i = 0; i & j. i++) {
options += '' + j[i].optionDisplay + '';
$("select#ctlPerson").html(options);
8.自动替换丢失的图片
// Safe Snippet
$("img").error(function () {
$(this).unbind("error").attr("src", "missing_image.gif");
// Persistent Snipper
$("img").error(function () {
$(this).attr("src", "missing_image.gif");
9.在鼠标悬停时显示淡入/淡出特效
$(document).ready(function(){
$(".thumbs img").fadeTo("slow", 0.6);// This sets the opacity of the thumbs to fade down to 60% when the page loads
$(".thumbs img").hover(function(){
$(this).fadeTo("slow", 1.0);// This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 0.6);// This should set the opacity back to 60% on mouseout
10.清空表单数据
function clearForm(form) {
// iterate over all of the inputs for the form
// element that was passed in
$(':input', form).each(function() {
var type = this.
var tag = this.tagName.toLowerCase();// normalize case
// it's ok to reset the value attr of text inputs,
// password inputs, and textareas
if (type == 'text' || type == 'password' || tag == 'textarea')
this.value = "";
// checkboxes and radios need to have their checked state cleared
// but should *not* have their 'value' changed
else if (type == 'checkbox' || type == 'radio')
this.checked = false;
// select elements need to have their 'selectedIndex' property set to -1
// (this works for both single and multiple select elements)
else if (tag == 'select')
this.selectedIndex = -1;
11.预防对表单进行多次提交
$(document).ready(function() {
$('form').submit(function() {
if(typeof jQuery.data(this, "disabledOnSubmit") == 'undefined') {
jQuery.data(this, "disabledOnSubmit", { submited: true });
$('input[type=submit], input[type=button]', this).each(function() {
$(this).attr("disabled", "disabled");
return true;
return false;
12.动态添加表单元素
//change event on password1 field to prompt new input
$('#password1').change(function() {
//dynamically create new input and insert after password1
$("#password1").append("");
13.让整个Div可点击
//blah blah blah. link
//The following lines of jQuery will make the entire div clickable:
$(".myBox").click(function(){
window.location = $(this).find("a").attr("href");
return false;
14.平衡高度或Div元素
var maxHeight = 0;
$("div").each(function(){
if ($(this).height() & maxHeight) { maxHeight = $(this).height(); }
$("div").height(maxHeight);
15. 在窗口滚动时自动加载内容
var loading = false;
$(window).scroll(function(){
if((($(window).scrollTop()+$(window).height())+250)&=$(document).height()){
if(loading == false){
loading = true;
$('#loadingbar').css("display","block");
$.get("load.php?start="+$('#loaded_max').val(), function(loaded){
$('body').append(loaded);
$('#loaded_max').val(parseInt($('#loaded_max').val())+50);
$('#loadingbar').css("display","none");
loading = false;
$(document).ready(function() {
$('#loaded_max').val(50);
Views(...) Comments()分类: Tags:
豆瓣使用了jquery框架，但jquery没有提供大型网站所需要的模块化管理，所以豆瓣前端团队就在jquery之前再包裹一层轻量级的框架，用来组织js模块并管理模块之间的依赖关系，按依赖关系自动加载js模块。有相关信息。
压缩后基本都是单字符的变量，读起来相当费劲，整理了一下，给各个变量加上适当的名字，也是理解和学习这个轻量框架的过程。
源码很简单，主要思路就是：通过Do.add()全局存储各个模块的信息，在执行do时把各模块的依赖和执行函数整理成一个有先后顺序的队列，依次加载/执行这个队列。
//uibase模块地址是ui.js
//dialog依赖ui模块
Do.add('uibase', {path: 'ui.js', type: 'js'});
Do.add('dialog', {path: 'dialog.js', type: 'js', requires: [&uibase&]});
Do(&dialog&, function(){
//使用dialog
do里的makeQueue方法会生成这样一个队列：["jquery.js", "uibase", "dialog", function()]
jquery.js是core_lib里的。接着队列执行器Execute就会依次加载jquery.js ui.js dialog.js，最后执行那个依赖dialog模块的function()
整理后的源码：
分类: Tags:
仿照jquery的API写了专用于iphone的jquery，索性叫iquery。虽然API很多一样，但里面的实现大多不一样，sizzle引擎改成了现代浏览器自带的queryselector，其他API很多实现上是简化了，很多并不常用的方法和功能没加上，增加了iphone特有的touch等事件，详细看文档。因为内部实现是自己写的，又没有经过很多测试，所以还不能像jquery那样随心所欲地用不怕出错，还拿不出手，只能自己用，打算边用边测试，先放上源码和文档。
文档同时也算是iquery的使用演示。建议在iphone/itouch下查看，同时还可以挺好地支持电脑上的chrome和safari，其他浏览器不行~
P.S 目前文档还有很多方法没有加上详细说明
目前压缩前17.8K，压缩后9.4K
分类: Tags:
AI版(AI很笨)：
小时候玩的棋类游戏中，军旗算是玩得比较多的，接下来就是跳棋了。不知有多少年没碰过军旗，上次偶然在姐家下了一盘，挺怀念的，网上查了一下，四国军棋是挺多，但我们的玩法是不断翻开盖住的棋子的，据说这叫翻翻棋，边锋游戏有，下载后发现不咋地，应该是十几年前做的了，我想自己做一个网页版的。奇怪怎么这么久还没有大型的网页版的棋牌游戏，总比QQ游戏方便很多吧。
前期得先把棋盘画好，定好棋子在上面的走动规则。话说这棋盘画得我自己挺满意的，呵，高仿真啊，我是把棋盘拍照下来照着画的，不过缺点是高度太大了，对于小电脑一个屏幕可能还看不到整个棋盘。棋子就不咋地，很一般，不过想换肤很容易。
程序的实现方面，这次我还是用了jquery，本来想用YUI练习下的，但发现YUI本来就不适合用来做这样的游戏，只适合用于分模块构建中大型网站，另外它没有在dom里保存data的功能，所以还是用回jquery。
分类: Tags:
刚接触jquery时很好奇，一个jQuery对象，那么多方法可以用，要是每个对象都保存着这些方法，那得占用多大的内存空间啊。很显然，那些方法都是共用的，只保存一份。今天闲着，研究了下。
要知道哪些方法是每个实例各有一份，哪些方法是共享的，还是先来研究下js的基础：js内部是怎样调用一个实例的属性/方法的。看这段代码：
var Test = function () {
this.a = "a";
this.b = "b";
this.c = function(){
return "c";
Test.prototype = {
b: "b_prototype",
d: function(){ return "d"; },
var t1 = new Test();
var t2 = new Test();
var t1 = new Test()，这一句，在 Firefox 下，不考虑参数传递，可以用下面的代码来表示 new 的过程：
var o = {__proto__: Test.prototype};
Test.apply(o);
经过Test.apply(o);这一句，o = {__proto__: Test.prototype, a: “a”, b: “b”, c: function(){ return “c” } }
调用t1(即o)实例的方法/属性时，会先在o查找是否存在，如果存在，即返回，不存在，则沿着原型链__proto__往上查找，实例对象t1的__proto__指向原型Test.prototype，而Test.prototype.__proto__指向父类的原型，一层层往上搜索，这里Test继承原始天尊Object，所以Test.prototype.__proto__ === Object.prototype
alert(t1.a) //a 在对象中找到a = “a”
alert(t1.b) //b 在对象中找到b = “b”，不再继续查找，忽略对象原型里的b = “b_prototype”
alert(t1.e) //e 在对象中找不到d，沿原型链找到Test.prototype有属性e = “e”
从new语句的分解可以看到，在构造函数里用this.xx = xx生成的方法/属性是每个实例对象都会复制一份的，而prototype里的方法/属性则所有对象共享一份。
alert(t1.c === t2.c) //false t1 t2两个对象的方法c是不同的拷贝，分别保存在t1 t2里
alert(t1.d === t2.d) //true 两个方法d都指向Test.prototype.d
需要注意的是，如果你给t1.d赋了新的值或函数，并不等于修改了Test.prototype.d，这点曾经迷惑了我：
t1.d = “new d”;
alert(t1d === t2.d) //false t2仍然指向Test.prototype.d，而t1在自己对象里新增了属性d，调用t1.d时不会再沿原型链向上查找
回过头看看jQuery，很明显，所有jQuery实例用到的方法都保存在prototype里，只保存一份，jQuery实例对象本身只包含了length selector context三个属性，以及搜索到的DOM。例：
&div id="tid1" class="tclass"&&/div&
&div id="tid2" class="tclass"&&/div&
//在jquery源码里jQuery.fn ==
jQuery.fn.init.prototype == jQuery.prototype
$(".tclass") == {__proto__:jQuery.fn.init.prototype,
selector: ".tclass",
context: document,
length: 2,
0:/*指向DOM元素&div id="tid1" class="tclass"&&/div&*/,
1:/*指向DOM元素&div id="tid2" class="tclass"&&/div&*/
分类: Tags:
最近继续学javascript，某一时刻想试着用jquery和jquery UI里的drop and drop实现之前用FLASH做的拼图游戏，于是动手做了，主要的功能很快就做好了，但做着做着，就想把它做完整了，在细节、代码结构、注释、界面、效率这些方面花了很多时间。
代码结构自我感觉算是不错了，但计时器似乎不应该那样写，在卡的时候计时也会跟着卡，不能正确地计时。
注释第一次用英文写，肯定有语法错误，可能还有歧义，算是尝试吧。
运行效率上，我一直没法找到提高运行效率的方法，现在一直按Start开始新拼图的时候，在firefox和Chrome下没问题，在IE下会一直增加内存，暂时还不知道怎么解决这个问题。
排行榜也花了不少时间，只保留10个最高分数，虽然可以正常运行，但要作弊是十分简单的，在本地做个有score和name的表单提交过去就能随意写入任何分数了，这个，应该是要在php加session或cookie解决吧，先不改了。
做个成品出来真是很耗时，尤其是做界面。这次我没有虎头蛇尾，由始至终都很认真做每一部分，我好像有个坏习惯，自己做个什么东西，在没做完的时候，会老是惦记着它，近乎疯狂地想赶快完成，相当疯狂~
最后还是说下玩法，进入页面后直接点击start就可以开始了，可以复制网上任意一张图片的地址在photo url框，也可以在随后的选择栏里选择预置的几张图片，piece Num为切割的块数。分数的计算是，块数越多分越高，时间越多分越少。
分类: Tags:
想做点东西练练javascript，于是打算为加上额外的功能，例如上传图片等，先尝试了使用javascript验证和发送饭否消息，仅这个就花了不少时间，很多时间花在了去除低级错误上，例如jquery ajax的type:”post”被我写成了method:”post”，花了很多时间才找出来。
先放上主要代码，使用框架以及插件：
var name = &yourname&;
var pass = &yourpassword&;
url: &/statuses/update.xml&,
type:&POST&,
data: &status=信息内容&,
beforeSend: function(xhr){
xhr.setRequestHeader('Authorization', 'Basic ' + $.base64.encode(name + ':' + pass));
success: function(data, textStatus){
alert(data);
有两个主要问题：
1.验证用户
饭否API验证方式为
验证，需要对“用户名:密码”进行base64编码，添加进ajax请求的http头信息。
XMLHttpRequest.setRequestHeader(‘Authorization’, ‘Basic ‘ + $.base64.encode(name + ‘:’ + pass));
使用饭否需要验证的API（例如读取私信、发送消息）时，都要在请求前加上这一条HTTP头信息。
爱饭使用，可以通过YAHOO.util.Connect.initHeader设置每次ajax请求的默认HTTP头信息，
initHeader(‘Authorization’, ‘Basic ‘ + Base64.encode(name + ‘:’ + pass), true);
最后一个参数”true”代表设为默认http头信息。
设置之后每次使用YAHOO.util.Connect.asyncRequest进行ajax请求都不需要再添加验证。
2.跨域问题
使用ajax请求资源总有跨域问题，即请求只能发生在相同的域内。
以上那段代码请求的域为，如果放在网上，除非放在饭否服务器，有相同的域，否则无法运行。
对本地网页，在跨域上，不同浏览器有不同规则，IE允许跨域访问，firefox与chorme都不行。以上代码放在本地，用IE打开，就可以运行，用firefox打开，会出现Access to restricted URI denied” code: &#。
使用IE可以通过设置可信任站点实现跨域获取内容，其他跨域方法网上很多，还未细究，但都是要在客户端设定或者两站互相配合。
所以，使用javascript发送饭否消息只适合运用在AIR程序上，AIR有自己特定的安全沙箱，允许跨域请求。
另，饭否与Twitter的API几乎一样，可直接套用。
P.S 早上起来，发现已经对爱饭扩展，做了查看上传的图片的功能，他还在做上传图片的功能，我也没必要再做这部分功能了。开源的好处之一，就是有很多人帮忙完善这个程序啊~
分类: Tags:
11.适当地使用动画效果
我第一次使用jQuery的时候就喜欢上了像slideDown()、fadeIn()等这些预定义的动画函数，使用它们可以很简单地做出很酷的动画效果。jQuery的animate()函数的强大和易用让人很容易进一步实现更好的效果，事实上，如果你看了jquery的源代码你会发现fadeIn()、slideDown()等这些函数的内部都使用了animate()函数，它们只是让animated()更易使用。
slideDown: function(speed,callback){
return this.animate({height: &show&}, speed, callback);
fadeIn: function(speed, callback){
return this.animate({opacity: &show&}, speed, callback);
animate()函数只是简单地接收所有的CSS属性，平滑地把属性从一个值转换到另一个值，形成动画。你可以使用它平滑地改变任何你想改变的属性，如width, height, opacity, background-color, top, left, margin, color, font-size等等。
下面这段简单的代码实现了当鼠标放在菜单上时菜单上所有列表元素的高度都平滑地改变到100px。
$('#myList li').mouseover(function() {
$(this).animate({&height&: 100}, &slow&);
animation函数不像jquery的其他函数，它是自动队列的，即如果你想在一个效果执行完后接着执行另一个效果，只需要连续使用两次animate函数，无需任何回调。
$('#myBox').mouseover(function() {
$(this).animate({ &width&: 200 }, &slow&);
$(this).animate({&height&: 200}, &slow&);
如果你想让两个动画同时执行，把参数放在一个object里，调用一次即可：
$('#myBox').mouseover(function() {
$(this).animate({ &width&: 200, &height&: 200 }, &slow&);
你可以传入值是数字的属性形成动画，如果要传入非数字的属性，那就要使用插件，例如平滑过渡颜色效果的插件：
12.学习事件委托
使用jQuery可以很容易地为DOM元素绑定事件，但如果绑定太多事件会让程序效率降低，事件委托可以让你可以让你绑定更少的事件但达到同样的效果，解释事件委托最好的办法是通过例子：
$('#myTable TD').click(function(){
$(this).css('background', 'red');
这是一个简单的函数，为表格的所有单元格绑定事件，当鼠标点击单元格即变红色，假设表格有50行10列，那么总共绑定了500个事件。如果我们能值为table绑定一个事件，让事件处理函数找出所点击的单元格，再让它变成红色，那是再好不过的了。事实上，这就是事件委托，也是我们接下来要做的：
$('#myTable').click(function(e) {
var clicked = $(e.target);
clicked.css('background', 'red');
参数”e”包含了所有关于event信息，包括了实际接收鼠标点击的元素，我们所需要做的就是检查鼠标点击的是哪个单元格，非常简洁。
事件委派还有一个好处。当你为一个块（表格、列表或div块等）里所有的元素绑定事件，当增加元素到这个块里，新增加的元素并不会自动绑定事件，如果使用事件委托，事件绑定后即使新增加元素也可以正常工作。
13.用class保存状态
这是html块保存状态最基本的方法，jQuery擅长通过class操纵元素，因此如果你想储存状态信息，为什么不创建一个额外的的class去保存它呢？
这是一个例子，我们想创建一个可展开的菜单，点击按钮时如果面板是关闭的，则调用slideDown()，如果是打开着则调用slideUp()，先看看HTML：
&div class=&menuItem expanded&&
&div class=&button&&
&div class=&panel&&
&li&Menu item 1&/li&
&li&Menu item 2&/li&
&li&Menu item 3&/li&
很简单，我们添加一个额外的class属性，目的只是为了说明元素现在的状态。添加后，我们要做的只是添加鼠标点击时执行slideUp()和slideDown()的事件处理函数。
$('.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();
这是个很简单的例子，只作演示用，通过添加额外的class，你可以储存各种各样的值在HTML元素里。
然而，大多数情况下，使用下一条技巧里的方法更好。
14.使用jQuery的内部函数data()储存状态
jQuery有个内部函数data()可以用来在任何DOM元素上储存键/值形式的数据，因为一些原因，这个函数并没有很好的文档说明。储存数据就像下面写的这样简单：
$('#myDiv').data('currentState', 'off');
我们可以改良上一个例子的程序，我们仍然使用同样的HTML（但去掉class”expanded”），使用data()储存状态：
$('.button').click(function() {
var menuItem = $(this).parent();
var panel = menuItem.find('.panel');
if (menuItem.data('collapsed')) {
menuItem.data('collapsed', false);
panel.slideDown();
menuItem.data('collapsed', true);
panel.slideUp();
我想你会同意，这样写比之前更简洁。要了解更多关于data()与removeData()，看这里：
15.创建自定义选择器
jQuery有很多内置的选择器可以通过id、class、标签、属性等查找元素，但如果你想通过其他jQuery里没有的方式查找元素，该怎么做？
或许可以在选择之前为元素添加一个class属性再进行选择，但其实扩展jQuery写新的选择器并不难。下面我们通过例子来说明：
$.extend($.expr[':'], {
over100pixels: function(a) {
return $(a).height() & 100;
$('.box:over100pixels').click(function() {
alert('The element you clicked is over 100 pixels high');
第一部分代码创建了一个新的选择器，用来查找高度大于100像素的元素。第二部分代码使用这个新选择器为所有符合条件的元素添加click事件。
关于自定义选择器在这里就不多说了，你可以上google搜索“custom jquery selector”，肯定能找到很多很好的例子。
16.合理化你的HTML，并在页面载入的时候修改它
这个标题看起来似乎没什么意义，但实际上这个技巧不仅可以让你的代码变得整洁，还可以减少页面的大小，对SEO也有帮助。看看下面的HTML：
&div class=&fieldOuter&&
&div class=&inner&&
&div class=&field&&This is field number 1&/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 class=&fieldOuter&&
&div class=&inner&&
&div class=&field&&This is field number 2&/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 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&
我们需要做的只是使用jQuery做一点点处理，把之前那些需要重复的的HTML代码加进来，像这样：
$(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&');
不建议经常使用这个技巧，使用了它，在页面载入时会有闪烁的现象，但在有很多重复的HTML元素的情况下，这个技巧能有效地减小你页面的大小，对SEO也有好处，因为除去了很多重复无关的元素。
译者注：如果要考虑向后兼容，即考虑没有javascript的浏览器，任何情况下都不应该这样使用。
17.通过延迟加载内容提高速度和SEO友好度
还有另一个方法，可以加快页面载入，使爬虫蜘蛛抓取的页面更整洁，就是在页面其他部分载入完成后，再用AJAX载入内容。用户能看到正常的一面，爬虫蜘蛛也能只抓取到你想让它抓取的内容。
我们已经在自己的网站上使用这个技巧了，上面那些紫色的按钮能打开3个表单，一个导航和一个google map，这些都会让页面大小加倍，所以，我们把上面那些全部放在一个静态的HTML文件里，当页面读取完毕时再使用load()读取这个文件获得这部分元素，像这样：
$('#forms').load('content/headerForms.html', function() {
// 内容读取完毕时执行这里的代码，只执行一次
// 把所有事件处理程序都放这里
我不会到处使用这个技巧，你应该考虑它的优缺点，它会增加对服务器的请求，你的页面刚打开时载入的部分不能马上使用，但如果能正确地使用，它会是一个很好的优化技巧。
18.使用jQuery里的工具函数
jQuery里有很多实用的函数，填补了javascript的空白。
特别地，浏览器对javascript里一些数组函数的支持并不好（IE7甚至不支持indexOf()），jQuery有迭代、筛选、复制、合并和去除重复元素这一系列针对数组的函数。
其他在javascript很难实现的功能，像获取下拉列表的值，在传统javascript里，必须使用getElementById获取&select&元素，再获取它所有的子元素，迭代检查它们有没有selected，十分繁琐。而使用jQuery很容易就能获取：
$('#selectList').val();
很值得花一点时间仔细看看jQuery文档，探索那些相对少人知道的函数。
19.同时使用多个框架时，用noconflict重命名jQuery对象
大部分javascript框架使用符号$作为记号，当页面上使用了超过一个框架时，这会产生冲突。幸运的是有一个很简单的解决方法，nofonflict()函数让你能自定义jQuery的名字：
var $j = jQuery.noConflict();
$j('#myDiv').hide();
20.怎样提示图片已经加载完毕
这个问题似乎没有怎么被提及到，但这在做相册的时候是很常见的问题，其实这个问题很简单。
你需要做的只是在&img&标签上使用.load()函数，给它一个回调函数。下面的例子改变了&img&标签的”src”属性，载入一张新的图片，并为它加了一个简单的load()函数。
$('#myImage').attr('src', 'image.jpg').load(function() {
alert('Image Loaded');
你会发现图片载入完毕时提示框会弹出。
21.总是使用最新版本
jQuery一直在改进，它的创建者John Resig一直在寻找方法改进jQuery性能。
jQuery现在的版本是1.2.6（翻译时已经是1.3.2），但john透露它在开发一个新选择器引擎： 。它能提升选择器的效率，在firefox里能达到4倍。所以，应该使用最新版本以获得更好的性能。
译者注：sizzle引擎已经开发完成，jquery1.3已经使用此引擎，sizzle主页：
22.怎样检查元素存在
在你操纵一个元素前你不需要检查那个元素是否存在，因为如果你选择的元素不在DOM里jQuery不会做任何事。但如果你需要检查是否有元素被选择了，或者检查有多少个元素被选择，你可以使用length属性。
if ($('#myDiv).length) {
// 你的代码
很简单，但并不易见。
23.用js向HTML标签添加一个class属性
我是从Karl Swedberg的两本书
里学到这招。
他在我最近的一片文章的评论里提到这个技巧，它的原理是这样的：
首先，jQuery加载完成后用它为&HTML&标签增加一个名为”JS”的class属性：
$('HTML').addClass('JS');
因为这只会在javascript可用的情况下发生，所以你可以利用它添加只有javascript可用时才有的css属性，像这样：
.JS #myDiv{display:}
这意味着，当javascript可用时我们可以隐藏一些内容，再在需要时用jQuery让它显现，而javascript不可用时（以及搜索引擎抓取页面时），内容并没有隐藏，用户能正常看到那些内容。我会在以后经常使用这个技巧。
可以来读取Karl Swedberg关于这个例子的全文：
24.返回”false”阻止默认行为
这可能是显而易见的，但有时候却不是，如果你习惯这样做：
&a href=&#& class=&popup&&Click me!&/a&
然后给它绑定一个事件，像这样：
$('popup').click(function(){
// Launch popup code
它会很好的工作，直到你在一个长页面使用它，才会发现问题，你会发现”#”使鼠标点击它时自动返回页面顶部。
你需要做的是阻止它的默认行为，在事件处理函数里添加”return false”可以阻止任何事件的任何默认行为：
$('popup').click(function(){
// Launch popup code
25.缩写ready事件
这是个很小的技巧，可以通过缩写函数$(document).ready为你腾出几个字节的空间。
$(document).ready(function (){
// your code
缩写成这样：
$(function (){
// your code
终于翻译完了，好长的文章，真佩服他这么有耐性写这么长的文章。似乎我耐心还是不够，一口气是翻译不了那么长的，分了好几个次。第二部分代码还没排版，没有缩进，以后再修改。
分类: Tags:
原文链接：
jquery是令人惊叹的框架，我已经使用它一年多了，我发觉使用它的时间越长，就会越喜欢它，也越理解它内部的工作原理。
我不是一个jquery专家，我也不奢求成为专家，所以如果这篇文章里出现一些错误我非常乐意接受大家的批评和改正。
我常常称自己为jquery中级使用者，我一年以来学到的、总结出来的技巧和技术，应该可以让一些人从中获益。
1.从google code载入jquery
Google挺久以前就开始提供各种javascript库供使用者载入，从google载入javascript框架相对于直接从自己的服务器载入有许多优势，首先它节省了自己服务器的带宽，从google载入也十分快，最重要的是如果用户之前已经访问过其他从google载入javascript库的网站，再访问你的网站时直接从缓存里取出即可,无需再次请求，会大大加快载入速度。
这很有意义，有多少网站储存着同一个版本的jquery呢，它们都没有被缓存。从google载入jquery是很容易做到的：
&script src=”/jsapi”&&/script&
&script type=”text/javascript”&
// 载入jQuery
google.load(”jquery”, “1.2.6″);
google.setOnLoadCallback(function() {
//代码放这里
或者，你也可以直接包含jquery对应的网址，像这样：
&script src=”/ajax/libs/jquery/1.2.6/jquery.min.js” type=”text/javascript”&&/script&
完整的说明
2.使用参考表(cheat sheet)
这不仅仅是个关于jquery的建议，对于很多语言，都有相应的很好的参考表，它很方便地把所有函数都列在可打印的A4格式的文档上，对于jquery1.2，下面这两个网址给出了两个很好的参考表：
3.组合你所有的代码并压缩它们
嗯，这本来是一个普遍的javascript的建议，但任何使用jquery的大项目通常都会使用很多插件，所以这条建议也适用于jquery。
现在的浏览器不能同时载入几个脚本，这意味着如果你一次载入很多个脚本，会减慢载入网页的速度，所以，如果你的脚本需要载入到所有页面上，就可以考虑把你所有的代码放在一起，然后压缩它们。
有一些插件脚本已经被压缩过，你要考虑的是那些没有被压缩过的脚本。压缩脚本需要花费的时间很少，个人来说，推荐Dean Edwards制作的这个工具。
4.使用firebug的控制台记录工具
如果你还没有安装firebug，那应该立即去下载。它除了提供其他一些常用的功能例如检查http传输和查找CSS错误外，还有优秀的控制台记录命令让你能轻易地检测脚本里的错误。
我个人喜欢的功能是“”，它能输出信息或变量，代替了弹出窗口的alert，还有“console.time”让你轻易地在一段代码间设置一个计时器，得出执行这段代码所用的时间。这些console命令都很容易使用：
console.time('create list');
for (i = 0; i & 1000; i++) {
var myList = $('.myList');
myList.append('This is list item ' + i);
console.timeEnd('create list');
这个例子我故意写了一些效率很低的代码，在接下来几条技巧/建议里，我会说明如何使用这个计时器展示代码的改进。
5.通过暂存减少选择器的使用
jquery选择器让人赞叹，它以难以置信的简单方式选择页面上任何元素，但在其内部，选择器需要做大量的工作，所以如果大量使用选择器，你会发现程序开始变得很慢。
如果你多次地选择同一个元素（例如在一个循环里），你可以只选择它一次并赋给一个变量，再在你的核心代码里使用它。下面这个例子我们通过循环添加元素到一个无序列表里。
for (i = 0; i & 1000; i++) {
var myList = $('.myList');更能描述问题
myList.append('This is list item ' + i);
//译者注：我觉得直接用$('.myList').append('This is list item ' + i)，去掉myList更能说明问题
这在我的电脑里用firefox3花费了1066毫秒（想象下如果是IE6将会是多长时间！），这在javascript来说是很慢的。现在我们看看下面的代码，只使用选择器一次：
var myList = $('.myList');
for (i = 0; i & 1000; i++) {
myList.append('This is list item ' + i);
只花费了224毫秒，快了4倍多，只是移动了一行代码。
6.减少DOM处理
通过减少插入DOM的次数，我们可以让刚才那个例子运行得更快。DOM插入操作像.append().prepend().after()和.wrap()都相对地更耗费资源，如果运行很多DOM插入处理会让网页变得很慢。
我们需要做的是使用字符串连接建立列表，然后使用函数把列表一次性添加到无需列表上，使用.html()会更快，看看下面的例子：
var myList = $('#myList');
for (i=0; i&1000; i++){
myList.append('This is list item ' + i);
在我的电脑里运行需要216毫秒，差不多1/5秒，但如果我们先建立一个字符串，再使用.html()插入，像这样：
var myList = $('.myList');
var myListItems = '';
for (i = 0; i & 1000; i++) {
myListItems += '&li&This is list item ' + i + '&/li&';
myList.html(myListItems);
用了185毫秒，虽然没有快多少，但还是节省了31毫秒。
7.插入DOM时包含所有内容在单个元素里
嗯，别问我为什么这样做（我一定会有更有经验的程序员可以解释）
上一个例子中我们通过.html()函数插入1000个元素到一个无序列表里。如果我们在插入前将它包含在一个UL标签里，然后将整个UL插入到另外一个标签(一个DIV)里，这样就只插入了一个标签，而不是1000个，这会让程序块很多，像这样：
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);
只花费了19毫秒的时间，巨大的改进，比第一个例子快了50倍。
8.尽可能使用ID而不是class
jquery优秀的选择器使通过Class选择元素变得跟通过ID选择元素一样简单，让人比以前更放心大胆地使用class。但事实上最好还是使用ID而不是class，因为使用ID获取元素时，jquery使用了浏览器默认的方法（getElementByID)获取元素，这无需经过遍历元素即可找到所需要的元素，比通过class查找元素更快。有多快？让我们来看看。
我使用了前面的例子，并对它进行小小的改动，让每一个li元素都有class属性，然后通过循环选择每一个元素。
// 创建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);
// 每一个元素都选择一次
for (i = 0; i & 1000; i++) {
var selectedItem = $('.listItem' + i);
跟我想的差不多，我的浏览器卡住了，它使用了5066毫秒（超过5秒）。现在修改一下代码，给每一个元素一个ID代替class，然后做同样的事：
// 创建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);
// 每一个元素都选择一次
for (i = 0; i & 1000; i++) {
var selectedItem = $('#listItem' + i);
这段代码只需要61毫秒的时间，差不多快了100倍！
9.给你的选择器定一个范围
默认地，当你像#(“.myDiv”)这样使用一个选择器，页面上所有的DOM元素将会被遍历，去查找符合条件的元素，这将会十分耗资源。
jquery的选择函数提供了第二个参数：
jQuery( expression, context )
通过提供一个上下文参数给选择器，可以让选择的范围缩小在所提供的元素内，不需要遍历整个页面。
为了演示，让我们引用上一个例子的代码，创建1000个元素的无序列表，每个li标签都有class属性，循环选择每一个元素，像上一个例子所看到的，将会花费超过5秒的时间运行这段代码。
var selectedItem = $('#listItem' + i);
然后我为选择器增加了一个上下文参数，让它只在.myList元素里遍历，像这样：
var selectedItem = $('#listItem' + i, $('.myList'));
它仍然使用了3818毫秒的时间，因为选择class还是一个效率低的做法。但这已经比之前快了25%，而且只为选择器添加了一个上下文参数而已。
译者注：我想如果把上面的代码放在一个大页面里执行，效果会很明显。
10.使用jquery链
jquery最酷的特性之一就是它能把函数调用连接在一起，例如，如果你想转换某个元素的class，可以这样写：
$('myDiv').removeClass('off').addClass('on');
如果你像我的话，会在学习jquery的前5分钟就知道这个特性，但jquery链不仅仅是这样。
首先，它可以跨行运行（因为jquery=JavaScript），这意味着你可以像这样简洁地写代码：
$('#mypanel')
.find('TABLE .firstCol')
.removeClass('.firstCol')
.css('background' : 'red')
.append('&span&This cell is now red&/span&');
养成使用jquery链的习惯可以减少选择器的使用。
假设你想在某一个元素上执行几个函数，但其中有一个函数通过某种途径改变了元素本身，像这样：
$('#myTable').find('.firstColumn').css('background','red');
上面的代码首先选择了一个table，然后选择table里class为”firstColumn”的单元格填充红色。
假设我们现在想把所有class为”lastColumn”的单元格都填上蓝色。因为我们之前已经用find()函数把所有class不是”firstColumn”的单元格排除了，所以我们要再次使用选择器获取table元素，所以我们就不能使用jquery链了，是不是？其实不是，jquery还有一个end()函数可以让链恢复到未被改变的时的状态，这样就可以继续链接下去，像这样：
$('#myTable')
.find('.firstColumn')
.css('background','red')
.find('.lastColumn')
.css('background','blue');
创建一个有链接功能的jquery函数比你想象中的还要简单，需要做的只是在函数里修改完元素后返回它：
$.fn.makeRed = function() {
return $(this).css('background', 'red');
$('#myTable').find('.firstColumn').makeRed().append('hello');
继续阅读：