總結JQuery DOM 的常用方法

一、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 取代$

#二、、JQuery選擇器

(1)基本：
* 符合所有DOM元素
.classname 符合指定classname的DOM元素
element(DOM標籤名稱) 符合指定名稱的所有DOM元素

id ​​符合指定ID的DOM元素

, 用,分開表示符合多個選擇條件中的一個

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

(3)運算子

:animated           動畫元素
:eq(index)          索引位置，如：$("div:eq(1)"
:even               偶數元素##dd    第一個
:gt(index )          大於所有索引的元素
:lt(index)          小於所有索引索引的元素
:header             H1、H2...On)             H1、H2...not .   排除
:contains(string)   所選的物件內容包含
:empty              選擇的物件內容為空白
:has(Selector)        #:parent ):  #-#  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]      ]      開頭是這個值

[att1][att2][att3]...   符合多個屬性條件中的一個

三、JQuery DOM 的常用運算

# (是指透過選擇器篩選得到DOM後可進行的常用操作，即是JQuery物件實例的方法)

1、屬性操作(註：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"]);

#2、篩選###實際上篩選的方法很多都能透過選擇器的運算子實現的，因此這裡只列出一些特殊的操作方法。 ###

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

filter(fn)           篩選出與指定函數傳回值相符的元素集合（這個函數內部將對每個物件計算一次
                  (類似'$.each'). 如果呼叫的函數傳回false則這個元素被刪除，否則就會保留。 [end])     選取一個符合的子集

map(callback)        將一組元素轉換為其他陣列（無論是否為元素陣列）

andSelf()   目前元素集中
end()                       恢復前一個選擇破壞後的狀態


3、文件處理

append(content) 1 

3、文件處理

append(content) 1 ：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) 複製時把事件一起複製

4、CSS處理

css(name)存取第一個符合元素的樣式屬性
css(name,value)   在所有符合的元素中，設定一個樣式屬性的值
css(properties)   用鍵值對其給值

offset()          獲得選取元素的位移，並傳回值為物件Object{top,left}

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

四、JQuery物件的

事件處理

1、全域運算

(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…) 每次點擊滑鼠後依序回應該不同的函數

2、固定事件

在不帶參數的情況下表示執行某事件，帶參數則為設定某事件

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

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)

五、效果

#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()

六、AJAX

1、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);
}
});

2、封装好的简易方法(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中

3、事件(事件参数为event, XMLHttpRequest, ajaxOptions, thrownError)

ajaxError(callback)       AJAX 請求發生錯誤時執行函數。
ajaxSend(callback)        AJAX 請求發送前執行函數
ajaxComplete(callback)    AJAX 請求完成時執行函數
ajaxStart(callback)  執行函數
ajaxSuccess(callback)     AJAX 請求成功時執行函數
jQuery.ajaxSetup(options) 設定Ajax的全域預設值
serialize()              序列表字串表為化表格元素(類似'.serialize()' 方法) 返回JSON 資料結構資料


七、常用靜態方法

jQuery.boxModel             在目前頁面中瀏覽器是否使用標準盒模型渲染頁

jQuery.browser                瀏覽器核心識別碼。依據 navigator.userAgent 判斷。

                                           .
jQuery.each(obj,callback)   通用例遍方法，可用來例遍物件和陣列。
jQuery.inArray(value,array) 確定第一個參數在陣列中的位置(如果沒有找到則回傳 -1 )。
jQuery.map(array,callback) 將類別陣列物件轉換為陣列對象，傳回值為數據，callback可以對舊陣列單一進行處理
jQuery.unique(array)        刪除陣列中重複元素。

以上是總結JQuery DOM 的常用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！