1. 基于选择器的插件（支持链式操作）
2. 不基于选择器的插件（不支持链式操作）

前段时间简单学习了 jQuery 插件开发，开发了两个简单的插件（以上两类，各开发了一个），在此对两种插件的开发模式做简要总结。

基于选择器的插件

通常开发模式如下：

(function($, window, undefined) {
	$.fn.PluginName = function(opts) {
		var defaults = {
			// 插件自定义选项的默认值
		};

		// 以用户的自定义选项覆盖默认选项
		var options = $.expend(defaults, opts || {});

		return this.each(function() { // 让插件支持链式操作
			// 在这里编写插件功能代码
		});
	};
})(jQuery, window);

首先，创建一个匿名的自执行函数，形参为 & 、 window 和 undefined，实参为 jQuery 和 window。

嗯？为什么没有为 undefined 对应地传入一个实参呢？这是一个小技巧，考虑到 undefined 这个变量名可能在其它地方的 JavaScript 代码赋过值，失去了它真正的意义，所以这里干脆不传入这个参数，以确保它在那个匿名自执行函数中是真正的 undefined。

jQuery 传入后对应为 $，这样可以保证插件内调用的 $ 一定是 jQuery 而非 Prototype 之类的库。

此类插件的调用方式一般为 $(selector).PluginName(); 这种形式。

此类具体示例可参考 https://github.com/libuchao/KTwitter

不基于选择器的插件

由于此类插件不依赖于选择器，所以也无链式操作一说。一般开发模式如下：

(function($, window, undefined) {
	$.PluginName = function(opts) {
		var defaults = {
			// 插件自定义选项的默认值
		};

		// 以用户的自定义选项覆盖默认选项
		var options = $.expend(defaults, opts || {});

		// 在这里编写插件功能代码
	};
})(jQuery, window);

此类插件的调用形式一般为 $(selector).PluginName(); 这种形式。

此类插件具体示例可参考 https://github.com/libuchao/KBox

其它事项

如何让他人乐意用你的插件？

1. 其实不管插件是给自己用的，还是个其他人用的，代码都要尽量整洁规范，如果能提供说明文档则更好。
2. 对于用户方面，尽量为用户提供灵活的自定义选项，如能配以演示 Demo 则更好。
3. 要在各主流浏览器下进行测试，并对支持情况予以说明，如 Supports IE6+, FireFox3+, Safari5+, Chrome9+ …
4. 对 jQuery 各版本支持情况要予以说明，如 Requires jQuery v1.3.2 or later …
5. 如果插件代码体积比较大的话，尽可能同时提供带有注释的 Dev 版本和不带注释压缩过的 Min 版本（借助于 JavaScript 代码压缩工具）。
6. 最后，测试测试再测试，保证质量。

想学习插件开发？请参考这篇文档 http://docs.jquery.com/Plugins/Authoring

var myObject = function( name ) {
	this.name = name;
	return this;
};

console.log(typeof myObject.prototype); // object

myObject.prototype.getName = function() {
	return this.name;
};

上面的代码创建了一个函数，然后赋值给 myObject。如果我名调用 myObject()，它将返回 window 对象。因为它是在全局作用域内定义的，而且它还没有被实例化，所以 this 直接指向全局对象：

console.log(myObject() === window); // true

原型链

JavaScript 中定义或实例化任何一个对象的时候，它都会被附加一个名为 __proto__ 的隐藏属性，原型链正是依靠这个属性才得以形成。但是千万别直接访问 __proto__ 属性，因为有些浏览器并不支持直接访问它。另外 __proto__ 和 对象的 prototype 属性也不是一回事，它们各自有各自的用途。

怎么理解呢？其实，当我们创建 myObject 函数时，实际上是创建了一个 Function 类型的对象：

console.log(typeof myObject); // function

这里要说明一下，Function 是 JavaScript 中预定义的一个对象，所以它也有自己预定义的属性（如 length 和 arguments）和方法（如 call 和 apply），当然也有 __proto__，以此实现原型链。也就是说，JavaScript 引擎内可能有类似如下的代码片段：

Function.prototype = {
	arguments: null,
	length: 0,
	call: function() {
		// secret code
	},
	apply: function(){
		// secret code
	},
    ...
};

事实上，JavaScript 引擎代码不可能这样简单，这里只是描述一下原型链是如何工作的。

我们定义了一个函数 myObject，它还有一个参数 name，但是并没有给它任何其它属性，例如 length 或者其它方法，如 call。那么下面这段代码为啥能正常执行呢？

console.log(myObject.length); // 结果：1，是参数的个数

这是因为我们定义 myObject 时，同时也给它定义了一个 __proto__ 属性，并赋值为 Function.prototype（参考前面的代码片段），所以我们能够像访问其它属性一样访问 myObject.length，即使我们并没有定义这个属性，因为它会顺着 __proto__ 原型链往上去找 length，最终在 Function 里面找到了。

那为什么找到的 length 属性的值是 1，而不是 0 呢，是什么时候给它赋值的呢？由于 myObject 是 Function 的一个实例：

console.log(myObject instanceof Function); // true
console.log(myObject === Function); // false

当实例化一个对象的时候，对象的 __proto__ 属性会被赋值为其构造者的原型对象，在本示例中就是 Function，此时构造器回去计算参数的个数，改变 length 的值。

console.log(myObject.__proto__ === Function.prototype); // true

而当我们用 new 关键字创建一个新的实例时，新对象的 __proto__ 将会被赋值为 myObject.prototype，因为现在的构造函数为 myObject，而非 Function。

var myInstance = new myObject('foo');
console.log(myInstance.__proto__ === myObject.prototype); // true

新对象除了能访问 Function.prototype 中继承下来的 call 和 apply 外，还能访问从 myObject 中继承下来的 getName 方法：

console.log(myInstance.getName()); // foo

var mySecondInstance = new myObject('bar');

console.log(mySecondInstance.getName()); // bar
console.log(myInstance.getName()); // foo

其实这相当于把原型对象当做一个蓝本，然后可以根据这个蓝本创建 N 个新的对象。

prototype 的典型示例

用过 jQuery 或者 Prototype 库的朋友可能知道，这些库中通常都会有 trim 这个方法。

示例：

String.prototype.trim = function() {
	return this.replace(/^\s+|\s+$/g, '');
};

trim 用法：

' foo bar   '.trim(); // 'foo bar'

但是这样做又有一个缺点，因为比较新版本的浏览器中的 JavaScript 引擎在 String 对象中本身就提供了 trim 方法， 那么我们自己定义的 trim 就会覆写它自带的 trim。其实，我们在定义 trim 方法之前，可以做个简单的检测，看是否需要自己添加这个方法：

if(!String.prototype.trim) {
	String.prototype.trim = function() {
		return this.replace(/^\s+|\s+$/g, '');
	};
}

检查一下，如不存在 trim 这个方法，定义一个。

via http://net.tutsplus.com/tutorials/javascript-ajax/prototypes-in-javascript-what-you-need-to-know/

花了点时间，用 CSS 简单实现了个一级下拉菜单。Demo：http://jsfiddle.net/akasuna/76CvN/

菜单 HTML 结构如下：

<ul id="menu">
	<li>
		<a href="#">Menu 1</a>
		<ul>
			<li>
				<a href="#">Menu 1-1</a>
			</li>
			<li>
				<a href="#">Menu 1-2</a>
			</li>
			<li>
				<a href="#">Menu 1-3</a>
			</li>
		</ul>
	</li>
	<li>
		<a href="#">Menu 2</a>
		<ul>
			<li>
				<a href="#">Menu 2-1</a>
			</li>
			<li>
				<a href="#">Menu 2-2</a>
			</li>
			<li>
				<a href="#">Menu 2-3</a>
			</li>
		</ul>
	</li>
	<li>
		<a href="#">Menu 3</a>
		<ul>
			<li>
				<a href="#">Menu 3-1</a>
			</li>
			<li>
				<a href="#">Menu 3-2</a>
			</li>
			<li>
				<a href="#">Menu 3-3</a>
			</li>
		</ul>
	</li>
</ul>

CSS代码：

#menu {
	font-family: Arial;
	font-size: 14px;
	width: 500px;
	overflow: hidden;
}

#menu, #menu ul {
	list-style-type: none;
	background: #A3C159;
	margin: 0;
	padding: 0;
}

#menu li {
	float: left;
}

#menu li a {
	display: block;
	padding: 10px 15px;
	color: #FFF;
	text-decoration: none;
	border-right: 1px solid #FFF;
}
#menu li a:hover {
	background: #1BA6B2;
}

#menu li ul li {
	float: none;
}

#menu li ul li a {
	border-top: 1px solid #FFF;
}

#menu li ul {
	display: none;
	position: absolute;
}

#menu li:hover ul {
	display: block;
}

备注：不支持 IE6。

最后特别推荐一下 http://jsfiddle.net 这个站点，在线调试 HTML，CSS，JavaScript 特别方便，更重要的是可以用它来制作在线 Demo。

过滤器可以有效对结果集就行过滤，最终得到我们想要的结果。例如下面代码就把结果集中包含有类 .selected 的元素给过滤掉了：

.filter(":not(:has(.selected))");

jQuery 缓存选择器结果集

把结果集保存在变量中缓存下来，重用时就无需再次用选择器去选择了。

var allItems = $("div.item");
var keepList = $("div#container1 div.item");

jQuery 检测某元素上是否包含某个类

jQuery 1.4.* 起新加的这个 has 方法：

$("input").has(".email").addClass("email_icon");

使用 jQuery 切换样式表

用选择器选择出样式表标签元素，然后改变其 href 属性的值即可。

$('link[media='screen']').attr('href', 'Alternative.css');

jQuery 限制选择器选择范围（性能优化）

尽可能地在类名前面指明标签名，这样能大大减少选择器的执行时间，如果能用 ID 之类的选择器缩小查询范围则效果更佳。

var in_stock = $('#shopping_cart_items input.is_in_stock');

假如 HTML 代码如下的话：

<ul id="shopping_cart_items">
	<li>
		<input value="Item-X" name="item" class="is_in_stock" type="radio"> Item X
	</li>
	<li>
		<input value="Item-Y" name="item" class="3-5_days" type="radio"> Item Y
	</li>
	<li>
		<input value="Item-Z" name="item" class="unknown" type="radio"> Item Z
	</li>
</ul>

jQuery ToggleClass 的正确用法

ToggleClass 用来在某元素上添加或移除某个类。

// No
a.hasClass('blueButton') ? a.removeClass('blueButton') : a.addClass('blueButton');

// Yes
a.toggleClass('blueButton');

jQuery 判断浏览器是否为 IE

if($.browser.msie) {
	// 此浏览器为 IE
} else {
	// 非 IE
}

用 jQuery 把某元素替换掉

$('#thatdiv').replaceWith('fnuh');

jQuery 判断某元素中内容是否为空

if( !$('#keks').html() ) {
	// 空空如也
}

jQuery 判断无需列表元素的索引

$("ul > li").click(function () {
    var index = $(this).prevAll().length;
});

jQuery 给元素绑定事件执行函数

$('#foo').bind('click', function() {
	alert('用户点击了 "foo"');
});

jQuery 在某元素上追加内容

$('#lal').append('sometext');

jQuery 创建元素时，用一个对象为其添加属性及属性的值

var $e = $("<div>", {
	href: "#nav",
	"class": "a-class another-class",
	title: "..."
});

注意：class 是 JavaScript 的保留字，最好加上引号。

jQuery 用元素的属性作为过滤条件

而且可以用多个属性作为条件：

var elements = $('.someclass input[type=sometype][value=somevalue]').get();

jQuery 使用 delegate 为元素添加事件

自 jQuery 1.4.2 起，建议用 delegate 和 undelegate 来替代 live 和 die，因为 delegate 对上下文有更好的支持。

// 使用 live()
$("table").each(function() {
	$("td", this).live("hover", function() {
		$(this).toggleClass("hover");
	});
});

// 使用 delegate()
$("table").delegate("td", "hover", function(){
	$(this).toggleClass("hover");
});

用 jQuery 找到下拉框中被选定的那个元素

$('#someElement').find('option:selected');

jQuery 将包含有某文字的段落隐藏

$("p.value:contains('thetextvalue')").hide();

jQuery 将滚动条滚动到页面上某位置

jQuery.fn.autoscroll = function() {
	$('html,body').animate({
			scrollTop: this.offset().top
		},
		500
	);
};

// 执行如下代码开始滚动，其实 autoscroll 就是一个 jQuery 插件。
$('#footer').autoscroll();

jQuery 检测浏览器版本

if( $.browser.safari ) {
	// afari
}

if( $.browser.msie && $.browser.version > 6 ) {
	// IE6 以上
}

if( $.browser.msie && $.browser.version <= 6 ) {
	// IE6 及以下
}

if( $.browser.mozilla && $.browser.version >= '1.8' ) {
	// FireFox 2 以上
}

jQuery 字符串替换

var el = $('#id');
el.html(el.html().replace(/word/ig, ''));

jQuery 禁用鼠标右键菜单

$(document).bind('contextmenu', function(e) {
	return false;
});

jQuery 检测某元素是否存在

if($('#someDiv').length) {
	// 存在
}

jQuery 侦测鼠标左击和右击事件

$("#someelement").live('click', function(e) {
	if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {
		alert("左击了");
	} else if(e.button == 2) {
		alert("右击了");
	}
});

jQuery 自动显示、隐藏文本框的默认值

swap_val = [];
$("#s").each(function(i) {
	swap_val[i] = $(this).val();
	$(this).focusin(function() {
		if($(this).val() == swap_val[i]) {
			$(this).val("");
		}
	}).focusout(function() {
		if ($.trim($(this).val()) == "") {
			$(this).val(swap_val[i]);
		}
	});
});

假如文本框 HTML 代码如下的话

<input value="Enter the keyword to search..." id="s" type="text">

jQuery 延时执行 JavaScript 代码

// 1.4 之前版本
setTimeout(function() {
	$('.mydiv').hide('blind', {}, 500);
}, 5000);

// 1.4 及之后版本
$(".mydiv").delay(5000).hide('blind', {}, 500);

jQuery 创建新元素并添加到页面中

var $newDiv = $('<div>');
$newDiv.attr('id','myNewDiv').appendTo('body');

jQuery 限制文本框中字符数

// 插件代码
jQuery.fn.maxLength = function(max) {
	this.each(function() {
		var type = this.tagName.toLowerCase();
		var inputType = this.type ? this.type.toLowerCase() : null;
		if(type == "input" && inputType == "text" || inputType == "password") {
			// 最大字符数
			this.maxLength = max;
		} else if(type == "textarea") {
			this.onkeypress = function(e) {
				var ob = e || event;
				var keyCode = ob.keyCode;
				var hasSelection = document.selection ? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd;
				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);
				}
			};
		}
	});
};

// 使用方法
$('#comment').maxLength(20);

jQuery 如何克隆一个元素

var $cloned = $('#somediv').clone();

jQuery 检测某元素是否处于可见状态

if($(element).is(':visible') == 'true') {
	// 可见
}

jQuery 让某元素居中显示

jQuery.fn.center = function() {
	this.css('position','absolute');
	this.css('top', ( $(window).height() - this.height() ) / +$(window).scrollTop() + 'px');
	this.css('left', ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + 'px');
	return this;
};

// 使用方法
$(element).center();

jQuery 将一批元素的值存到一个数组中

var arrInputValues = new Array();

$("input.someclass").each(function() {
     arrInputValues.push($(this).val());
});

jQuery 剥离 HTML 代码

(function($) {
    $.fn.stripHtml = function() {
        var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;
        this.each(function() {
            $(this).html(
                $(this).html().replace(regexp,"")
            );
        });
        return $(this);
    }
})(jQuery);

//用法
$('p').stripHtml();

jQuery 使用 closest 获取父元素

$('#searchBox').closest('div');

jQuery 在新窗口中打开超链接

jQuery(document).delegate('a', 'click', function() {
	var root = location.href.replace(location.pathname + location.search + location.hash, '');

	if ( !this.href ) return;

	if ( this.href.indexOf(root) != 0 ) {
		window.open(this.href);
		return false;
	}
});

jQuery 使用 .siblings() 获取姊妹元素

// 这样可以
$('#nav li').click(function() {
	$('#nav li').removeClass('active');
	$(this).addClass('active');
});

// 这样更好
$('#nav li').click(function() {
	$(this).addClass('active')
		.siblings().removeClass('active');
});

jQuery 让页面中所有复选框选中或者非选中

var tog = false;
$('a').click(function() {
	$("input[type=checkbox]").attr("checked", !tog);
	tog = !tog;
});

jQuery 根据特定元素值过滤的过滤器

$('.someClass').filter(function() {
	return $(this).attr('value') == $('input#someId').val();
});

jQuery 获取鼠标指针的坐标

