JQuery DOM 經常使用操做彙總

1、JQuery對象的基本方法：

(1) get(); 取得全部匹配的元素
(2) get(index); 取得其中一個匹配的元素 $(this).get(0) 等同於 $(this)[0]
(3) Number index(jqueryObj); 搜索子對象
(4) each(callback); 相似foreach，不過遍歷的是元素數組
如：

$("img".each(function(index){
    this.src = "test" + index + ".jpg";
 });

使用 return false; return true; 表明 break、continue的功能

(5) length、size(); 都是返回元素總數值

(6) jQuery.noConflict(true); 重設 jquery 默認的符號
如：

var dom = {};
    dom.query = jQuery.noConflict(true);

這時將用 dom.query 代替 $

2、、JQuery選擇器

(1)基本：
* 匹配全部DOM元素
.classname 匹配帶有指定classname的DOM元素
element(DOM標籤名稱) 匹配指定名稱的全部DOM元素

id 匹配指定ID的DOM元素

, 用,分開表示匹配多個選擇條件中的一個

(2)層級：
選擇一[空格]選擇二 表示選一內合符條件二的全部元素
選擇一[>]選擇二 表示選一內合符條件二的第一個元素
選擇一[+]選擇二 表示緊接選一符條件二的元素 next
選擇一[~]選擇二 表示選一後符條件二的全部元素 siblings

(3)運算符

:animated           動畫元素
:eq(index)          索引位置，如：$("div:eq(1)"
:even               偶數元素
dd                奇數元素
:first              第一個
:gt(index)          大於索引的全部元素
:lt(index)          小於索引的全部元素
:header             H一、H2... 這些標題元素
:last               最後一個
:not(Selector)      排除
:contains(string)   選擇的對象內容裏包含
:empty              選擇的對象內容爲空
:has(Selector)      含有
:parent             與empty相反
:first-child
:last-child
:nth-child(index)   第幾個
nly-child         惟一的子元素

表單

:text :checkbox :radio :image :file :submit :reset :password :button

表單狀態

:checked :disabled :enabled :selected

可見性

:hidden :visible

屬性及其運算符

[屬性名稱]        匹配包含給定屬性的元素
[att=value]       等同上面
[att*=value]      模糊匹配
[att!=value]      不能是這個值
[att$=value]      結尾是這個值
[att^=value]      開頭是這個值
[att1][att2][att3]...   匹配多個屬性條件中的一個

3、JQuery DOM 的經常使用操做

(是指經過選擇器篩選獲得DOM後可進行的經常使用操做，便是JQuery對象實例的方法)

一、屬性操做(注：attr(name)、html()、val() 是隻對第一個匹配元素操做的方法，其它都是對所有操做)

attr(name); 得到匹配元素的第一個元素指定的屬性
attr(key, fn)、attr(key, value) 對全部匹配元素設定一個屬性值，前者的第二個參數是一個函數，值便是這個函數的返回值
attr(properties) 用鍵值對設定全部匹配元素設定一個或多個屬性值，如：$("img".attr({ src: "test.jpg", alt: "Test Image" });
removeAttr(name) 刪除匹配元素指定屬性值
addClass(classname) 增長類名，便是增長 class 屬性
removeClass(classname)
toggleClass(classname) 切換類名（存在則刪除，不存在則增長）

html()
html(setvalue)
text()
text(setvalue)
val()
val(val)      對於普通元素，使用方法應該是 對象.val(設置值); 對於 select、radio等則用值表示要選中這個值的對象，如：
              $("#multiple".val(["value1", "value3"]);
              $("input".val(["checkvalue1", "checkvalue2"]);

二、篩選
實際上篩選的方法不少都能經過選擇器的運算符實現的，所以這裏只列出一些特殊的操做方法。

eq(index)、filter(expr)、hasClass(class)、is(expr)、not(expr)、

filter(fn)           篩選出與指定函數返回值匹配的元素集合（這個函數內部將對每一個對象計算一次
                   (相似 '$.each'). 若是調用的函數返回false則這個元素被刪除，不然就會保留。）

slice(start,[end])     選取一個匹配的子集

map(callback)        將一組元素轉換成其餘數組（不管是否是元素數組）

andSelf()                 把所選的加入到當前元素集中
end()                       恢復前一個選擇破壞後的狀態

三、文檔處理

append(content)      向每一個元素內容追加內容，content指：String, Element, jQuery 其中之一，如下同。

appendTo(content)    以上面的相反，上面是向選中對象追加，這個是把選中對象向content選擇的對旬追加

prepend(content)、prependTo(content)、after(content)、before(content)

replaceWith(content) 把選中元素用content替換
replaceAll(selector) 把選擇的對象用當前對象替換

empty()
remove([expr])
clone()
clone(true) 克隆時把事件一塊兒克隆

四、CSS處理

css(name)         訪問第一個匹配元素的樣式屬性
css(name,value)   在全部匹配的元素中，設置一個樣式屬性的值
css(properties)   用鍵值對對其給值

offset()          得到選中元素的位移，返回值爲對象Object{top,left}

height()、height(val)、width()、width(val)

4、JQuery對象的事件處理

一、全局操做

(1) ready(fn)
DOM就緒時的事件，對於document事件能夠簡寫爲 $(function(){ ... });
(2) bind(type,[data],fn) 對所的匹配綁定一個事件data爲傳遞給這個事件函數的附加對象
如：

$("p".bind("click", function(){
  alert( $(this).text() );
});
function handler(event) {
  alert(event.data.foo);
}
$("p".bind("click", {foo: "bar"}, handler)

(3) one(type,[data],fn) 以上面的區別是這個事件只響應一次
(4) trigger(type,[data]) 在每個元素上觸發一次某事件
(5) triggerHandler(type,[data]) 只觸發事件函數，但不觸發瀏覽器的相同事件
(6) unbind([type],[data]) 刪除綁定的事件
(7) hover(overFn, outFn) 響應鼠標通過事件
(8) toggle(fn1,fn2...) 每次點擊鼠標後依次響應該不一樣的函數

二、固定事件
在不帶參數的狀況下表示執行某事件，帶參數則爲設定某事件

下面的事件能觸發，也能設定：

blur()、change()、click()、dblclick()、error()、focus()、keydown()、keypress()、keyup()、select()、submit()

下面的事件只能設定，不能用JS觸發：

load(fn)、mousedown(fn)、mousemove(fn)、mouseout(fn)、mouseover(fn)、mouseup(fn)、resize(fn)、scroll(fn)、unload(fn)

5、效果

hide()

hide(speed,[callback])    用動畫隱藏，callback 爲動畫完成時執行的函數

show()

show(speed,[callback])

toggle() 切換狀態

slideDown(speed,[callback])      經過高度變化（向下增大）來動態地顯示全部匹配的元素，在顯示完成後可選地觸發一個回調函數。
slideUp(speed,[callback])        經過高度變化（向上減少）來動態地隱藏全部匹配的元素，在隱藏完成後可選地觸發一個回調函數。

slideToggle(speed,[callback])    經過高度變化來切換全部匹配元素的可見性，並在切換完成後可選地觸發一個回調函數。

fadeIn(speed,[callback])         經過不透明度的變化來實現全部匹配元素的淡入效果，並在動畫完成後可選地觸發一個回調函數。
fadeOut(speed,[callback])        經過不透明度的變化來實現全部匹配元素的淡出效果，並在動畫完成後可選地觸發一個回調函數。
fadeTo(speed,opacity,[callback]) 把全部匹配元素的不透明度以漸進方式調整到指定的不透明度，並在動畫完成後可選地觸發一個回調函數。

animate(params,options) 用於建立自定義動畫的函數。

params (Options) : 一組包含做爲動畫屬性和終值的樣式屬性和及其值的集合
options (Options) : 一組包含動畫選項的值的集合。

animate(params[,duration[,easing[,callback]]])

duration、 easing 是預設的動畫動做
duration (String,Number) : (可選) 三種預約速度之一的字符串("slow", "normal", or > "fast"或表示動畫時長的毫秒數值(如：1000)
easing (String) : (可選) 要使用的擦除效果的名稱(須要插件支持).> 默認jQuery提供"linear" 和 "swing".
dequeue() 從動畫隊列中移除一個隊列函數
queue() 返回指向第一個匹配元素的隊列(將是一個函數數組)
queue(callback) 在匹配的元素的動畫隊列中添加一個函數
queue(queue) 將匹配元素的動畫隊列用新的一個隊列來代替(函數數組)
stop()

6、AJAX

一、jQuery.ajax(options) 經過 HTTP 請求加載遠程數據。

參數列表：
(1) async (Boolean) : (默認: true) 默認設置下，全部請求均爲異步請求。若是須要發送同步請求，請將此選項設置爲 false。
(2) beforeSend (Function) : 發送請求前可修改 XMLHttpRequest 對象的函數，如添加自定義 HTTP 頭。XMLHttpRequest 是Function的惟一參數
(3) cache (Boolean) : (默認: true,dataType爲script時默認爲false) jQuery 1.2 新功能，設置爲 false 將不會從瀏覽器緩存中加載請求信息。
(4) complete (Function) : 請求完成後回調函數 (請求成功或失敗時均調用)。
(5) contentType (String) : (默認: "application/x-www-form-urlencoded" 發送信息至服務器時內容編碼類型。
(6) data (Object,String) : 發送到服務器的數據。將自動轉換爲請求字符串格式。GET 請求中將附加在 URL 後。查看 processData 選項說明以禁止此自動轉換。必須爲

Key/Value 格式。若是爲數組，jQuery 將自動爲不一樣值對應同一個名稱。如 {foo:["bar1", "bar2"]} 轉換爲 '&foo=bar1&foo=bar2'。
(7) dataFilter (Function) :給Ajax返回的原始數據的進行預處理的函數。
(8) dataType (String) : 預期服務器返回的數據類型，"xml"、"html"、"script"、"json"、"jsonp"、"text"。
(9) error (Function) : (默認: 自動判斷 (xml 或 html)) 請求失敗時調用時間。
(10) global (Boolean) : (默認: true) 是否觸發全局 AJAX 事件。設置爲 false 將不會觸發全局 AJAX 事件
(11) ifModified (Boolean) : (默認: false) 僅在服務器數據改變時獲取新數據。使用 HTTP 包 Last-Modified 頭信息判斷。
(12) jsonp (String) : 在一個jsonp請求中重寫回調函數的名字。
(13) password (String) : 用於響應HTTP訪問認證請求的密碼
(20) username (String) : 用於響應HTTP訪問認證請求的用戶名
(14) processData (Boolean) : (默認: true) 默認狀況下，發送的數據將被轉換爲對象(技術上講並不是字符串) 以配合默認內容類型 "application/x-www-form-urlencoded"。如

果要發送 DOM 樹信息或其它不但願轉換的信息，請設置爲 false。
(15) scriptCharset (String) : 只有當請求時dataType爲"jsonp"或"script"，而且type是"GET"纔會用於強制修改charset。一般在本地和遠程的內容編碼不一樣時使用。
(16) success (Function) : 請求成功後回調函數。參數：服務器返回數據，數據格式。 Ajax 事件。
(17) timeout (Number) : 設置請求超時時間（毫秒），此設置將覆蓋全局設置。
(18) type (String) : (默認: "GET" 請求方式 ("POST" 或 "GET")， 默認爲 "GET"。
(19) url (String) : (默認: 當前頁地址) 發送請求的地址。

參數用 : 分開，如：

$.ajax({
url: "test.html",
cache: false,
success: function(html){
    $("#results").append(html);
}
});

二、封裝好的簡易方法(callback是成功時執行的函數，參數是返回的數據)

jQuery.get(url,[data],[callback])
jQuery.getJSON(url,[data],[callback])
jQuery.getScript(url,[callback])       載入遠程JS並執行
jQuery.post(url,[data],[callback])
load(url,[data],[callback])            把遠程的HTML載入當前選中的DOM中

三、事件(事件參數爲event, XMLHttpRequest, ajaxOptions, thrownError)

ajaxError(callback)       AJAX 請求發生錯誤時執行函數。
ajaxSend(callback)        AJAX 請求發送前執行函數
ajaxComplete(callback)    AJAX 請求完成時執行函數
ajaxStart(callback)       AJAX 請求開始時執行函數
ajaxStop(callback)        AJAX 請求結束時執行函數
ajaxSuccess(callback)     AJAX 請求成功時執行函數
jQuery.ajaxSetup(options) 設定Ajax的全局默認值
serialize()               序列表單內容爲字符串
serializeArray()          序列化表格元素 (相似 '.serialize()' 方法) 返回 JSON 數據結構數據

7、經常使用靜態方法

jQuery.boxModel             當前頁面中瀏覽器是否使用標準盒模型渲染頁面
jQuery.browser                瀏覽器內核標識。依據 navigator.userAgent 判斷。
                                          可用值: safari opera msie mozilla

jQuery.browser.version      瀏覽器渲染引擎版本號。
jQuery.each(obj,callback)   通用例遍方法，可用於例遍對象和數組。
jQuery.inArray(value,array) 肯定第一個參數在數組中的位置(若是沒有找到則返回 -1 )。
jQuery.map(array,callback) 將類數組對象轉換爲數組對象，返回值爲數據，callback能夠對舊數組單個進行處理
jQuery.unique(array)        刪除數組中重複元素。

via 加菲