JQ主要函數

     DOM= Document Object Model，文檔對象模型，DOM可以以一種獨立於平臺和語言的方式訪問和修改一個文檔的內容和結構。換句話說，這是表示和處理一個HTML或XML文檔的常用方法。有一點  DOM很重要，DOM的設計是以對象管理組織的規約爲基礎的，因此可以用於任何編程語言。最初人們把它認爲是一種讓JavaScript在瀏覽器間可移植的方法，不過DOM的應用已經遠遠超出這個範圍。Dom技術使得用戶頁面可以動態地變化，如可以動態地顯示或隱藏一個元素，改變它們的屬性，增加一個元素等，Dom技術使得頁面的交互性大大地增強。

　　DOM實際上是以面向對象方式描述的文檔模型。DOM定義了表示和修改文檔所需的對象、這些對象的行爲和屬性以及這些對象之間的關係。可以把DOM認爲是頁面上數據和結構的一個樹形表示，不過頁面當然可能並不是以這種樹的方式具體實現。
　　通過 JavaScript，您可以重構整個 HTML 文檔。您可以添加、移除、改變或重排頁面上的項目。
　　要改變頁面的某個東西，JavaScript 就需要獲得對 HTML 文檔中所有元素進行訪問的入口。這個入口，連同對 HTML 元素進行添加、移動、改變或移除的方法和屬性，都是通過文檔對象模型來獲得的（DOM）。

1. jQuery(expression,[context])
     這個函數接收一個包含 CSS 選擇器的字符串，然後用這個字符串去匹配一組元素。jQuery的核心功能都是通過這個函數實現的。 jQuery中的一切都基於這個函數，或者說都是在以某種方式使用這個函數。這個函數最基本的用法就是向它傳遞一個表達式（通常由 CSS 選擇器組成），然後根據這個表達式來查找所有匹配的元素。
默認情況下, 如果沒有指定context參數，$()將在當前的 HTML 文檔中查找 DOM 元素；如果指定了 context 參數，如一個 DOM 元素集或 jQuery 對象，那就會在這個 context 中查找。

參數：
expression (String) : 用來查找的字符串
context (Element, jQuery) : (可選) 作爲待查找的 DOM 元素集、文檔或jQuery對象。

示例
找到所有p元素，並且這些元素都必須是 div 元素的子元素。
HTML代碼:
<p>one</p> <div><p>two</p></div> <p>three</p>
jQuery代碼:
$("div > p");
結果:
[ <p>two</p> ]

在文檔的第一個表單中，查找所有的單選按鈕(即: type 值爲 radio 的 input 元素)。
jQuery代碼:
$("input:radio", document.forms[0]);
在一個由AJAX返回的 XML 文檔中，查找所有的div元素。
jQuery代碼:
$("div", xml.responseXML);


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 元素（以及其中的所有內容），並將它追加到 body 元素中。在這個函數的內部，是通過臨時創建一個元素，並將這個元素的 innerHTML 屬性設置爲給定的標記字符串，來實現標記到 DOM 元素轉換的。所以，這個函數既有靈活性，也有侷限性。
jQuery代碼:
$("<div><p>Hello</p></div>").appendTo("body");

創建一個 <input> 元素必須同時設定 type 屬性。因爲微軟規定 <input> 元素的 type 只能寫一次。
jQuery代碼:
// 在 IE 中無效:
$("<input>").attr("type", "checkbox");
// 在 IE 中有效:
$("<input type='checkbox'>");

3. jQuery(elements)
將一個或多個DOM元素轉化爲jQuery對象。這個函數也可以接收XML文檔和Window對象（雖然它們不是DOM元素）作爲有效的參數。

參數
elements (Element, Array<Element>) : 用於封裝成jQuery對象的DOM元素

示例：
設置頁面背景色。
jQuery代碼:
$(document.body).css( "background", "black" );

隱藏一個表單中所有元素。
jQuery代碼:
$(myForm.elements).hide()