$(document).ready(function() {
	$(document).mousemove(function(e) {
		$('#XY').html('X 坐标 ： ' + e.pageX + ' | Y 坐标 ： ' + e.pageY);
	});
});

jQuery 让整个 List 元素可点击

$("ul li").click(function() {
	window.location=$(this).find("a").attr("href");
	return false;
});

示例 HTML 代码

<ul>
	<li><a href="#">Link 1</a></li>
	<li><a href="#">Link 2</a></li>
	<li><a href="#">Link 3</a></li>
	<li><a href="#">Link 4</a></li>
</ul>

jQuery 解析 XML 的简单示例

function parseXml(xml) {
	$(xml).find("Tutorial").each(function() {
		$("#output").append($(this).attr("author") + " ");
	});
}

jQuery 检测图片是否加载完毕

$('#theImage').attr('src', 'image.jpg').load(function() {
	alert('图片加载完毕！');
});

jQuery 事件及方法的命名空间

// 事件
$('input').bind('blur.validation', function(e) {
	// ...
});

// 方法
$('input').data('validation.isValid', true);

jQuery 检测浏览器是否启用了 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) {
        // 未启用
}

jQuery 让 cookie 过期

var date = new Date();
date.setTime(date.getTime() + (x * 60 * 1000));
$.cookie('example', 'foo', { expires: date });

jQuery 自动为网址加上超链接

$.fn.replaceUrl = function() {
        var regexp = /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi;
        this.each(function() {
            $(this).html(
                $(this).html().replace(regexp,'<a href="$1">$1</a>')
            );
        });
        return $(this);
};

// 用法
$('p').replaceUrl();

via http://addyosmani.com/blog/50-jquery-snippets-for-developers/

例如，我想在页面上弹出一个信息提示框（不是 alert 那种），就不需要基于选择器吧。

其实，如果要开发不基于选择器的插件，只要在 $ 下添添加对象或方法即可。例如，我要开发的插件名称为 KBox，我想要的调用方法是 $.KBox.show('Hello World!');，那么插件的代码结构就可能是这样的：

(function( $ ){
	$.KBox = {
		show: function( option ) {
			// do something here
		}
	};
})( jQuery );

顺这这个思路，开始编码。其实就是用 jQuery 在页面上添加几个 div，然后按照自己的需求显示出来。而且还要支持各种自定义选项，例如宽度、高度、字体、背景色等。

Demo：http://jsfiddle.net/akasuna/rasEv/2/embedded/result/

最终效果图如下：

显示效果勉强说得过去，可以点击右上角“X”关闭，也支持 ESC 键关闭。

源码及使用方法：https://github.com/libuchao/KBox

(function( $, window, document ){
	$.KBox = {
		// Default setting of this plugin.
		opts: {
			boxContent   : 'Hello KBox!',
			boxWidth     : '400px',
			boxHeight    : '200px',
			boxBgColor   : '#fff',
			boxSdColor   : '#666',
			boxFontFamily: 'Arial',
			boxFontColor : '#000'
		},

		// Show the box
		show: function( options ) {
			if (typeof options === 'string') {
				$.extend(this.opts, {
					boxContent: options
				});
			} else {
				$.extend(this.opts, options);
			}

			// Make a background for page
			$('<div id="kboxback"></div>').css({
				'position'      : 'fixed',
				'top'           : '0px',
				'left'          : '0px',
				'width'         : '100%',
				'height'        : '100%',
				'background'    : '#000',
				'z-index'       : '9999',
				'opacity'       : '0'
			}).appendTo($('body')).animate({'opacity': '.5'}, 300, 'linear');

			// The box we want to show
			$('<div id="kboxfront"></div>').css({
				'position'      : 'fixed',
				'top'           : (($(window).height() - this.opts.boxHeight.replace('px', '')) / 2) + 'px',
				'left'          : (($(window).width()  - this.opts.boxWidth.replace('px', '')) / 2) + 'px',
				'width'         : this.opts.boxWidth,
				'height'        : this.opts.boxHeight,
				'background'    : this.opts.boxBgColor,
				'margin'        : '0px',
				'padding'       : '13px 10px 10px 10px',
				'border-radius' : '9px',
				'box-shadow'    : '10px 10px 5px ' + this.opts.boxSdColor,
				'z-index'       : '10000',
				'opacity'       : '0',
				'word-wrap'     : 'break-all',
				'font-family'   : this.opts.boxFontFamily,
				'color'         : this.opts.boxFontColor
			}).html('<p style="line-height:1.4">' + this.opts.boxContent + '</p>').appendTo($('body')).animate({'opacity': '1'}, 300, 'linear');;

			// CLose button
			$('<div id="kboxclose"></div>').css({
				'position'      : 'absolute',
				'right'         : '10px',
				'top'           : '7px',
				'cursor'        : 'pointer',
				'font-family'   : 'Arial',
				'font-weight'   : 'bold',
				'color'         : '#000'
			}).html('X').appendTo($('#kboxfront')).click(function() {
				$('#kboxfront, #kboxback').animate({'opacity':'0'}, 300, 'linear', function() {
					$(this).remove();
				});
			});

			// Handle the 'ESC' key
			$(document).keyup(function( e ) {
				if (e.keyCode === 27) {
					$('#kboxfront, #kboxback').animate({'opacity':'0'}, 300, 'linear', function() {
						$(this).remove();
					});
				}
			});

			// Retset the #kboxfront's position when window is resizing...
			$(window).resize(function() {
				$('#kboxfront').css({
					'top'       : (($(window).height() - $.KBox.opts.boxHeight.replace('px', '')) / 2) + 'px',
					'left'      : (($(window).width()  - $.KBox.opts.boxWidth.replace('px', '')) / 2) + 'px'
				});
			});
		}
	};
})( jQuery, window, document );

就像我之前一篇文章 《所谓 jQuery 插件，怎样开发一个 jQuery 插件》 写得那样，了解了插件的原理后，完全可以很容易的写个自己的插件。

源码？

https://github.com/libuchao/KTwitter

这次写的插件是个 widget，用以显示最新微博（不是新浪、腾讯、搜狐、网易）正文，支持各种自定义选项，界面尚可，截图如下：

if(typeof $form.validate == 'function') {
	console.log('该 function 存在');
} else {
	console.log('该 function 不存在');
}

例如： 需要检测一个 MD5 方法是否存在：

if(typeof window.md5 == 'function') {
	// 如果纯在该方法，才去调用
	md5(286);
}

而检测一个 jQuery 方法是否存在，可用一下方法：

if( jQuery.isFunction(jQuery.fn.rtFunction) ) {
	// 如果该方法存在，才去调用
	jQuery(document).rtFunction();
}

via http://www.jquery4u.com/jquery-functions/jquery-function-exist/

简单的创建一个对象的方法如下：

function myObject() {

};

JavaScript 中创建对象的方法一般来说有两种：函数构造法和字面量法，上面这种属函数构造法。下面是一个字面量法的例子：

var myObject = {

};

如果仅仅需要一个对象，而不需要对象的其它实例的情况下，推荐用字面量法。如果需要对象的多个实例，则推荐函数构造法。

定义属性和方法

函数构造法：

function myObject() {
	this.iAm = 'an object';

	this.whatAmI = function() {
		console.log('I am ' + this.iAm);
	};
};

字面量法：

var myObject = {
	iAm : 'an object',

	whatAmI : function() {
		console.log('I am ' + this.iAm);
	}
};

以上两种方法创建的对象中，都有一个名为 “iAm” 的属性，还有一个名为 “whatAmI” 的方法。属性是对象中的变量，方法则是对象中的函数。

如何获取属性及调用方法：

var w = myObject.iAm;

myObject.whatAmI();

调用方法的时候后面一定要加上括号，如果不加括号，那么它只是返回方法的引用而已。

两种创建对象方法的区别

• 函数构造法里面定义属性和方法的时候，都要用前缀 this，字面量法不需要。
• 函数构造法给属性和方法赋值的时候用的是 =，字面量法用的是 : 。
• 如果有多个属性或方法，函数构造法里面用 ; 隔开，字面量法用 , 隔开。

对于字面量法创建的对象，可以直接用对象的引用调用其属性或方法：

myObject.whatAmI();

而对于函数构造法而言，需要创建对象的实例，才能调用其属性或方法：

var myNewObject = new myObject();
myNewObject.whatAmI();

使用构造函数

现在再来回归一下之前的函数构造法：

function myObject() {
	this.iAm = 'an object';
	this.whatAmI = function() {
		console.log('I am ' + this.iAm);
	};
};

其实它看起来就是个函数，既然是函数，能不能给它传参数呢？将代码再稍作修改：

function myObject(what) {
	this.iAm = what;
	this.whatAmI = function(language) {
		console.log('I am ' + this.iAm + ' of the ' + language + ' language');
	};
};

再将对象实例化，并传入参数：

var myNewObject = new myObject('an object');
myNewObject.whatAmI('JavaScript');

程序最终输出 I am an object of the JavaScript language。

两种创建对象的方法，我该用哪种？

对于字面量方法而言，因为它不需要实例化，所以如果修改了某对象的值，那么这个对象的值就永久地被修改了，其它任何地方再访问，都是修改后的值。而对于函数构造法而言，修改值的时候是修改其实例的值，它可以实例化 N 个对象出来，每个对象都可以拥有自己不同的值，而且互不干扰。比较以下几段代码。

先看字面量法：

var myObjectLiteral = {
	myProperty : 'this is a property'
};

console.log(myObjectLiteral.myProperty); // log 'this is a property'

myObjectLiteral.myProperty = 'this is a new property';

console.log(myObjectLiteral.myProperty);  // log 'this is a new property'

即便创建了一个新的变量指向这个对象，结果还是一样的：

var myObjectLiteral = {
	myProperty : 'this is a property'
};

console.log(myObjectLiteral.myProperty); // log 'this is a property'

var sameObject = myObjectLiteral;

myObjectLiteral.myProperty = 'this is a new property';

console.log(sameObject.myProperty); // log 'this is a new property'

再看函数构造法：

// 用函数构造法
var myObjectConstructor = function() {
    	this.myProperty = 'this is a property'
};

// 实例化一个对象
var constructorOne = new myObjectConstructor();

// 实例化第二个对象
var constructorTwo = new myObjectConstructor();

// 输出
console.log(constructorOne.myProperty); // log 'this is a property'

// 输出
console.log(constructorTwo.myProperty); // log 'this is a property'

和预期一样，两个对象的属性值是一样的。如果修个其中一个对象的值呢？

// 用函数构造法
var myObjectConstructor = function() {
	this.myProperty = 'this is a property';
};

// 实例化一个对象
var constructorOne = new myObjectConstructor();

// 修改对象的属性
constructorOne.myProperty = 'this is a new property';

// 实例化第二个对象
var constructorTwo = new myObjectConstructor();

// 输出
alert(constructorOne.myProperty); // log 'this is a new property'

// 输出
alert(constructorTwo.myProperty); // log 'this is a property'

可以看到，用函数构造法实例化出来的不同对象，相互是独立的，可以各自拥有不同的值。所以说，到底用哪种方法来创建对象，需取决于各自实际情况。

via http://net.tutsplus.com/tutorials/javascript-ajax/the-basics-of-object-oriented-javascript/

