成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JQuery DOM 常用操作匯總

airborne007 / 464人閱讀

摘要:通過高度變化來切換所有匹配元素的可見性,并在切換完成后可選地觸發(fā)一個回調(diào)函數(shù)。請求完成后回調(diào)函數(shù)請求成功或失敗時均調(diào)用。

一、JQuery對象的基本方法:

(1) get(); 取得所有匹配的元素
(2) get(index); 取得其中一個匹配的元素 $(this).get(0) 等同于 $(this)[0]
(3) Number index(jqueryObj); 搜索子對象
(4) each(callback); 類似foreach,不過遍歷的是元素數(shù)組
如:

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

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

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

(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)層級:
選擇一[空格]選擇二 表示選一內(nèi)合符條件二的所有元素
選擇一[>]選擇二 表示選一內(nèi)合符條件二的第一個元素
選擇一[+]選擇二 表示緊接選一符條件二的元素 next
選擇一[~]選擇二 表示選一后符條件二的所有元素 siblings

(3)運算符

:animated           動畫元素
:eq(index)          索引位置,如:$("div:eq(1)"
:even               偶數(shù)元素
dd                奇數(shù)元素
:first              第一個
:gt(index)          大于索引的所有元素
:lt(index)          小于索引的所有元素
:header             H1、H2... 這些標題元素
:last               最后一個
:not(Selector)      排除
:contains(string)   選擇的對象內(nèi)容里包含
:empty              選擇的對象內(nèi)容為空
:has(Selector)      含有
:parent             與empty相反
:first-child
:last-child
:nth-child(index)   第幾個
nly-child         唯一的子元素

表單

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

表單狀態(tài)

:checked :disabled :enabled :selected

可見性

:hidden :visible

屬性及其運算符

[屬性名稱]        匹配包含給定屬性的元素
[att=value]       等同上面
[att*=value]      模糊匹配
[att!=value]      不能是這個值
[att$=value]      結(jié)尾是這個值
[att^=value]      開頭是這個值
[att1][att2][att3]...   匹配多個屬性條件中的一個
三、JQuery DOM 的常用操作

(是指通過選擇器篩選得到DOM后可進行的常用操作,即是JQuery對象實例的方法)

1、屬性操作(注:attr(name)、html()、val() 是只對第一個匹配元素操作的方法,其它都是對全部操作)

attr(name); 獲得匹配元素的第一個元素指定的屬性
attr(key, fn)、attr(key, value) 對所有匹配元素設定一個屬性值,前者的第二個參數(shù)是一個函數(shù),值即是這個函數(shù)的返回值
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、篩選
實際上篩選的方法很多都能通過選擇器的運算符實現(xiàn)的,因此這里只列出一些特殊的操作方法。

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

filter(fn)           篩選出與指定函數(shù)返回值匹配的元素集合(這個函數(shù)內(nèi)部將對每個對象計算一次
                   (類似 "$.each"). 如果調(diào)用的函數(shù)返回false則這個元素被刪除,否則就會保留。)

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

map(callback)        將一組元素轉(zhuǎn)換成其他數(shù)組(不論是否是元素數(shù)組)

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

3、文檔處理

append(content)      向每個元素內(nèi)容追加內(nèi)容,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為傳遞給這個事件函數(shù)的附加對象
如:

$("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) 以上面的區(qū)別是這個事件只響應一次
(4) trigger(type,[data]) 在每一個元素上觸發(fā)一次某事件
(5) triggerHandler(type,[data]) 只觸發(fā)事件函數(shù),但不觸發(fā)瀏覽器的相同事件
(6) unbind([type],[data]) 刪除綁定的事件
(7) hover(overFn, outFn) 響應鼠標經(jīng)過事件
(8) toggle(fn1,fn2...) 每次點擊鼠標后依次響應該不同的函數(shù)

2、固定事件
在不帶參數(shù)的情況下表示執(zhí)行某事件,帶參數(shù)則為設定某事件

下面的事件能觸發(fā),也能設定:

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

下面的事件只能設定,不能用JS觸發(fā):

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

hide()

hide(speed,[callback])    用動畫隱藏,callback 為動畫完成時執(zhí)行的函數(shù)

show()

show(speed,[callback])

toggle() 切換狀態(tài)

slideDown(speed,[callback])      通過高度變化(向下增大)來動態(tài)地顯示所有匹配的元素,在顯示完成后可選地觸發(fā)一個回調(diào)函數(shù)。
slideUp(speed,[callback])        通過高度變化(向上減?。﹣韯討B(tài)地隱藏所有匹配的元素,在隱藏完成后可選地觸發(fā)一個回調(diào)函數(shù)。

slideToggle(speed,[callback])    通過高度變化來切換所有匹配元素的可見性,并在切換完成后可選地觸發(fā)一個回調(diào)函數(shù)。

fadeIn(speed,[callback])         通過不透明度的變化來實現(xiàn)所有匹配元素的淡入效果,并在動畫完成后可選地觸發(fā)一個回調(diào)函數(shù)。
fadeOut(speed,[callback])        通過不透明度的變化來實現(xiàn)所有匹配元素的淡出效果,并在動畫完成后可選地觸發(fā)一個回調(diào)函數(shù)。
fadeTo(speed,opacity,[callback]) 把所有匹配元素的不透明度以漸進方式調(diào)整到指定的不透明度,并在動畫完成后可選地觸發(fā)一個回調(diào)函數(shù)。

animate(params,options) 用于創(chuàng)建自定義動畫的函數(shù)。

  

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

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

  

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

六、AJAX

1、jQuery.ajax(options) 通過 HTTP 請求加載遠程數(shù)據(jù)。

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

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

果要發(fā)送 DOM 樹信息或其它不希望轉(zhuǎn)換的信息,請設置為 false。
(15) scriptCharset (String) : 只有當請求時dataType為"jsonp"或"script",并且type是"GET"才會用于強制修改charset。通常在本地和遠程的內(nèi)容編碼不同時使用。
(16) success (Function) : 請求成功后回調(diào)函數(shù)。參數(shù):服務器返回數(shù)據(jù),數(shù)據(jù)格式。 Ajax 事件。
(17) timeout (Number) : 設置請求超時時間(毫秒),此設置將覆蓋全局設置。
(18) type (String) : (默認: "GET" 請求方式 ("POST" 或 "GET"), 默認為 "GET"。
(19) url (String) : (默認: 當前頁地址) 發(fā)送請求的地址。

參數(shù)用 : 分開,如:

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

2、封裝好的簡易方法(callback是成功時執(zhí)行的函數(shù),參數(shù)是返回的數(shù)據(jù))

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

3、事件(事件參數(shù)為event, XMLHttpRequest, ajaxOptions, thrownError)

ajaxError(callback)       AJAX 請求發(fā)生錯誤時執(zhí)行函數(shù)。
ajaxSend(callback)        AJAX 請求發(fā)送前執(zhí)行函數(shù)
ajaxComplete(callback)    AJAX 請求完成時執(zhí)行函數(shù)
ajaxStart(callback)       AJAX 請求開始時執(zhí)行函數(shù)
ajaxStop(callback)        AJAX 請求結(jié)束時執(zhí)行函數(shù)
ajaxSuccess(callback)     AJAX 請求成功時執(zhí)行函數(shù)
jQuery.ajaxSetup(options) 設定Ajax的全局默認值
serialize()               序列表單內(nèi)容為字符串
serializeArray()          序列化表格元素 (類似 ".serialize()" 方法) 返回 JSON 數(shù)據(jù)結(jié)構(gòu)數(shù)據(jù)
七、常用靜態(tài)方法
jQuery.boxModel             當前頁面中瀏覽器是否使用標準盒模型渲染頁面
jQuery.browser                瀏覽器內(nèi)核標識。依據(jù) navigator.userAgent 判斷。
                                          可用值: safari opera msie mozilla

jQuery.browser.version      瀏覽器渲染引擎版本號。
jQuery.each(obj,callback)   通用例遍方法,可用于例遍對象和數(shù)組。
jQuery.inArray(value,array) 確定第一個參數(shù)在數(shù)組中的位置(如果沒有找到則返回 -1 )。
jQuery.map(array,callback) 將類數(shù)組對象轉(zhuǎn)換為數(shù)組對象,返回值為數(shù)據(jù),callback可以對舊數(shù)組單個進行處理
jQuery.unique(array)        刪除數(shù)組中重復元素。

via 加菲

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/85471.html

相關文章

  • 前端常用插件、工具類庫匯總

    摘要:頁面調(diào)試騰訊開發(fā)維護的代碼調(diào)試發(fā)布,錯誤監(jiān)控上報,用戶問題定位。同樣是由騰訊開發(fā)維護的代碼調(diào)試工具,是針對移動端的調(diào)試工具。前端業(yè)務代碼工具庫。動畫庫動畫庫,也是目前通用的動畫庫。 本人微信公眾號:前端修煉之路,歡迎關注 本篇文章整理自己使用過的和看到過的一些插件和工具,方便日后自己查找和使用。 另外,感謝白小明,文中很多的工具來源于此。 彈出框 layer:http://layer....

    GitCafe 評論0 收藏0
  • 前端實習面試匯總

    摘要:題目來源前端實習生面試總結(jié)最近開始了幾次面試,雖然還不知道結(jié)果如何,但是還是要記錄下來進行一個總結(jié),同樣也希望對正在準備面實習生的童鞋們有所幫助最后一個參數(shù)是做什么用的答規(guī)定事件是冒泡還是捕獲。 最近一直在多看基礎的書多碼代碼準備找實習,在網(wǎng)上也搜羅了不少面經(jīng),現(xiàn)在把搜羅到的實習生面試題自己整理一下。 題目來源:前端實習生面試總結(jié)最近開始了幾次面試,雖然還不知道結(jié)果如何,但是還是要記錄...

    張利勇 評論0 收藏0
  • 前端實習面試匯總

    摘要:題目來源前端實習生面試總結(jié)最近開始了幾次面試,雖然還不知道結(jié)果如何,但是還是要記錄下來進行一個總結(jié),同樣也希望對正在準備面實習生的童鞋們有所幫助最后一個參數(shù)是做什么用的答規(guī)定事件是冒泡還是捕獲。 最近一直在多看基礎的書多碼代碼準備找實習,在網(wǎng)上也搜羅了不少面經(jīng),現(xiàn)在把搜羅到的實習生面試題自己整理一下。 題目來源:前端實習生面試總結(jié)最近開始了幾次面試,雖然還不知道結(jié)果如何,但是還是要記錄...

    wangzy2019 評論0 收藏0
  • 前端實習面試匯總

    摘要:題目來源前端實習生面試總結(jié)最近開始了幾次面試,雖然還不知道結(jié)果如何,但是還是要記錄下來進行一個總結(jié),同樣也希望對正在準備面實習生的童鞋們有所幫助最后一個參數(shù)是做什么用的答規(guī)定事件是冒泡還是捕獲。 最近一直在多看基礎的書多碼代碼準備找實習,在網(wǎng)上也搜羅了不少面經(jīng),現(xiàn)在把搜羅到的實習生面試題自己整理一下。 題目來源:前端實習生面試總結(jié)最近開始了幾次面試,雖然還不知道結(jié)果如何,但是還是要記錄...

    NicolasHe 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<