做前端頁面的時候 jQuery 用的也比較多了，可從來沒有仔細看過它的文檔，趁着最近工作不忙來對着文檔來縷一縷 jQuery 的 API 。
jQuery 通過 jQUery 函數 jQuery 對象 和 jQuery 靜態方法來提供功能，其核心就是 jQuery 對象的創建，查找，隊列操作和擴展方法。
jQuery 函數
$(fn) 在文檔加載完成後執行 fn ，等同於 $(document).ready(fn)
$(dom) 將 dom 對象轉換爲 jQuery 對象, dom 可以是一個包含 dom 對象的數組
$(selector, [context]) 最常用的，在頁面上查找並構造 jQuery 對象，默認在整個文檔下查找，如果給定 context 則只在 context 下查找
$(html) 通過 html 代碼創建一個 jQuery 對象，在需要動態創建頁面元素時很有用
jQuery 對象方法
selector 獲得查找 jQuery 對象時用的選擇器
context 獲得查找 jQuery 對象時用的 context
each 遍歷 jQuery 對象內的 dom 元素
get([index]) 獲得 jQuery 對象內的第 index 個 dom 元素，若不傳遞 index 則獲取所有 dom 元素
index([obj]) 獲得 jQuery 對象在文檔中相對其兄弟的編號，若傳遞 obj 則獲得 obj 在 jQuery 對象中的編號
data([key], [value]) 在 dom 對象上設置或存儲數據，可以是任意 js 數據
queue(fn) 爲 jQuery 對象添加隊列任務
dequeue() 結束 jQuery 對象的當前隊列任務
clearQueue() 結束 jQuery 對象所有的隊列任務
jQuery 靜態方法
$.fn.extend(obj) 擴展 jQuery 對象
$.extend(obj) 擴展 jQuery靜態方法
$.noConflict([ext]) 解決 全局變量 $ 和 jQuery 帶來的衝突，它返回 jQuery 函數，並禁用全局的 $ 。若 ext = true 則同時禁用全局的 jQuery 。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../lib/jquery-1.11.2/jquery.js"></script>
</head>
<body>
<!-- ################## jQuery對象操作 start ################### -->
<div id="obj">
<p></p>
<p></p>
<p></p>
</div>
<script>
$(function() {
// $(selector, [context])
console.log($('p', $('#obj')).length);
console.log($('p').length);
// $(dom)
$(document.getElementById('obj')).text('$(dom)');
// $(html)
$('<p>我是動態添加的</p>').appendTo($('body'));
// selector context
var jq = $('p', $('#obj'));
console.log(jq.selector); console.log(jq.context);
// each(func)
var num = 0;
$('#obj>p').each(function() {
if(++num >= 3) return false;
this.innerHTML = '我是 each 方法修改的' + num;
});
// get([index])
console.log($('p').get());
console.log($('p').get(0));
// index
console.log($('div').index($('#queue')));
console.log($('#queue').index());
// data([key], [value])
$('#obj').data({name: 'mcj', age: 26});
console.log($('#obj').data('name'));
console.log($('#obj').data());
});
</script>
<!-- ################## jQuery對象操作 end ###################-->
<!-- ################## jQuery隊列操作 start ###################-->
<div id="queue">1</div>
<script>
// queue dequeue clearQueue
var num = 1;
$('#queue').queue(function() {
$(this).html(num++);
var that = this;
setTimeout(function() {
$(that).dequeue();
}, 1000);
});
$('#queue').queue(function() {
$(this).html(num++);
var that = this;
setTimeout(function() {
$(that).dequeue();
}, 1000);
});
$('#queue').queue(function() {
$(this).html(num++);
var that = this;
setTimeout(function() {
$(that).dequeue();
}, 1000);
});
$('#queue').click(function() {
$('#queue').clearQueue();
});
</script>
<!-- ################## jQuery隊列操作 end ###################-->
<!-- ################## jQuery擴展 start ###################-->
<div id="ext">
<p></p>
<p></p>
</div>
<script>
$.fn.extend({
sayHello: function() {
this.html('hello world!');
}
});
$.extend({
sayHello: function() {
console.log('hello world!');
}
});
$('#ext *').sayHello();
$.sayHello();
</script>
<!-- ################## jQuery擴展 end ###################-->
</body>
</html>