Ajax 请求由 JavaScript 驱动，通过 JavaScript 代码向 URL 发送一个请求，待服务端有响应时会触发一个回调函数，可以在这里回调函数里面处理服务端返回的信息。由于整个发送请求和响应的过程是异步的，所以在此期间页面中其它 Javascript 代码仍然继续执行，不会中断。

jQuery 对 Ajax 当然也提供了很好的支持，而且还抽象了各种浏览器对于 Ajax 支持方面另人痛苦的差异。它不但提供了全功能的 $.ajax() 方法，还有诸如 $.get()，$.getScript()，$.getJSON()，$.post() 和 $().load() 等更为简便的方法。

尽管被命名为 Ajax，但是很多 Ajax 应用并没有使用 XML，特别是 jQuery 方面的 Ajax 应用，大多数都没有使用 XML；反而用得比较多的情况是：纯文本、HTML 以及 JSON（JavaScript Object Notation）。

一般情况下，由于同源策略（同协议，同域名，同端口）的限制，Ajax 并不能跨域执行请求，除非使用诸如 JSONP（JSON with Padding） 之类的方案，才能实现一些受限的跨域功能。

关于 Ajax 的一些重要概念

GET vs POST，这是两种最常用的向服务端发送请求的方法，正确理解这两种方法的区别对于 Ajax 开发非常重要。

GET 方法通常用于执行一些非破坏性的操作（就是说，只从服务端获取信息，不修改服务端上的信息）。例如，搜索查询服务一般会使用 GET 请求。另外，GET 请求还可能会被浏览器缓存，这可能会导致一些不可预知的问题。一般情况下 GET 请求只能通过查询字符串的方式向服务端发送数据。

POST 方法通常用于在服务端上执行一些破坏性的操作（就是说，会修改服务端上的数据）。例如，当你发表一篇博客的时候，用的应该就是 POST 请求。和 GET 请求不一样，POST 请求不存在缓存问题。POST 请求中，查询字符串作为 URL 的一部分也能向服务端提交数据，但不推荐这种方法，所有数据应该跟 URL 分开单独发送。

数据类型，jQuery 通常要求指明服务端返回的数据类型，某些情况写数据类型可能已经包含在方法名称中了，如 $.getJSON()，除此之外，它都会被作为一个可配置的对象的一部分，该对象最终会作为 $.ajax() 方法的参数。数据类型通常有以下几种：

• text ：纯文本，用于传输简单的字符串。
• html ：用于传输一段 HTML。
• script ：向页面中添加脚本。
• json ：传输已格式化的 JSON 对象，它可以包含字符串、数组或对象。
• jsonp ：用于传输从其他域下返回的 JSON 数据。
• xml ：用于传输自定义的 XML 格式数据。

异步执行，Ajax 中的 A 指的是异步（Asynchronous）。说到这里可能很多 jQuery 初学者一下子很难理解什么叫异步，因为默认情况下 Ajax 请求就是异步的，服务端返回的信息并非马上就能获取到。所有服务端返回的信息只能在一个回调函数中处理。例如以下这段代码，是错误的：

var response;
$.get('foo.php', function(r) { response = r; });
console.log(response); // undefined!

正确的做法应该是在回调函数中处理服务端返回的数据，回调函数在 Ajax 请求成功完成时才被执行，这个时候才能获取到来自服务端的数据：

$.get('foo.php', function(response) { console.log(response); });

同源策略及 JSONP，前面已经说过，一般情况下 Ajax 的请求会被限制在相同协议（http 或 https）、相同端口、相同域名下才能正确执行，但是 HTML 的 <script> 标签却无此限制，它可以载入任何域下的脚本，jQuery 正是利用了这一点才得以拥有跨域执行 Ajax 的能力。

所谓 JSONP，就是其它域的服务端返回给我们的是 JavaScript 代码，这段代码可以被加载到 HTML 中的 <script> 标签中，这段 JavaScript 代码中包含有从其它域下的服务端返回的 JSON 数据，并以回调函数的形式提供。这样一来 jQuery 就回避了同源策略的限制，曲线拥有了跨域执行 Ajax 的能力。

Ajax 调试工具，现在比较新的浏览器如 Chrome 和 Safari，甚至 IE 都内置了调试工具，Firefox 也有无比强大 FireBug 插件，借助于这些调试工具，可以非常详细的查看 Ajax 的执行过程。

和 Ajax 相关的一些方法

jQuery 提供了好多种简便的 Ajax 方法，但是它们的核心都是 $.ajax，所以必须正确理解 $.ajax。

jQuery 的 $.ajax 是创建 Ajax 请求中最直接也是最有效的方法，它的参数是一个 JavaScript 对象，我们可以在这个对象中对 Ajax 作非常详细的配置。另外，$.ajax 方法还可以分别定义 Ajax 请求成功和失败时的回调函数；而且它以一个可配置的对象作为参数的特性，使得我们可以在 Ajax 方法外配置这个对象，然后再传进来，这非常有助于实现代码复用。关于这个方法的详细文档：http://api.jquery.com/jQuery.ajax/

一个典型的示例如下：

$.ajax({
    // 要请求的 URL
    url : 'post.php',

    // 要发给服务端的数据
    // （将会转化为查询字符串，如：?id=123）
    data : { id : 123 },

    // 定义此 Ajax 请求是 POST 还是 GET
    type : 'GET',

    // 服务端返回的数据类型
    dataType : 'json',

    // Ajax 成功执行时的回调函数；
    // 回调函数的参数即为服务端返回的数据
    success : function(json) {
        $('<h1/>').text(json.title).appendTo('body');
        $('<div class="content"/>')
            .html(json.html).appendTo('body');
    },

    // 如果 Ajax 执行失败；
    // 将返回原始错误信息以及状态码
    // 传入这个回调函数中
    error : function(xhr, status) {
        alert('Sorry, there was a problem!');
    },

    // 这里是无论 Ajax 是否成功执行都会触发的回调函数
    complete : function(xhr, status) {
        alert('The request is complete!');
    }
});