4.jQuery(callback)
$(document).ready()的簡寫。允許你綁定一個在DOM文檔載入完成後執行的函數。這個函數的作用如同$(document).ready()一樣，只不過用這個函數時，需要把頁面中所有需要在 DOM 加載完成時執行的$()操作符都包裝到其中來。從技術上來說，這個函數是可鏈接的－－但真正以這種方式鏈接的情況並不多。
你可以在一個頁面中使用任意多個$(document).ready事件。

參數：
callback (Function) : 當DOM加載完成後要執行的函數

示例：
當DOM加載完成後，執行其中的函數。
jQuery 代碼:
$(function(){
// 文檔就緒
});

使用$(document).ready() 的簡寫，同時內部的jQuery代碼依然使用 $ 作爲別名，而不管全局的 $ 爲何。
jQuery 代碼:
jQuery(function($) {
// 你可以在這裏繼續使用$作爲別名...
});

5. bind(type,[data],fn)
代碼：
$("p").bind("click", function(){
  alert( $(this).text() );
});
作用：爲每一個匹配元素的特定事件（像click）綁定一個事件處理器函數。起到事件監聽的作用

6.toggle(fn,fn)
代碼：
$("td").toggle(
  function () {
    $(this).addClass("selected");
  },
  function () {
    $(this).removeClass("selected");
  }
);
作用：每次點擊時切換要調用的函數。如果點擊了一個匹配的元素，則觸發指定的第一個函數，當再次點擊同一元素時，則觸發指定的第二個函數。挺有趣的一個函數，在動態實現某些功能的時候可能會用到。
(像click(),focus(),keydown()這樣的事件這裏就不提了，那些都是開發中比較常用到的。)

7. addClass(class)和removeClass(class)
代碼：
$(".stripe tr").mouseover(function(){  
               $(this).addClass("over");}).mouseout(function(){ 
               $(this).removeClass("over");})
});
也可以寫成：
$(".stripe tr").mouseover(function() { $(this).addClass("over") });
$(".stripe tr").mouseout(function() { $(this).removeClass("over") });
 作用：爲指定的元素添加或移除樣式，從而實現動態的樣式效果，上面的實例中實現鼠標移動雙色表格的代碼

8.css(name,value)
代碼：
$("p").css("color","red");
作用：很簡單，就是在匹配的元素中，設置一個樣式屬性的值。這個個人感覺和上面的addClass(class)有點類似。

9.slide(),hide(),fadeIn(), fadeout(), slideUp() ,slideDown()
代碼：
$("#btnShow").bind("click",function(event){ $("#divMsg").show() });
$("#btnHide").bind("click",function(evnet){ $("#divMsg").hide() });
作用：jQuery中提供的比較常用的幾個動態效果的函數。還可以添加參數：show(speed,[callback])以優雅的動畫顯示所有匹配的元素，並在顯示完成後可選地觸發一個回調函數。

10.animate(params[,duration[,easing[,callback]]])
作用：製作動畫效果用到的函數，功能非常的強大，可以連續使用此函數

11.map(callback)
HTML 代碼:
<p><b>Values: </b></p>
<form>
  <input type="text" name="name" value="John"/>
  <input type="text" name="password" value="password"/>
  <input type="text" name="url" value="http://ejohn.org/%22/>
