摘要:通過高度變化來切換所有匹配元素的可見性,并在切換完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。請求完成后回調(diào)函數(shù)請求成功或失敗時(shí)均調(diào)用。
一、JQuery對象的基本方法:
(1) get(); 取得所有匹配的元素
(2) get(index); 取得其中一個(gè)匹配的元素 $(this).get(0) 等同于 $(this)[0]
(3) Number index(jqueryObj); 搜索子對象
(4) each(callback); 類似foreach,不過遍歷的是元素?cái)?shù)組
如:
$("img".each(function(index){ this.src = "test" + index + ".jpg"; });
使用 return false; return true; 代表 break、continue的功能
(5) length、size(); 都是返回元素總數(shù)值
(6) jQuery.noConflict(true); 重設(shè) jquery 默認(rèn)的符號
如:
var dom = {}; dom.query = jQuery.noConflict(true);
這時(shí)將用 dom.query 代替 $
二、、JQuery選擇器(1)基本:
* 匹配所有DOM元素
.classname 匹配帶有指定classname的DOM元素
element(DOM標(biāo)簽名稱) 匹配指定名稱的所有DOM元素
, 用,分開表示匹配多個(gè)選擇條件中的一個(gè)
(2)層級:
選擇一[空格]選擇二 表示選一內(nèi)合符條件二的所有元素
選擇一[>]選擇二 表示選一內(nèi)合符條件二的第一個(gè)元素
選擇一[+]選擇二 表示緊接選一符條件二的元素 next
選擇一[~]選擇二 表示選一后符條件二的所有元素 siblings
(3)運(yùn)算符
:animated 動(dòng)畫元素 :eq(index) 索引位置,如:$("div:eq(1)" :even 偶數(shù)元素 dd 奇數(shù)元素 :first 第一個(gè) :gt(index) 大于索引的所有元素 :lt(index) 小于索引的所有元素 :header H1、H2... 這些標(biāo)題元素 :last 最后一個(gè) :not(Selector) 排除 :contains(string) 選擇的對象內(nèi)容里包含 :empty 選擇的對象內(nèi)容為空 :has(Selector) 含有 :parent 與empty相反 :first-child :last-child :nth-child(index) 第幾個(gè) nly-child 唯一的子元素
表單
:text :checkbox :radio :image :file :submit :reset :password :button
表單狀態(tài)
:checked :disabled :enabled :selected
可見性
:hidden :visible
屬性及其運(yùn)算符
[屬性名稱] 匹配包含給定屬性的元素 [att=value] 等同上面 [att*=value] 模糊匹配 [att!=value] 不能是這個(gè)值 [att$=value] 結(jié)尾是這個(gè)值 [att^=value] 開頭是這個(gè)值 [att1][att2][att3]... 匹配多個(gè)屬性條件中的一個(gè)三、JQuery DOM 的常用操作
(是指通過選擇器篩選得到DOM后可進(jìn)行的常用操作,即是JQuery對象實(shí)例的方法)
1、屬性操作(注:attr(name)、html()、val() 是只對第一個(gè)匹配元素操作的方法,其它都是對全部操作)
attr(name); 獲得匹配元素的第一個(gè)元素指定的屬性 attr(key, fn)、attr(key, value) 對所有匹配元素設(shè)定一個(gè)屬性值,前者的第二個(gè)參數(shù)是一個(gè)函數(shù),值即是這個(gè)函數(shù)的返回值 attr(properties) 用鍵值對設(shè)定所有匹配元素設(shè)定一個(gè)或多個(gè)屬性值,如:$("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) 對于普通元素,使用方法應(yīng)該是 對象.val(設(shè)置值); 對于 select、radio等則用值表示要選中這個(gè)值的對象,如: $("#multiple".val(["value1", "value3"]); $("input".val(["checkvalue1", "checkvalue2"]);
2、篩選
實(shí)際上篩選的方法很多都能通過選擇器的運(yùn)算符實(shí)現(xiàn)的,因此這里只列出一些特殊的操作方法。
eq(index)、filter(expr)、hasClass(class)、is(expr)、not(expr)、 filter(fn) 篩選出與指定函數(shù)返回值匹配的元素集合(這個(gè)函數(shù)內(nèi)部將對每個(gè)對象計(jì)算一次 (類似 "$.each"). 如果調(diào)用的函數(shù)返回false則這個(gè)元素被刪除,否則就會(huì)保留。) slice(start,[end]) 選取一個(gè)匹配的子集 map(callback) 將一組元素轉(zhuǎn)換成其他數(shù)組(不論是否是元素?cái)?shù)組) andSelf() 把所選的加入到當(dāng)前元素集中 end() 恢復(fù)前一個(gè)選擇破壞后的狀態(tài)
3、文檔處理
append(content) 向每個(gè)元素內(nèi)容追加內(nèi)容,content指:String, Element, jQuery 其中之一,以下同。 appendTo(content) 以上面的相反,上面是向選中對象追加,這個(gè)是把選中對象向content選擇的對旬追加 prepend(content)、prependTo(content)、after(content)、before(content) replaceWith(content) 把選中元素用content替換 replaceAll(selector) 把選擇的對象用當(dāng)前對象替換 empty() remove([expr]) clone() clone(true) 克隆時(shí)把事件一起克隆
4、CSS處理
css(name) 訪問第一個(gè)匹配元素的樣式屬性 css(name,value) 在所有匹配的元素中,設(shè)置一個(gè)樣式屬性的值 css(properties) 用鍵值對對其給值 offset() 獲得選中元素的位移,返回值為對象Object{top,left} height()、height(val)、width()、width(val)四、JQuery對象的事件處理
1、全局操作
(1) ready(fn)
DOM就緒時(shí)的事件,對于document事件可以簡寫為 $(function(){ ... });
(2) bind(type,[data],fn) 對所的匹配綁定一個(gè)事件data為傳遞給這個(gè)事件函數(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ū)別是這個(gè)事件只響應(yīng)一次
(4) trigger(type,[data]) 在每一個(gè)元素上觸發(fā)一次某事件
(5) triggerHandler(type,[data]) 只觸發(fā)事件函數(shù),但不觸發(fā)瀏覽器的相同事件
(6) unbind([type],[data]) 刪除綁定的事件
(7) hover(overFn, outFn) 響應(yīng)鼠標(biāo)經(jīng)過事件
(8) toggle(fn1,fn2...) 每次點(diǎn)擊鼠標(biāo)后依次響應(yīng)該不同的函數(shù)
2、固定事件
在不帶參數(shù)的情況下表示執(zhí)行某事件,帶參數(shù)則為設(shè)定某事件
下面的事件能觸發(fā),也能設(shè)定:
blur()、change()、click()、dblclick()、error()、focus()、keydown()、keypress()、keyup()、select()、submit()
下面的事件只能設(shè)定,不能用JS觸發(fā):
load(fn)、mousedown(fn)、mousemove(fn)、mouseout(fn)、mouseover(fn)、mouseup(fn)、resize(fn)、scroll(fn)、unload(fn)五、效果
hide()
hide(speed,[callback]) 用動(dòng)畫隱藏,callback 為動(dòng)畫完成時(shí)執(zhí)行的函數(shù)
show()
show(speed,[callback])
toggle() 切換狀態(tài)
slideDown(speed,[callback]) 通過高度變化(向下增大)來動(dòng)態(tài)地顯示所有匹配的元素,在顯示完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。 slideUp(speed,[callback]) 通過高度變化(向上減小)來動(dòng)態(tài)地隱藏所有匹配的元素,在隱藏完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。 slideToggle(speed,[callback]) 通過高度變化來切換所有匹配元素的可見性,并在切換完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。 fadeIn(speed,[callback]) 通過不透明度的變化來實(shí)現(xiàn)所有匹配元素的淡入效果,并在動(dòng)畫完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。 fadeOut(speed,[callback]) 通過不透明度的變化來實(shí)現(xiàn)所有匹配元素的淡出效果,并在動(dòng)畫完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。 fadeTo(speed,opacity,[callback]) 把所有匹配元素的不透明度以漸進(jìn)方式調(diào)整到指定的不透明度,并在動(dòng)畫完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。
animate(params,options) 用于創(chuàng)建自定義動(dòng)畫的函數(shù)。
params (Options) : 一組包含作為動(dòng)畫屬性和終值的樣式屬性和及其值的集合
options (Options) : 一組包含動(dòng)畫選項(xiàng)的值的集合。
animate(params[,duration[,easing[,callback]]])
六、AJAXduration、 easing 是預(yù)設(shè)的動(dòng)畫動(dòng)作
duration (String,Number) : (可選) 三種預(yù)定速度之一的字符串("slow", "normal", or > "fast"或表示動(dòng)畫時(shí)長的毫秒數(shù)值(如:1000)
easing (String) : (可選) 要使用的擦除效果的名稱(需要插件支持).> 默認(rèn)jQuery提供"linear" 和 "swing".
dequeue() 從動(dòng)畫隊(duì)列中移除一個(gè)隊(duì)列函數(shù)
queue() 返回指向第一個(gè)匹配元素的隊(duì)列(將是一個(gè)函數(shù)數(shù)組)
queue(callback) 在匹配的元素的動(dòng)畫隊(duì)列中添加一個(gè)函數(shù)
queue(queue) 將匹配元素的動(dòng)畫隊(duì)列用新的一個(gè)隊(duì)列來代替(函數(shù)數(shù)組)
stop()
1、jQuery.ajax(options) 通過 HTTP 請求加載遠(yuǎn)程數(shù)據(jù)。
參數(shù)列表:
(1) async (Boolean) : (默認(rèn): true) 默認(rèn)設(shè)置下,所有請求均為異步請求。如果需要發(fā)送同步請求,請將此選項(xiàng)設(shè)置為 false。
(2) beforeSend (Function) : 發(fā)送請求前可修改 XMLHttpRequest 對象的函數(shù),如添加自定義 HTTP 頭。XMLHttpRequest 是Function的唯一參數(shù)
(3) cache (Boolean) : (默認(rèn): true,dataType為script時(shí)默認(rèn)為false) jQuery 1.2 新功能,設(shè)置為 false 將不會(huì)從瀏覽器緩存中加載請求信息。
(4) complete (Function) : 請求完成后回調(diào)函數(shù) (請求成功或失敗時(shí)均調(diào)用)。
(5) contentType (String) : (默認(rèn): "application/x-www-form-urlencoded" 發(fā)送信息至服務(wù)器時(shí)內(nèi)容編碼類型。
(6) data (Object,String) : 發(fā)送到服務(wù)器的數(shù)據(jù)。將自動(dòng)轉(zhuǎn)換為請求字符串格式。GET 請求中將附加在 URL 后。查看 processData 選項(xiàng)說明以禁止此自動(dòng)轉(zhuǎn)換。必須為
Key/Value 格式。如果為數(shù)組,jQuery 將自動(dòng)為不同值對應(yīng)同一個(gè)名稱。如 {foo:["bar1", "bar2"]} 轉(zhuǎn)換為 "&foo=bar1&foo=bar2"。
(7) dataFilter (Function) :給Ajax返回的原始數(shù)據(jù)的進(jìn)行預(yù)處理的函數(shù)。
(8) dataType (String) : 預(yù)期服務(wù)器返回的數(shù)據(jù)類型,"xml"、"html"、"script"、"json"、"jsonp"、"text"。
(9) error (Function) : (默認(rèn): 自動(dòng)判斷 (xml 或 html)) 請求失敗時(shí)調(diào)用時(shí)間。
(10) global (Boolean) : (默認(rèn): true) 是否觸發(fā)全局 AJAX 事件。設(shè)置為 false 將不會(huì)觸發(fā)全局 AJAX 事件
(11) ifModified (Boolean) : (默認(rèn): false) 僅在服務(wù)器數(shù)據(jù)改變時(shí)獲取新數(shù)據(jù)。使用 HTTP 包 Last-Modified 頭信息判斷。
(12) jsonp (String) : 在一個(gè)jsonp請求中重寫回調(diào)函數(shù)的名字。
(13) password (String) : 用于響應(yīng)HTTP訪問認(rèn)證請求的密碼
(20) username (String) : 用于響應(yīng)HTTP訪問認(rèn)證請求的用戶名
(14) processData (Boolean) : (默認(rèn): true) 默認(rèn)情況下,發(fā)送的數(shù)據(jù)將被轉(zhuǎn)換為對象(技術(shù)上講并非字符串) 以配合默認(rèn)內(nèi)容類型 "application/x-www-form-urlencoded"。如
果要發(fā)送 DOM 樹信息或其它不希望轉(zhuǎn)換的信息,請?jiān)O(shè)置為 false。
(15) scriptCharset (String) : 只有當(dāng)請求時(shí)dataType為"jsonp"或"script",并且type是"GET"才會(huì)用于強(qiáng)制修改charset。通常在本地和遠(yuǎn)程的內(nèi)容編碼不同時(shí)使用。
(16) success (Function) : 請求成功后回調(diào)函數(shù)。參數(shù):服務(wù)器返回?cái)?shù)據(jù),數(shù)據(jù)格式。 Ajax 事件。
(17) timeout (Number) : 設(shè)置請求超時(shí)時(shí)間(毫秒),此設(shè)置將覆蓋全局設(shè)置。
(18) type (String) : (默認(rèn): "GET" 請求方式 ("POST" 或 "GET"), 默認(rèn)為 "GET"。
(19) url (String) : (默認(rèn): 當(dāng)前頁地址) 發(fā)送請求的地址。
參數(shù)用 : 分開,如:
$.ajax({ url: "test.html", cache: false, success: function(html){ $("#results").append(html); } });
2、封裝好的簡易方法(callback是成功時(shí)執(zhí)行的函數(shù),參數(shù)是返回的數(shù)據(jù))
jQuery.get(url,[data],[callback]) jQuery.getJSON(url,[data],[callback]) jQuery.getScript(url,[callback]) 載入遠(yuǎn)程JS并執(zhí)行 jQuery.post(url,[data],[callback]) load(url,[data],[callback]) 把遠(yuǎn)程的HTML載入當(dāng)前選中的DOM中
3、事件(事件參數(shù)為event, XMLHttpRequest, ajaxOptions, thrownError)
ajaxError(callback) AJAX 請求發(fā)生錯(cuò)誤時(shí)執(zhí)行函數(shù)。 ajaxSend(callback) AJAX 請求發(fā)送前執(zhí)行函數(shù) ajaxComplete(callback) AJAX 請求完成時(shí)執(zhí)行函數(shù) ajaxStart(callback) AJAX 請求開始時(shí)執(zhí)行函數(shù) ajaxStop(callback) AJAX 請求結(jié)束時(shí)執(zhí)行函數(shù) ajaxSuccess(callback) AJAX 請求成功時(shí)執(zhí)行函數(shù) jQuery.ajaxSetup(options) 設(shè)定Ajax的全局默認(rèn)值 serialize() 序列表單內(nèi)容為字符串 serializeArray() 序列化表格元素 (類似 ".serialize()" 方法) 返回 JSON 數(shù)據(jù)結(jié)構(gòu)數(shù)據(jù)七、常用靜態(tài)方法
jQuery.boxModel 當(dāng)前頁面中瀏覽器是否使用標(biāo)準(zhǔn)盒模型渲染頁面 jQuery.browser 瀏覽器內(nèi)核標(biāo)識。依據(jù) navigator.userAgent 判斷。 可用值: safari opera msie mozilla jQuery.browser.version 瀏覽器渲染引擎版本號。 jQuery.each(obj,callback) 通用例遍方法,可用于例遍對象和數(shù)組。 jQuery.inArray(value,array) 確定第一個(gè)參數(shù)在數(shù)組中的位置(如果沒有找到則返回 -1 )。 jQuery.map(array,callback) 將類數(shù)組對象轉(zhuǎn)換為數(shù)組對象,返回值為數(shù)據(jù),callback可以對舊數(shù)組單個(gè)進(jìn)行處理 jQuery.unique(array) 刪除數(shù)組中重復(fù)元素。
via 加菲
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/85471.html
摘要:頁面調(diào)試騰訊開發(fā)維護(hù)的代碼調(diào)試發(fā)布,錯(cuò)誤監(jiān)控上報(bào),用戶問題定位。同樣是由騰訊開發(fā)維護(hù)的代碼調(diào)試工具,是針對移動(dòng)端的調(diào)試工具。前端業(yè)務(wù)代碼工具庫。動(dòng)畫庫動(dòng)畫庫,也是目前通用的動(dòng)畫庫。 本人微信公眾號:前端修煉之路,歡迎關(guān)注 本篇文章整理自己使用過的和看到過的一些插件和工具,方便日后自己查找和使用。 另外,感謝白小明,文中很多的工具來源于此。 彈出框 layer:http://layer....
摘要:題目來源前端實(shí)習(xí)生面試總結(jié)最近開始了幾次面試,雖然還不知道結(jié)果如何,但是還是要記錄下來進(jìn)行一個(gè)總結(jié),同樣也希望對正在準(zhǔn)備面實(shí)習(xí)生的童鞋們有所幫助最后一個(gè)參數(shù)是做什么用的答規(guī)定事件是冒泡還是捕獲。 最近一直在多看基礎(chǔ)的書多碼代碼準(zhǔn)備找實(shí)習(xí),在網(wǎng)上也搜羅了不少面經(jīng),現(xiàn)在把搜羅到的實(shí)習(xí)生面試題自己整理一下。 題目來源:前端實(shí)習(xí)生面試總結(jié)最近開始了幾次面試,雖然還不知道結(jié)果如何,但是還是要記錄...
摘要:題目來源前端實(shí)習(xí)生面試總結(jié)最近開始了幾次面試,雖然還不知道結(jié)果如何,但是還是要記錄下來進(jìn)行一個(gè)總結(jié),同樣也希望對正在準(zhǔn)備面實(shí)習(xí)生的童鞋們有所幫助最后一個(gè)參數(shù)是做什么用的答規(guī)定事件是冒泡還是捕獲。 最近一直在多看基礎(chǔ)的書多碼代碼準(zhǔn)備找實(shí)習(xí),在網(wǎng)上也搜羅了不少面經(jīng),現(xiàn)在把搜羅到的實(shí)習(xí)生面試題自己整理一下。 題目來源:前端實(shí)習(xí)生面試總結(jié)最近開始了幾次面試,雖然還不知道結(jié)果如何,但是還是要記錄...
摘要:題目來源前端實(shí)習(xí)生面試總結(jié)最近開始了幾次面試,雖然還不知道結(jié)果如何,但是還是要記錄下來進(jìn)行一個(gè)總結(jié),同樣也希望對正在準(zhǔn)備面實(shí)習(xí)生的童鞋們有所幫助最后一個(gè)參數(shù)是做什么用的答規(guī)定事件是冒泡還是捕獲。 最近一直在多看基礎(chǔ)的書多碼代碼準(zhǔn)備找實(shí)習(xí),在網(wǎng)上也搜羅了不少面經(jīng),現(xiàn)在把搜羅到的實(shí)習(xí)生面試題自己整理一下。 題目來源:前端實(shí)習(xí)生面試總結(jié)最近開始了幾次面試,雖然還不知道結(jié)果如何,但是還是要記錄...
閱讀 1838·2021-09-28 09:46
閱讀 3155·2019-08-30 14:22
閱讀 1888·2019-08-26 13:36
閱讀 3354·2019-08-26 11:32
閱讀 2102·2019-08-23 16:56
閱讀 1160·2019-08-23 16:09
閱讀 1313·2019-08-23 12:55
閱讀 2159·2019-08-23 11:44