备注：

关于 dataType ：如果这里定义的 dataType 跟服务端返回的数据格式不一样，我们的代码就可能会执行失败，并且很难查出原因，因为 HTTP 返回的状态码并没有显示出错。所以在执行 Ajax 请求的时候，一定要确保服务端返回的数据格式跟事先定义定义的一致。通常情况下验证 HTTP 头信息中的 Content-type 是行之有效的办法，对于 JSON 而言，对应的 Content-type 应该是 application/json。

$.ajax 的一些自定义选项

$.ajax 方法的自定义选项非常多，这也是此方法功能强大的原因所在。若要查阅所有自定义选项，可参考官方文档：http://api.jquery.com/jQuery.ajax/，下面只列出一些常用的选项：

• async ：默认值是 true，如果需要 Ajax 的执行方式为同步，可将其设为 false。请注意，如果把这个值设为 false 了，那么你的其它 JavaScript 代码将会被中断执行，直到此次 Ajax 请求完毕，接受到服务端返回的数据为止才会恢复。所以，请慎用此选项。
• cache ：设定是否缓存服务端发回的数据。对于 “script” 和 “jsonp” 之外的其它格式的数据而言，默认值是 true。如果被设置为 false，向服务器发送请求的时候，URL 中会被加入一个查询字符串，字符串的值是当前的时间戳，以确保每次请求的 URL 都是不同的，当然也就不存在缓存问题了。JavaScript 中获取时间戳的方法为 new Date().getTime()。
• complete ：Ajax 请求执行完成时触发的回调函数，无论此次执行成功与否，该回调函数都会被触发。该回调函数可以接受服务端返回的原始信息及状态码。
• context ：定义回调函数执行时的作用域（回调函数 function(s) {alert(this)} 中的 this 指向谁？）。默认情况下，回调函数中的 this 指向传递给 $.ajax 方法的参数，也就是那个大对象。
• data ：要发送给服务端的数据，其值可以是一个对象或者查询字符串，如 foo=bar&baz=bim。
• dataType ：服务端返回数据的类型。如果不设置这个选项，jQuery 会根据服务端返回数据的 MIME 类型自行判断。
• error ：当 Ajax 执行错误时将会触发的回调函数，该函数接受原始的请求信息及状态码。
• jsonp ：执行 JSONP 请求时需要制定的回调函数名称，默认值是“callback”。
• success ：Ajax 成功执行时将会触发的回调函数。在函数中可获取服务端返回的信息（如果 dataType 被设置成 JSON，返回的数据应该是一个 JavaScript 对象），当然也可获取服务端返回的原始数据信息及状态码。
• timeout ：给 Ajax 请求设置一个超时是时间，单位是毫秒。
• type ：指定请求的方式，GET 或者 POST，默认值是 GET。其它如 PUT 和 DELETE 方式也可以用，但并不是所有浏览器都支持。
• url ：要请求的 URL。

其中 url 选项是所有选项中唯一的一个必选项，其它选项都是可选的。

一些简便方法

如果你不需要那么多可配置的选项，也不关心 Ajax 执行错误时候的相关处理，jQuery 同样提供了一些非常有用的简便方法，以更简洁的方式完成 Ajax 请求。其实这些简便写法只是封装了 $.ajax，并把某些选项预先设定好。

jQuery 提供的简便方法如下：

• $.get ：对给定的 URL 执行 GET 请求。
• $.post ：对给定的 URL 执行 POST 请求。
• $.getScript ：向页面中添加脚本。
• $.getJSON ：执行一个 GET 请求，服务端返回的信息应为 JSON。

以上每种简便方法中都可传递如下参数：

• url ：所请求的 URL，必须提供。
• data ：向服务端发送的数据，可选。可以是一个对象，亦或查询字符串，如 foo=bar&baz=bim。
  

  备注：此选项不适用于 $.getScript。

• 一个回调函数 ：此回调函数在请求成功执行后被触发。可选。该回调函数接受服务端返回的数据，也包括请求的状态码及原始对象。
• 数据类型 ：服务端返回数据的类型。可选。
  

  备注：此选项只适用于那些在其名称中没指定数据类型的方法。

下面是三个简便方法的示例：

// 获取纯文本或者 html
$.get('/users.php', { userId : 1234 }, function(resp) {
    console.log(resp);
});

// 向页面中添加脚本，然后执行脚本中定义的函数。
$.getScript('/static/js/myScript.js', function() {
    functionFromMyScript();
});

// 从服务端获取 JSON 格式的数据。
$.getJSON('/details.php', function(resp) {
    $.each(resp, function(k, v) {
        console.log(k + ' : ' + v);
    });
});

$.fn.load

$.fn.load 方法是 jQuery 所有 Ajax 方法中唯一在选择器结果集上调用的方法。$.fn.load 方法从给定的 URL 上获取信息，然后填充到选择器结果集包含的元素中。另外，在 URL 后面还可以附加一些选择器，jQuery 最终只会把跟选择器相匹配的内容填充到对应的 HTML 元素中。

下面是示例：

$('#newContent').load('/foo.html');

// 或
$('#newContent').load('/foo.html #myDiv h1:first', function(html) {
  alert('加载完毕！');
});

Ajax 和 表单

在跟表单打交道方面，jQuery 的 Ajax 更显神威。最为有用的两个方法就是 $.fn.serialize 和 $.fn.serializeArray，下面是它们的用法：

// 将表单中数据转化为查询字符串
$('#myForm').serialize();