</form> 
jQuery 代碼:
$("p").append( $("input").map(function(){
  return $(this).val();
}).get().join(", ") ); 
結果:
[ <p>John, password, http://ejohn.org/%3C/p> ]
 作用：將一組元素轉換成其他數組（不論是否是元素數組）你可以用這個函數來建立一個列表，不論是值、屬性還是CSS樣式，或者其他特別形式。這都可以用'$.map()'來方便的建立

12.find(expr)
HTML 代碼:
<p><span>Hello</span>, how are you?</p> 
jQuery 代碼:
$("p").find("span") 
結果:
[ <span>Hello</span> ]
作用：搜索所有與指定表達式匹配的元素。這個函數是找出正在處理的元素的後代元素的好方法

13.attr(key,value)
HTML 代碼:
<img/><img/> 
jQuery 代碼:
$("img").attr("src","test.jpg");
作用：取得或設置匹配元素的屬性值。通過這個方法可以方便地從第一個匹配元素中獲取一個屬性的值。如果元素沒有相應屬性，則返回 undefined 。在控制HTML標記上是必備的工具。

14.html()/html(val)
HTML 代碼:
<div><p>Hello</p></div>
jQuery 代碼:
$("div").html();
結果:
<p>Hello</p>
作用：取得或設置匹配元素的html內容，同類型的方法還有text()和val()。前者是取得所有匹配元素的內容。，後者是獲得匹配元素的當前值。三者有相似的地方常用在內容的操作上

15.wrap(html)
HTML 代碼:
<p>Test Paragraph.</p> 
jQuery 代碼:
$("p").wrap("<div class='wrap'></div>"); 
結果:
<div class="wrap"><p>Test Paragraph.</p></div>
作用：把所有匹配的元素用其他元素的結構化標記包裹起來。
這種包裝對於在文檔中插入額外的結構化標記最有用，而且它不會破壞原始文檔的語義品質。 可以靈活的修改我們的DOM

16.empty()
HTML 代碼:
<p>Hello, <span>Person</span> <a href="#">and person</a></p> 
jQuery 代碼:
$("p").empty(); 
結果:
<p></p>
作用：刪除匹配的元素集合中所有的子節點。

17.Ajax處理
load(url,[data],[callback])
url (String) : 待裝入 HTML 網頁網址。
data (Map) : (可選) 發送至服務器的 key/value 數據。
callback (Callback) : (可選) 載入成功時回調函數。
代碼：
$("#feeds").load("feeds.aspx", {limit: 25}, function(){
   alert("The last 25 entries in the feed have been loaded");
 });
作用：載入遠程 HTML 文件代碼並插入至 DOM 中。這也是Jquery操作Ajax最常用最有效的方法

18.serialize()
HTML 代碼:
<p id="results"><b>Results: </b> </p>
<form>
  <select name="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
  <select name="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select><br/>
  <input type="checkbox" name="check" value="check1"/> check1
  <input type="checkbox" name="check" value="check2" 
checked="checked"/> check2
  <input type="radio" name="radio" value="radio1" 
checked="checked"/> radio1
  <input type="radio" name="radio" value="radio2"/> radio2
</form> 
jQuery 代碼:
$("#results").append( "<tt>" + $("form").serialize() + "</tt>" );
作用：序列化表格內容爲字符串。用於 Ajax 請求

19.jQuery.each(obj,callback)
代碼：
$.each( [0,1,2], function(i, n){
  alert( "Item #" + i + ": " + n );
});//遍歷數組
$.each( { name: "John", lang: "JS" }, function(i, n){
  alert( "Name: " + i + ", Value: " + n );//遍歷對象
});
作用：通用例遍方法，可用於例遍對象和數組。

20.jQuery.makeArray(obj)
HTML 代碼:
<div>First</div><div>Second</div><div>Third</div><div>Fourth</div> 
jQuery 代碼:
var arr = jQuery.makeArray(document.getElementsByTagName("div"));
結果:
Fourth
Third
Second
First 
作用：將類數組對象轉換爲數組對象。使我們可以在數組和對象之間靈活的轉換。

21.jQuery.trim(str)
作用：這個大家應該很熟悉，就是去掉字符串起始和結尾的空格。 

22.live定義和用法
live() 方法爲被選元素附加一個或多個事件處理程序，並規定當這些事件發生時運行的函數。
通過 live() 方法附加的事件處理程序適用於匹配選擇器的當前及未來的元素（比如由腳本創建的新元素）。
例如:
$("button").live("click",funciton(){
$("p").slideToggle(); 
}