参考列表：
下面都是网上搜集和个人的经验总结，如有不对的地方，还请指出，谢谢！
1、jQuery在线调用方式
jQuery站点：<script src="http://code.jquery.com/jquery-latest.js"></script>
ajax.googleapis.com：<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2 /jquery.min.js"type="text/javascript"></script>
2、使用data在DOM中存储数据
$('selector').data('参数名', '要存储的数据'); //之后这样取得数据:$('selector').data('参数');
想了解更多关于data()和removeData()方法的介绍，可以看看jQuery官方讲解
Demo：给input域一个默认值，然后在聚焦的时候清空
HTML部分:
<form id="testform">
<input type="text" value="Always cleared" />
<input type="text" value="Cleared only once" />
<input type="text" value="Normal text" />
</form>JavaSript部分:
$(function() {
$('#testform input.clear').each(function(){
$(this).data( "txt", $.trim($(this).val()) );
}).focus(function(){
if ( $.trim($(this).val()) === $(this).data("txt") ) {
$(this).val("");
}
}).blur(function(){
if ( $.trim($(this).val()) === "" && !$(this).hasClass("once") ) {
$(this).val( $(this).data("txt") );
}
});
});3、利用控制台打印消息进行测试
打印一个参数：console.log("hello world")
打印多个参数：console.log(2,4,6,8,"foo",bar)
编写扩展来打印jQuery对象到控制台：
jQuery.fn.log = function (msg) {console.log("%s: %o", msg, this);return this;};
// 可以直接使用.log()方法来记录当前对象到控制台。
$('#some_div').find('li.source > input:checkbox').log("sources to uncheck").removeAttr("checked");
4、尽可能使用ID选择器
ID选择器更快是因为 DOM本身就有”天然的”getElementById这个方法，而class并没有（只有IE低版本浏览器没有getElementsByClassName）。
如果使用class选择器的话，浏览器会遍历整个DOM。如果网页DOM结构复杂，会降低查找速度。
5、善于利用jQuery链
因为jQuery的大部分方法，返回值都是调用该方法的对象（this），所以可以直接使用连缀形式调用方法。
可以减少反复从DOM中查找元素，使用方式如：$('input.text').css('border', '3px dashed yellow').val("text updated");
6、$(window).load和$(document).ready的区别
$(document).ready事件的解析顺序是在文档准备就绪，单文档中的图片等对象正在下载的时候开始运行的。
$(window).load事件可以在整个文档都准备就绪之后再开始运行你期望的代码，完成一些视觉效果和动画、拖拽、预读取隐藏图片等。
7、使用自定义选择器
jQuery允许我们在css选择器的基础上定义自定义选择器:
$.expr[':'].mycustomselector= function(element, index, meta, stack){
// element- DOM元素
// index - 堆栈中当前遍历的索引值
// meta - 关于你的选择器的数据元
// stack - 用于遍历所有元素的堆栈
// 包含当前元素则返回true
// 不包含当前元素则返回false
};
// 自定义选择器的应用:
$('.someClasses:mycustomselector').doSomething();下面让我们来看看一个小例子，我们通过使用自定义选择器来锁定含有”rel”属性的元素集：
$.expr[':'].withRel = function(element){
var $this = $(element);
//仅返回rel属性不为空的元素
return ($this.attr('rel') != '');
};
$(document).ready(function(){
//自定义选择器的使用很简单，它和其他选择器一样，返回一个元素包装集
//你 可以为他使用格式方法，比如下面这样修改它的css样式
$('a:withRel').css('background-color', 'green');
});<ul>
<li><a href="#">without rel</a></li>
<li><a rel="somerel" href="#">with rel</a></li>
<li><a rel="" href="#">without rel</a></li>
<li><a rel="nofollow" href="#">a link with rel</a></li>
</ul>8、单元测试框架QUnit
test( "hello test", function() {
ok( 1 == "1", "Passed!" );
});
9、jQuery常用DOM操作说明
在每个匹配的元素中插入新元素：
.append()：$('#a').append('content');
.appendTo()：$('<div>content</div>').appendTo($('#a'));
.prepend()：$("p").prepend("<b>Hello</b>");
.prependTo()：$('sssssss').prependTo('p');
在每个匹配的元素相邻的位置上插入新元素：
.after（）
.insertAfter（）
.before（）
.insertBefore（）
在每个匹配的元素外部插入新元素：
.wrap（）
用新元素或文本替换每个匹配的元素：
.html（）
.text（）
移除每个匹配的元素中的后代元素：
.empty（）
移除每个匹配的元素及其后代元素：
.remove（）
10、jQuery获取DOM属性.prop()和.attr()
关于 .prop() 和 .attr() 使用说明：
.prop() 方法应该被用来处理boolean attributes/properties以及在html(比如：window.location)中不存在的properties。
其他所有的 attributes(在html中你看到的那些)可以而且应该继续使用.attr()方法来进行操作。
建议使用.prop()方法来设置 boolean attributes/properties，虽然使用 attr() 仍然可以正常运行。
.attr()和.prop()都不应该被用来取值/设值。使用.val()方法代替.attr("value","somevalue") 。
关于 attributes 和 properties 的详细说明：
window和document中没有 attributes。它们包含properties(比如：location或readyState)，必须使用.prop()方法操作或JS原生方法。
properties 就是浏览器用来记录当前值的东西。当用户点击一个checkbox元素或选中一个select元素的一个option时，boolean properties保持最新。但相应的boolean attributes是不一样的，正如上面所述，它们仅被浏览器用来保存初始值。
$(“:checkbox”).get(0).checked = true;
// Is the same as $(":checkbox:first").prop(“checked”, true);下面是jQuery支持的使用.attr()动态地取得和设置boolean attributes/properties的完整列表：
（大部分都是html5新增的属性）
-
autofocus, autoplay, async, checked, controls, defer, disabled, hidden, loop, multiple, open, readonly, required, scoped, selected
11、jQuery.getJSON() 如何解决跨域请求？
JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。JSON系统开发方法是一种典型的面向数据结构的分析和设计方法，以活动为中心，一连串的活动的顺序组合成一个完整的工作进程。
之所以会有跨域这个问题的产生，根本原因是浏览器的同源策略限制。同源策略是指阻止代码获得或者更改从另一个域名下获得的文件或者信息。也就是说我们的请求地址必须和当前网站的地指相同。同源策略通过隔离来实现对资源的保护。这个策略的历史非常悠久从Netscape Navigator 2.0时代就开始了。
解决这个限制的一个相对简单的办法就是在服务器端发送请求，服务器充当一个到达第三方资源的代理中继。虽然是用广泛但是这个方法却不够灵活。
另一个办法就是使用框架(frames)，将第三方站点的资源包含进来，但是包含进来的资源同样要受到同源策略的限制。
有一个很巧妙的办法就是在页面中使用动态代码元素，代码的源指向服务地址并在自己的代码中加载数据。当这些代码加载执行的时候，同源策略就不会起到限制。但是如果代码试图下载文件的时候执行还是会失败，幸运的是，我们可以使用JSON(JavaScript Object Notation)来改进这个应用。
JSON和JSONP
与XML相比，JSON是一个轻量级的数据交换格式。JSON对于JavaScript开发人员充满魅力的原因在于JSON本身就是Javascript中的对象。这样我们就可以在函数的参数中传递并使用动态的JSON数据。
通过使我们的函数能够加载动态的JSON数据，我们就能够处理动态的数据，这项技术叫做 Dynamic Javascript Insertion。
我们看下面的例子：
<script type="text/javascript">
function showPrice(data){
alert("Symbol:" + data.symbol + ", Price:" + data.price);
}
var url = "ticker.js"; //Outer JS URL
var script = document.createElement('script');
script.setAttribute('src', url); //load javascript
document.getElementsByTagName('head')[0].appendChild(script);
</script>var data = {symbol:'IBM', price:100};
showPrice(data); 上面的代码通过动态加入Javascript代码，来执行函数加载数据。
既然同源策略对于动态插入的代码不适用，也就说你可以从不同的域中加载JS文件，以便执行在他们代码中的JSON数据。
这就是JSONP(JSON with Padding)。注意，使用这种方法时，你必须在页面中定义回调函数，就像上例中的showPrice一样，这样才能实现动态调用JSON数据的目的。
我们通常所说的JSONP服务(远程JSON服务)，实际上就是一种扩展的支持在用户定义函数中包含返回数据的能力。这种方法依赖于必须接受一个回调函数的名字作为参数。然后执行这个函数，处理JSON数据，并显示在客户页面上。
12、jQuery中被忽略的Event属性
jQuery 统一了事件对象, 当绑定事件处理函数时, 会将jQuery格式化后的事件对象作为唯一参数传入:
$("#testDiv").bind("click", function(event) { });关于event对象的详细说明, 可以参考jQuery官方文档: http://docs.jquery.com/Events/jQuery.Event
jQuery事件对象将不同浏览器的差异进行了合并, 比如可以在所有浏览器中通过 event.target 属性来获取事件的触发者(在IE中使用原生的事件对象, 需要访问event.srcElement).
下面是jQuery事件对象可以在扩浏览器支持的属性：
type ：事件类型。如果使用一个事件处理函数来处理多个事件, 可以使用此属性获得事件类型,比如click.
target ：获取事件触发者DOM对象。该对象为JS原生对象。
data ：事件调用时传入额外参数.
$("a").each(function(i) {
$(this).bind('click', {index:i}, function(e){
alert('my index is ' + e.data.index);
});
});relatedTarget ：对于鼠标事件, 标示触发事件时离开或者进入的DOM元素
currentTarget ：冒泡前的当前触发事件的DOM对象, 等同于this.
$("p").click(function(event) {
alert( event.currentTarget.nodeName );
});
// output: ppageX/Y : 鼠标事件中, 事件相对于页面原点的水平/垂直坐标.
result : 上一个事件处理函数返回的值
$("p").click(function(event) {
return "hey"
});
$("p").click(function(event) {
alert( event.result );
});
// output: heytimeStamp ：事件发生时的时间戳.
上面是jQuery官方文档中提供的event对象的属性. 在《jQuery实战》一书中还提供了下面的多浏览器支持的属性, 时间关系我没有尝试每一个属性, 大家可以帮忙验证是否在所有浏览器下可用:
altKey Alt键是否被按下. 按下返回true
ctrlKey ctrl键是否被按下, 按下返回true
metaKey Meta键是否被按下, 按下返回true.
meta 键就是PC机器的Ctrl键,或者Mac机器上面的Command键
shiftKey Shift键是否被按下, 按下返回true
keyCode 对于keyup和keydown事件返回被按下的键. 不区分大小写, a和A都返回65.对于keypress事件请使用which属性, 因为which属性跨浏览时依然可靠.
which 对于键盘事件, 返回触发事件的键的数字编码. 对于鼠标事件, 返回鼠标按键号(1左,2中,3右).
screenX/Y 对于鼠标事件, 获取事件相对于屏幕原点的水平/垂直坐标
事件对象除了拥有属性, 还拥有事件. 有一些是一定会用到的事件比如取消冒泡 stopPropagation() 等.下面是jQuery事件对象的函数列表:
preventDefault() ：取消可能引起任何语意操作的事件. 比如<a>元素的href链接加载, 表单提交以及click引起复选框的状态切换.
isDefaultPrevented() ：是否调用过
$("a").click(function(event){
alert( event.isDefaultPrevented() );
event.preventDefault();
alert( event.isDefaultPrevented() );
});stopPropagation() ：取消事件冒泡
isPropagationStopped() ：是否调用过
stopImmediatePropagation() ：取消执行其他的事件处理函数并取消事件冒泡.如果同一个事件绑定了多个事件处理函数, 在其中一个事件处理函数中调用此方法后将不会继续调用其他的事件处理函数.
isImmediatePropagationStopped() ：是否调用过
这些函数中 stopPropagation() 是我们最长用的也是一定会用到的函数. 相当于操作原始event对象的event.cancelBubble=true来取消冒泡.
13、jQuery重要版本之间的差异
jQuery 1.9 与较低版本的比较（查看官方说明）：
jQuery1.9删除了一些在1.8中已经过时的api,想要把那些不够安全的、缺乏效率的、用处不大的，以及带有误导的特性统统去掉。如果你想升级你的jquery版本，但又使用了如下被删除的api的话，可以引入Migrate迁移插件，被删除的api可以在Migrate插件中修复。
jQuery.browser()
-
jQuery.browser() removed
The jQuery.browser() method has been deprecated since jQuery 1.3 and is removed in 1.9. If needed, it is available as part of the jQuery Migrate plugin. We recommend using feature detection with a library such as Modernizr.
这里给出的是用Modernizr（一个利用JS和CSS来检测浏览器所支持功能的小工具）来检测浏览器所支持功能，其实官网还给出了另一种解决方案：
-
Because $.browser uses navigator.userAgent to determine the platform, it is vulnerable to spoofing by the user or misrepresentation by the browser itself. It is always best to avoid browser-specific code entirely where possible. The$.support property is available for detection of support for particular features rather than relying on$.browser.
Gaia1.0中用到JQuery.browser()方法的为:
$.browser.msie && $.browser.version <= 8
作为常用的两种方法,
JQuery.browser.mise(如果是IE则返回true)可以用JQuery.support.boxModel(如果IE浏览器是QuirksMode方式运行,则返回false)代替;
jQuery.browser.version <= 8可以用jQuery. support.leadingWhitespace(判断浏览器是否为IE 6~8版本)代替;
这样上述语句可以改为:
$.support.boxModel && $.support.leadingWhitespace
另外，jQuery.support.objectAll可判断浏览器是否为IE 7~8版本。由于jQuer2.0不再支持IE9之前的版本，日后升级还需根据官方推荐判断浏览器类型及版本加载不同的jQuery。如官方推荐方式;
-
<!--[if lt IE 9]>
<script src='jquery-1.9.0.js'></script>
<![endif]-->
<!--[if gte IE 9]>
<script src='jquery-2.0.0.js'></script>
<![endif]-->
如果必须要继续使用jQuery.browser()可以添加“jquery-browser”插件，但我没有测试该插件。
.live()
-
link .live() removed
The .live() method has been deprecated since jQuery 1.7 and has been removed in 1.9. We recommend upgrading code to use the .on() method instead. To exactly match $("a.foo").live("click", fn), for example, you can write $(document).on("click", "a.foo", fn). For more information, see the .on() documentation. In the meantime, the jQuery Migrate plugin can be used to restore the .live() functionality.
.live()方法在1.9中移除，@ZPS在邮件中已经告知过大家。对于.live()方法的移除，升级比较简单，仅仅是将“.live()”替换为“.on()”。
说明： .live() 与 .on()：对于这两个方法，虽然前者可以被后者替代，但是，直接替换方法名是行不通的。
我们通常是这样调用 .live() 的：
$("#dataTable tbody tr").live("click", function(event){
alert($(this).text());
});
若直接将 .live() 换成 .on() ：
$("#dataTable tbody tr").on("click", function(event){
alert($(this).text());
});
但是根据官网的说法“Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). ”，即，被绑定事件的元素必须在事件绑定之前就已经存在。这意味着在绑定事件之后插入的元素将无法触发事件处理函数。所以，如果将 live 直接替换成 on ，将失去 live 动态给未来新增元素绑定事件的特性，而我们也无法实现想要的效果。
其实，我们应该用另外一种调用方式来实现这种动态绑定特性。看下面的调用方式。
$( "#dataTable tbody").on( "click", "tr", function(event){
alert($( this).text());
});
将事件绑定给元素的直接父层或者祖父层（必须为“only one element ”），再将元素指定为事件的接收方。这样，即使往父层中新增加同类元素，该元素也同样可以接收事件。这其实跟 live 的动态绑定一样，利用了事件冒泡的原理。
但是，既然jquery删掉了 live 并将 on 的这种调用形式进行了弱化（从参数是可选可以看出），最重要的原因就是这种调用形式会降低性能。
而我自己的理解是，动态的为将来的元素绑定事件，本来就不应该是框架要做的事情，这属于业务逻辑。我们应该自己去对需要动态改变的 DOM 进行监控，当 DOM 被创建时，是否需要绑定事件，需要绑定哪些事件，以及，当 DOM 被隐藏或者被销毁时，是否需要解绑，需要解绑哪些事件，都应该由我们自己来控制。如果你已经用惯了 .live()，那么，现在是时候脱离“依赖”了。
下面是 .on() 的四个参数，具体可以参考http://api.jquery.com/on/ ，里面有详细说明。
.on( events [, selector ] [, data ], handler(eventObject) )
.die()
-
.die() removed
The .die() method has been deprecated since jQuery 1.7 and has been removed in 1.9. We recommend upgrading code to use the .off() method instead. To exactly match $("a.foo").die("click"), for example, you can write $(document).off("click", "a.foo"). For more information, see the .off() documentation. In the meantime, the jQuery Migrate plugin can be used to restore the .die() functionality.
相对于“.live()”方法的移除，“.die()”方法也从1.9中移除，取而代之的是“.off()”方法。正如在1.9之前，很多人只关注过“.live()”方法，却不知道还有个“.die()”方法，或许还会有Coder不知道如何去掉.on()添加的事件，其实就是用“.off()”进行删除添加的事件。
jQuery.sub()
-
jQuery.sub() removed
The jQuery.sub() method has been moved to the jQuery Migrate plugin. The number of use cases where it proved valuable were not enough to justify keeping it in core. The jQuery Migrate plugin adds back this functionality.
.sub()方法可以创建一个新的jQuery副本而不影响原有的jQuery对象，我对该方法的理解是：其实.sub()方法就是增加或重写jQuery的方法或创建新plugin，有待讨论。
从上面升级指南上来看，.sub()方法并没有被removed，而是被moved到其他plugin，所以应该是还可以用的，只要引用相应的plugin。
官方给出的使用.sub()的两个特定情况：一是在不改变原有方法的前提下提供一种简单的重写jQuery方法的途径，二是帮助用户解决jQuery plugin封装和基本命名空间。翻译晦涩，大家请看原文：
There are two specific use cases for which jQuery.sub() was created. The first was for providing a painless way of overriding jQuery methods without completely destroying the original methods and another was for helping to do encapsulation and basic namespacing for jQuery plugins.
.toggle(function, function, … )
-
link .toggle(function, function, ... ) removed
This is the "click an element to run the specified functions" signature of .toggle(). It should not be confused with the "change the visibility of an element" of .toggle() which is not deprecated. The former is being removed to reduce confusion and improve the potential for modularity in the library. The jQuery Migrate plugin can be used to restore the functionality.
需要注意的是该.toggle()是“绑定两个或多个处理程序，在点击时循环执行”；另一个.toggle()仍然存在，它是“控制相应组件的显示和隐藏”；中文晦涩，官方对此二方法的说明如下：
-
Categories: Deprecated > Deprecated 1.8 | Events > Mouse Events
.toggle(handler(eventObject), handler(eventObject) [,handler(eventObject)])
Returns:jQuery
version deprecated: 1.8, removed: 1.9
Description:Bind two or more handlers to the matched elements, to be executed on alternate clicks.
.toggle( [duration ] [, complete ] )
Returns:jQuery
Description:Display or hide the matched elements.
这个变化值得注意。对于删除的这个“.toggle()”方法，官方没有给出升级措施，但我发现一个方法名和描述都比较相似的方法“.trigger()”，不知道可不可以替代，还请大家赐教。
另外，国外有论坛提到“jQuery Migrate Plugin”插件，可以使用该插件检测在jQuery 1.9 或2.0中哪些功能已经启用或移除。我还没有学习到，大家参看项目README吧。（谷歌这个插件，全是E文；百度这个插件，过半是E文）
jQuery 1.9+ 与 2.0+ 的差异：
在jQuery 2.0中，将移除对老IE版本（IE 6/7/8）的支持，如果开发者比较在意老版本IE用户，只能使用jQuery 1.9及之前的版本了。但该版本比jQuery 1.9更小且更快。
361
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