$('#myForm').serializeArray();
// 将表单中数据转化为对象数组，如：
[
    { name : 'field1', value : 123 },
    { name : 'field2', value : 'hello world' }
]

使用 JSONP

JSON 的本质其实是一种跨站点脚本注入。现在有很多比较好的网站都提供了 JSONP 服务，允许我们用他们预先定义好的 API 获取他们的数据。下面是一个示例，来源于 http://www.giantflyingsaucer.com/blog/?p=2682

服务端代码：

<?php
    header("content-type: text/javascript");

    if(isset($_GET['name']) && isset($_GET['callback'])) {
        $obj->name = $_GET['name'];
        $obj->message = "Hello " . $obj->name;

        echo $_GET['callback']. '(' . json_encode($obj) . ');';
    }
?>

客户端代码：

$.ajax({
    url: 'http://otherDomail.com:8080/JSONP/jsonp-demo.php',
    data: {name: 'Super man'},
    dataType: 'jsonp',
    jsonp: 'callback',
    success: function( response ) {
        console.log( response.message );
    }
});

jQuery 把 JSONP 的实现细节隐藏在幕后，我们要做的就是告诉 jQuery 服务端定义好的函数名以及我们请求的数据类型是 JSONP，其它方面和普通的 Ajax 请求没什么区别。

Ajax 事件

很多时候我们都需要在 Ajax 请求开始或结束时做一些操作，例如显示或隐藏一个 loading… 图片。这些工作本可以在每个 Ajax 请求中各自实现，但是 jQuery 提供了更好的方法，你可以像绑定普通事件一样绑定 Ajax 事件。若要参阅全部事件列表，可访问 http://docs.jquery.com/Ajax_Events。下面是简单示例：

$('#loading_indicator')
    .ajaxStart(function() { $(this).show(); })
    .ajaxStop(function() { $(this).hide(); });

总结

可以看到，jQuery 隐藏了底层的 Ajax 实现，向用户提供了统一且简单的调用接口，极大的简化了 Ajax 开发，让 Ajax 开发成为一种乐趣。

本文只是简单介绍了一些常用的 jQuery Ajax 的使用方法，若要了解更为详细的内容请访问 http://api.jquery.com/jQuery.ajax/

本文翻译自 http://jqfundamentals.com/#chapter-7 并略作加工以使其符合中文习惯。

这原本是国外某哥们儿在 Stack Overflow 上对 JavaScript 闭包所提出的问题。不过既然此问题是在 Stack Overflow 提出的，当然也会有很多高手出来解答，其中有些回答确实是经典，如下面这个：

如果在一个外部函数中再定义一个内部函数，即函数嵌套函数，那么内部函数也可以访问外部函数中的变量：

function foo(x) {
	var tmp = 3;
	function bar(y) {
		alert(x + y + (++tmp));
	}
	bar(10);
}

foo(2); // alert 16
foo(2); // alert 16
foo(2); // alert 16

此段代码可以正确执行，并返回结果：16，因为 bar 能访问外部函数的变量 tmp， 同时也能访问外部函数 foo 的参数 x。但以上示例不是闭包！

要实现闭包的话，需要将内部函数作为外部函数的返回值返回，内部函数在返回前，会将所有已访问过的外部函数中的变量在内存中锁定，也就是说，这些变量将常驻 bar 的内存中，不会被垃圾回收器回收，如下：

function foo(x) {
	var tmp = 3;
	return function (y) {
		alert(x + y + (++tmp));
	}
}
var bar = foo(2); // bar 现在是个闭包了
bar(10); // alert 16
bar(10); // alert 17
bar(10); // alert 18

上述代码中，第一次执行 bar 时，仍会返回结果：16，因为 bar 仍然可以访问 x 及 tmp，尽管它已经不直接存在于 foo 的作用域内。那么既然 tmp 被锁定在 bar 的闭包里，那么每次执行 bar 的时候，tmp 都会自增一次，所以第二次和第三次执行 bar 时，分别返回 17 和 18。

此示例中，x 仅仅是个纯粹的数值，当 foo 被调用时，数值 x 就会作为参数被拷贝至 foo 内。

但是 JavaScript 处理对象的时候，使用的总是引用，如果用一个对象作为参数来调用 foo，那么 foo 中传入的实际上是原始对象的引用，所以这个原始对象也相当于被闭包了，如下：

function foo(x) {
	var tmp = 3;
	return function (y) {
		alert(x + y + tmp++);
		x.memb = x.memb ? x.memb + 1 : 1;
		alert(x.memb);
	}
}
var age = new Number(2);
var bar = foo(age); // bar 现在是个闭包了
bar(10); // alert 15 1
bar(10); // alert 16 2
bar(10); // alert 17 3

和期望的一样，每次执行 bar(10) 时，不但 tmp 自增了，x.memb 也自增了，因为函数体内的 x 和函数体外的 age 引用的是同一个对象。

via http://stackoverflow.com/questions/111102/how-do-javascript-closures-work

补充：通过以上示例，应该能比较清楚的理解闭包了。如果觉得自己理解了，可以试着猜猜下面这段代码的执行结果：

function foo(x) {
	var tmp = 3;
	return function (y) {
		alert(x + y + tmp++);
		x.memb = x.memb ? x.memb + 1 : 1;
		alert(x.memb);
	}
}
var age = new Number(2);
var bar1 = foo(age); // bar1 现在是个闭包了
bar1(10); // alert 15 1
bar1(10); // alert 16 2
bar1(10); // alert 17 3

var bar2 = foo(age); // bar2 现在也是个闭包了
bar2(10); // alert ? ?
bar2(10); // alert ? ?
bar2(10); // alert ? ?

bar1(10); // alert ? ?
bar1(10); // alert ? ?
bar1(10); // alert ? ?

试着猜猜代码注释中 ? 的值。