Jquery中文網 www.4271936.live
Jquery中文網 >  jQuery  >  jquery 教程  >  正文 JQuery DOM 常用操作匯總

JQuery DOM 常用操作匯總

發布時間:2016-09-18   編輯:www.4271936.live
jquery中文網為您提供JQuery DOM 常用操作匯總等資源,歡迎您收藏本站,我們將為您提供最新的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                奇數元素
:first              第一個
:gt(index)          大于索引的所有元素
:lt(index)          小于索引的所有元素
:header             H1、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]...   匹配多個屬性條件中的一個

三、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則這個元素被刪除,否則就會保留。)

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

map(callback)        將一組元素轉換成其他數組(不論是否是元素數組)

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

3、文檔處理

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) 克隆時把事件一起克隆

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])        通過高度變化(向上減?。﹣韯討B地隱藏所有匹配的元素,在隱藏完成后可選地觸發一個回調函數。

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)       AJAX 請求開始時執行函數
ajaxStop(callback)        AJAX 請求結束時執行函數
ajaxSuccess(callback)     AJAX 請求成功時執行函數
jQuery.ajaxSetup(options) 設定Ajax的全局默認值
serialize()               序列表單內容為字符串
serializeArray()          序列化表格元素 (類似 '.serialize()' 方法) 返回 JSON 數據結構數據

七、常用靜態方法

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 加菲

您可能感興趣的文章:
跟著JQuery API學Jquery 之四 css
jquery 獲取第一個元素的方法
jQuery數組處理方法匯總
JQuery困惑—包裝集 DOM節點
jQuery對象和DOM對象相互轉化
jQuery的運行機制和設計理念分析
jQuery使用技巧簡單匯總
jQuery實用技巧第1/2頁
jquery對dom的操作常用方法整理
jquery獲取iframe中的dom對象(兩種方法)

[關閉]
微信下载APP完成任务如何赚钱 上海股票配资公司 江苏快三玩法中奖规则 山西快乐十分开奖结果查询20190327 股票开户流程当到金多多策略用心 吉林快三是国家的吗 上海十一选五开奖结果今天 博彩网 湖北快3直播 江西11选5乐彩网走势图 为什么真钱做不出来