<a href="http://www.cnblogs.com/wjfluisfigo/archive/2009/08/08/1530624.html">jQuery學習筆記：核心（jQuery Core）</a>
學習并掌握jQuery，從熟悉jQuery核心開始。
一、核心函數
1、jQuery(expression,[context])
這個函數接收一個包含 CSS 選擇器的字元串，然後用這個字元串去比對一組元素。
jQuery 的核心功能都是通過這個函數實作的。 jQuery中的一切都基于這個函數，或者說都是在以某種方式使用這個函數。這個函數最基本的用法就是向它傳遞一個表達式（通常由 CSS 選擇器組成），然後根據這個表達式來查找所有比對的元素。預設情況下, 如果沒有指定context參數，$()将在目前的 HTML 文檔中查找 DOM 元素；如果指定了context 參數，如一個DOM 元素集或 jQuery 對象，那就會在這個context 中查找。
傳回值 jQuery
參數
expression (String) : 用來查找的字元串
context (Element, jQuery) : (可選) 作為待查找的 DOM 元素集、文檔或 jQuery 對象。
示例：
Code
$(document).ready(function() {
$("div>p").css("display", "block"); //顯示
$("div>p").css("color", "blue"); //顔色為綠色
alert($("div>p").html()); //找到所有div元素的子元素p,并顯示p元素的innerHTML
var chks = $("input:checkbox", document.forms[0]); //在文檔的第一個表單中，查找所有的多選按鈕(即:type為checkbox的input元素)
alert(chks.length);
for (var i = 0; i < chks.length; i++) {
alert(chks[i].checked);
}
})
文檔片段:
<form id="form1" runat="server">
<p>one</p> <div><p style="display:none">two</p></div> <p>three</p>
<br />
<div>
<input type="text" />&nbsp;&nbsp;<input id="chkTest" type="checkbox" checked="checked" />&nbsp;&nbsp;<input id="btnTest" type="button" value="button" /></div>
</form>
2、jQuery(html,[ownerDocument])
根據提供的原始HTML标記字元串，動态建立由 jQuery 對象包裝的DOM元素。
可以傳遞一個手寫的HTML字元串，或者由某些模闆引擎或插件建立的字元串，也可以是通過 AJAX 加載過來的字元串。但是在建立input 元素的時會有限制，可以參考第二個示例。當然這個字元串可以包含斜杠 (比如一個圖像位址)，還有反斜杠。
當建立單個元素時，請使用閉合标簽或 XHTML 格式。例如，建立一個span，可以用 $("<span/>") 或 $("<span></span>") ，但不推薦 $("<span>")。在jQuery 中，這個文法等同于$(document.createElement("span")) 。
html (String) : 用于動态建立DOM元素的HTML标記字元串
ownerDocument (Document) : 可選，建立DOM元素所在的文檔
$("<div><p>This is a jQuery test.</p></div>").appendTo("body");
//建立一個input元素
if (!$.browser.msie) {
$("<input>").attr("type", "checkbox").appendTo("body"); // 在 IE 中無效:
else {
// 所有浏覽器中有效
$("<input type='checkbox'>").appendTo("body");
3、jQuery(elements)
将一個或多個DOM元素轉化為jQuery對象。
這個函數也可以接收XML文檔和Window對象（雖然它們不是DOM元素）作為有效的參數。
elements (Element, Array<Element>) : 用于封裝成jQuery對象的DOM元素
$(document.body).css("background", "cef"); //設定頁面背景色
$(document.forms[0].elements).hide(); //隐藏一個表單中的所有元素
4、jQuery(callback)
$(document).ready()的簡寫。
允許綁定一個在DOM文檔載入完成後執行的函數。這個函數的作用如同$(document).ready()一樣，隻不過用這個函數時，需要把頁面中所有需要在DOM 加載完成時執行的$()操作符都包裝到其中來。可以在一個頁面中使用任意多個$(document).ready事件。
callback (Function) : 當DOM加載完成後要執行的函數
$(function() {
alert("文檔加載就緒");
// 文檔加載就緒
});
注意：
使用 $(document).ready() 的簡寫，同時内部的 jQuery 代碼依然使用 $ 作為别名，而不管全局的 $ 為何。
jQuery 代碼:
jQuery(function($) {
// 可以在這裡繼續使用$作為别名...
});
二、對象通路
1、each(callback)
以每一個比對的元素作為上下文來執行一個函數。
意味着，每次執行傳遞進來的函數時，函數中的this關鍵字都指向一個不同的DOM元素（每次都是一個不同的比對元素）。而且，在每次執行函數時，都會給函數傳遞一個表示作為執行環境的元素在比對的元素集合中所處位置的數字值作為參數（從零開始的整形）。 傳回 'false' 将停止循環 (就像在普通的循環中使用 'break')。傳回 'true' 跳至下一個循環(就像在普通的循環中使用'continue')。
callback (Function) : 對于每個比對的元素所要執行的函數
$("img").each(function(i) {
this.src = "images/test" + (i + 1).toString() + ".jpg"; // 結果: <img src="images/test1.jpg" />
如果你想得到 jQuery對象，可以使用 $(this) 函數。
$("img").each(function(){
$(this).toggleClass("example");
下面再實作一個使用 'return' 來提前跳出 each() 循環：
$("button").click(function() {
$("div").each(function(index, domEle) {
// domEle == this
$(domEle).css("backgroundColor", "yellow");
if ($(this).is("#stop")) {
$("span").text("Stopped at div index #" + index);
return false; //使用 'return'來提前跳出each()循環
}
});
文檔片段：
<button>改變背景色</button>
<span></span>
<div></div>
<div></div>
<div id="stop">在這裡停止</div>
3、size()和length
jQuery 對象中元素的個數。
這個函數的傳回值與 jQuery 對象的length屬性一緻。
傳回值 Number
參數 沒有參數
var len = $("img").size(); //計算文檔中所有圖檔數量
alert(len);
alert($("img").length == len); //與jQuery對象的length屬性一緻
4、selector
jQuery 1.3新增。傳回傳給jQuery()的原始選擇器。
換句話說，就是傳回你用什麼選擇器來找到這個元素的。可以與context一起使用，用于精确檢測選擇器查詢情況。這兩個屬性對插件開發人員很有用。
傳回值 String
//确定查詢的選擇器
$("ul")
.append("<li>" + $("ul").selector + "</li>")
.append("<li>" + $("ul li").selector + "</li>")
.append("<li>" + $("div#foo ul:not([class])").selector + "</li>");
5、context
jQuery 1.3新增。傳回傳給jQuery()的原始的DOM節點内容，即jQuery()的第二個參數。如果沒有指定，那麼context指向目前的文檔(document)。
可以與selector一起使用，用于精确檢測選擇器查詢情況。這兩個屬性對插件開發人員很有用。
傳回值 HTMLElement
示例
//檢測使用的文檔内容
.append("<li>" + $("ul").context + "</li>")
.append("<li>" + $("ul").context.nodeName + "</li>")
.append("<li>" + $("ul", document.body).context.nodeName + "</li>");
6、get()
取得所有比對的 DOM 元素集合。
這是取得所有比對元素的一種向後相容的方式（不同于jQuery對象，而實際上是元素數組）。如果你想要直接操作 DOM 對象而不是 jQuery 對象，這個函數非常有用。
傳回值 Array<Element>
$("img").get().reverse(); //選擇文檔中所有圖像作為元素數組，并用數組内建的reverse方法将數組反轉
文檔片段：
<form id="form1" runat="server" >
<img src="images/test1.jpg"/><br /> <img src="images/test2.jpg"/>
7、get(index)
取得其中一個比對的元素。 index表示取得第幾個比對的元素。
這能夠讓你選擇一個實際的DOM 元素并且對他直接操作，而不是通過 jQuery 函數。$(this).get(0)與$(this)[0]等價。
傳回值 Element
參數
index (Number) :取得第 index 個位置上的元素
var imgSrc = $("img").get(0).src; //取圖檔對應路徑
alert(imgSrc);
8、index(subject)
搜尋與參數表示的對象比對的元素，并傳回相應元素的索引值。
如果找到了比對的元素，從1開始傳回；如果沒有找到比對的元素，傳回-1。
subject (Element) : 要搜尋的對象
//傳回對應ID值的元素的索引值
alert($("div").index($('#f'))); // -1
alert($("div").index($('#foobar'))); // 1
alert($("div").index($('#fo'))); // 2
alert($("div").index($('#foo'))); // 3
<div id="foobar">
<div id="fo"></div>
<div id="foo"></div>
</div>
三、資料緩存
1、data(name)
傳回元素上儲存的相應名字的資料，可以用data(name, value)來設定。
如果jQuery集合指向多個元素，那将隻傳回第一個元素的對應資料。
這個函數可以用于在一個元素上存取資料而避免了循環引用的風險。jQuery.data是1.2.3版的新功能。可以在很多地方使用這個函數，另外jQuery UI裡經常使用這個函數。
傳回值 Any
name (String) :存儲的資料名
//在一個div上存取資料
$("div").data("blah"); // undefined
alert($("div").data("blah"));
$("div").data("blah", "hello world"); // blah設定為hello world
$("div").data("blah"); // hello
$("div").data("blah", 123); // 設定為123
$("div").data("blah"); // 123
$("div").removeData("blah"); //移除blah
$("div").data("blah"); // undefined
//在一個div上存取名/值對資料
$("div").data("test", { first: 456, last: "jeff wong!" });
alert($("div").data("test").first); //456;
alert($("div").data("test").last); //jeff wong
2、removeData(name)
在元素上移除存放的資料
與$(...).data(name, value)函數作用相反
alert($("div").data("test").last); //jeff wong
$("div").removeData("test"); //移除test
alert($("div").data("test")); //undefined;
3、queue([name])
傳回指向第一個比對元素的隊列(将是一個函數數組)
傳回值 Array<Function>
name (String) :隊列名，預設為fx
//通過設定隊列數組來删除動畫隊列
$("#btnShow").click(function() {
var n = $("div").queue("fx");
$("span").text("Queue length is: " + n.length);
function runIt() {
$("div").show("slow");
$("div").animate({ left: '+=200' }, 2000);
$("div").slideToggle(1000);
$("div").slideToggle("fast");
$("div").animate({ left: '-=200' }, 1500);
$("div").hide("slow");
$("div").show(1200);
$("div").slideUp("normal", runIt);
}
runIt();
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
div
{
margin: 3px;
width: 40px;
height: 40px;
position: absolute;
left: 0px;
top: 30px;
background: green;
display: none;
div.newcolor
background: blue;
span
color: red;
</style>
<script src="js/jquery-1.3.1.js" type="text/javascript"></script>
</head>
<body>
<button id="btnShow" type="button">
Show Length of Queue</button>
<span style="color:Red"></span>
<script src="js/jQTest.js" type="text/javascript"></script>
</body>
</html>
4、queue([name],callback)
在比對的元素的隊列最後添加一個函數
name (String) :隊列名，預設為fx
callback (Function) : 要添加進隊列的函數
//插入一個自定義函數 如果函數執行後要繼續隊列，則執行 jQuery(this).dequeue();
jQuery(document).ready(function() {
$(document.body).click(function() {
$("div").show("slow");
$("div").animate({ left: '+=200' }, 2000);
$("div").queue(function() {
$(this).addClass("newcolor");
$(this).dequeue();
});
$("div").animate({ left: '-=200' }, 500);
$(this).removeClass("newcolor");
$("div").slideUp();
<html>
<head>
<style>
div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:30px;
background:green; display:none; }
div.newcolor { background:blue; }
</style>
Click here
<div></div>
5、queue([name],queue)
将比對元素的隊列用新的一個隊列來代替(函數數組).
queue (Array<Function>) : 用于替換的隊列。所有函數都有同一個參數，這個值與queue(callback)相同
//通過設定隊列數組來删除動畫隊列
$("#start").click(function() {
$("div").animate({ left: '+=200' }, 5000);
$("div").animate({ left: '-=200' }, 1500);
$("#stop").click(function() {
$("div").queue("fx", []); //通過設定隊列數組來删除動畫隊列
$("div").stop();
</style>
<button id="start">Start</button>
<button id="stop">Stop</button>
6、dequeue([name])
從隊列最前端移除一個隊列函數，并執行它。
$("div").animate({ left: '+=200px' }, 2000);
$("div").animate({ top: '0px' }, 600);
$("div").queue(function() {
$(this).toggleClass("red");
$(this).dequeue(); //用dequeue來結束自定義隊列函數，并讓隊列繼續進行下去。
$("div").animate({ left: '10px', top: '30px' }, 700);
div { margin:3px; width:50px; position:absolute;
height:50px; left:10px; top:30px;
background-color:yellow; }
div.red { background-color:red; }
<button>Start</button>
ps：上面的一些示例用到了一些jquery特效函數，因為本篇主要闡述核心函數，對于單個特效函數這裡不再詳細說明使用細節。
四、插件機制
1、jQuery.fn.extend(object)
擴充 jQuery 元素集來提供新的方法（通常用來制作插件）
object (Object) :用來擴充 jQuery 對象。
//增加兩個插件方法。
jQuery.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();
<input type="checkbox" />
<input type="radio" checked="checked"/>
2、jQuery.extend(object)
擴充jQuery對象本身，用來在jQuery命名空間上增加新函數
//在jQuery命名空間上增加兩個函數
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
alert(jQuery.min(2, 3)); // => 2
alert(jQuery.max(4, 5)); // => 5
五、多庫共存
1、jQuery.noConflict()
運作這個函數将變量$的控制權讓渡給第一個實作它的那個庫。這有助于確定jQuery不會與其他庫的$對象發生沖突。在運作這個函數後，就隻能使用jQuery變量通路jQuery對象。
例如，在要用到$("div p")的地方，就必須換成jQuery("div p")。
注意:這個函數必須在導入jQuery檔案之後，并且在導入另一個導緻沖突的庫之前使用。當然也應當在其他沖突的庫被使用之前，除非jQuery是最後一個導入的。
//1、将$引用的對象映射回原始的對象。
jQuery.noConflict();
// 使用 jQuery
jQuery("div p").hide();
// 使用其他庫的 $()
$("content").style.display = 'none';
//2、恢複使用别名$，然後建立并執行一個函數，在這個函數的作用域中仍然将$作為jQuery的别名來使用。
//在這個函數中，原來的$對象是無效的。這個函數對于大多數不依賴于其他庫的插件都十分有效。
(function($) {
$(function() {
// 使用 $ 作為 jQuery 别名的代碼
})(jQuery);
// 其他用 $ 作為别名的庫的代碼
//3、建立一個新的别名用以在接下來的庫中使用jQuery對象。
var j = jQuery.noConflict();
// 基于 jQuery 的代碼
j("div p").hide();
// 基于其他庫的 $() 代碼
$("content").style.display = 'none';
2、jQuery.noConflict(extreme)
将$和jQuery的控制權都交還給原來的庫(用之前請考慮清楚!)
這是相對于簡單的 noConflict 方法更極端的版本，因為這将完全重新定義jQuery。這通常用于一種極端的情況，比如你想要将jQuery嵌入一個高度沖突的環境。注意:調用此方法後極有可能導緻插件失效。
extreme (Boolean) : 傳入 true 來允許徹底将jQuery變量還原示例：
//完全将 jQuery 移到一個新的命名空間。
var dom = {};
dom.query = jQuery.noConflict(true);
// 新jQuery的代碼
dom.query("div p").hide();
// 另一個庫 $() 的代碼
// 另一個版本 jQuery 的代碼
jQuery("div > p").hide();
好了，核心部分就介紹到這裡。現在回頭來看，jQuery函數封裝的方式比直接調用js和dom的各種函數，真是友善直接多了。 振作精神，下一篇接着把jQuery的選擇器和屬性介紹一下。函數很多，現在記不住就記不住算了，多寫多用熟練了就好。以後用到的時候，可以直接當自己的線上參考書。希望對你也有幫助。
原文位址: