您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關jquery中有什么api,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
jquery核心函數
函數 描述 jQuery() 這個函數接收一個包含 CSS 選擇器的字符串,然后用這個字符串去匹配一組元素。 jQuery()1.8* 根據提供的原始 HTML 標記字符串,動態創建由 jQuery 對象包裝的 DOM 元素。同時設置一系列的屬性、事件等。 jQuery() $(document).ready()的簡寫。 jQuery.holdReady()1.6+ 暫停或恢復.ready() 事件的執行。 each() 以每一個匹配的元素作為上下文來執行一個函數。 size() jQuery 對象中元素的個數。 length jQuery 對象中元素的個數。 selector 返回傳給jQuery()的原始選擇器。 context 返回傳給jQuery()的原始的DOM節點內容,即jQuery()的第二個參數。如果沒有指定,那么context指向當前的文檔(document)。 get() 取得其中一個匹配的元素。 num表示取得第幾個匹配的元素。 index() 搜索匹配的元素,并返回相應元素的索引值,從0開始計數。 data() 在元素上存放數據,返回jQuery對象。 removeData()1.7* 在元素上移除存放的數據 queue() 顯示或操作在匹配元素上執行的函數隊列 dequeue() 從隊列最前端移除一個隊列函數,并執行他。 clearQueue() 清空對象上尚未執行的所有隊列 jQuery.fn.extend() 擴展 jQuery 元素集來提供新的方法(通常用來制作插件)。 jQuery.extend() 擴展jQuery對象本身。 jQuery.noConflict() 運行這個函數將變量$的控制權讓渡給第一個實現它的那個庫。
jQuery屬性
函數 描述 attr() 設置或返回被選元素的屬性值。 removeAttr() 從每一個匹配的元素中刪除一個屬性 prop()1.6+ 獲取在匹配的元素集中的第一個元素的屬性值。 removeProp()1.6+ 用來刪除由.prop()方法設置的屬性集 addClass() 為每個匹配的元素添加指定的類名。 removeClass() 從所有匹配的元素中刪除全部或者指定的類。 toggleClass() 如果存在(不存在)就刪除(添加)一個類。 html() 取得第一個匹配元素的html內容。這個函數不能用于XML文檔。但可以用于XHTML文檔。 text() 取得所有匹配元素的內容。 val() 獲得匹配元素的當前值。
jQuery CSS操作
下面列出的這些方法設置或返回元素的 CSS 相關屬性。
函數 描述 css()1.9* 訪問匹配元素的樣式屬性。 jQuery.cssHooks 直接向 jQuery 中添加鉤子,用于覆蓋設置或獲取特定 CSS 屬性時的方法,目的是為了標準化 CSS 屬性名或創建自定義屬性。 offset() 獲取匹配元素在當前視口的相對偏移。 position() 獲取匹配元素相對父元素的偏移。 scrollTop() 獲取匹配元素相對滾動條頂部的偏移。 scrollLeft() 獲取匹配元素相對滾動條左側的偏移。 heigh() 取得匹配元素當前計算的高度值(px)。 width() 取得第一個匹配元素當前計算的寬度值(px)。 innerHeight() 獲取第一個匹配元素內部區域高度(包括內邊距、不包括邊框)。 innerWidth() 獲取第一個匹配元素內部區域寬度(包括內邊距、不包括邊框)。 outerHeight() 獲取第一個匹配元素外部高度(默認包括內邊距和邊框)。 outerWidth() 獲取第一個匹配元素外部寬度(默認包括內邊距和邊框)。
jQuery選擇器
函數 描述 #id element .class * selector1,selector2,selectorN ancestor descendant parent > child prev + next prev ~ siblings :first :not() :even :odd :eq() :gt() :lang1.9+ :last :lt() :header :animated :focus1.6+ :root1.9+ :target1.9+ :contains() :empty :has() :parent :hidden :visible [attribute] [attribute=value] [attribute!=value] [attribute^=value] [attribute$=value] [attribute*=value] [attrSel1][attrSel2][attrSelN] :first-child :first-of-type1.9+ :last-child :last-of-type1.9+ :nth-child :nth-last-child()1.9+ :nth-last-of-type()1.9+ :nth-of-type()1.9+ :only-child :only-of-type1.9+ :input :text :password :radio :checkbox :submit :image :reset :button :file :hidden :enabled :disabled :checked :selected
jQuery文檔操作
函數 描述 append() 向每個匹配的元素內部追加內容。 appendTo() 把所有匹配的元素追加到另一個指定的元素元素集合中。 prepend() 向每個匹配的元素內部前置內容。 prependTo() 把所有匹配的元素前置到另一個、指定的元素元素集合中。 after() 在每個匹配的元素之后插入內容。 before() 在每個匹配的元素之前插入內容。 insertAfter() 把所有匹配的元素插入到另一個、指定的元素元素集合的后面。 insertBefore() 把所有匹配的元素插入到另一個、指定的元素元素集合的前面。 wrap() 把所有匹配的元素用其他元素的結構化標記包裹起來。 unwrap() 這個方法將移出元素的父元素。 wrapall() 將所有匹配的元素用單個元素包裹起來 wrapInner() 將每一個匹配的元素的子內容(包括文本節點)用一個HTML結構包裹起來 replaceWith() 將所有匹配的元素替換成指定的HTML或DOM元素。 replaceAll() 用匹配的元素替換掉所有 selector匹配到的元素。 empty() 刪除匹配的元素集合中所有的子節點。 remove() 從DOM中刪除所有匹配的元素。 detach() 從DOM中刪除所有匹配的元素。 clone() 克隆匹配的DOM元素并且選中這些克隆的副本。
jQuery篩選操作
函數 描述 eq() 獲取第N個元素 first() 獲取第一個元素 last() 獲取最后一個元素 hasClass() 檢查當前的元素是否含有某個特定的類,如果有,則返回true。 filter() 篩選出與指定表達式匹配的元素集合。 is()1.6* 根據選擇器、DOM元素或 jQuery 對象來檢測匹配元素集合,如果其中至少有一個元素符合這個給定的表達式就返回true。 map() 將一組元素轉換成其他數組(不論是否是元素數組) has() 保留包含特定后代的元素,去掉那些不含有指定后代的元素。 not() 刪除與指定表達式匹配的元素 slice() 選取一個匹配的子集 children() 取得一個包含匹配的元素集合中每一個元素的所有子元素的元素集合。 closest()1.7* 從元素本身開始,逐級向上級元素匹配,并返回最先匹配的元素。。 find()1.6* 搜索所有與指定表達式匹配的元素。這個函數是找出正在處理的元素的后代元素的好方法。 next() 取得一個包含匹配的元素集合中每一個元素緊鄰的后面同輩元素的元素集合。 nextall() 查找當前元素之后所有的同輩元素。 nextUntil()1.6* 查找當前元素之后所有的同輩元素,直到遇到匹配的那個元素為止。 offsetParent() 返回第一個匹配元素用于定位的父節點。 parent() 取得一個包含著所有匹配元素的唯一父元素的元素集合。 parents() 取得一個包含著所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通過一個可選的表達式進行篩選。 parentsUntil()1.6* 查找當前元素的所有的父輩元素,直到遇到匹配的那個元素為止。 prev() 取得一個包含匹配的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合。 prevall() 查找當前元素之前所有的同輩元素 prevUntil()1.6* 查找當前元素之前所有的同輩元素,直到遇到匹配的那個元素為止。 siblings() 取得一個包含匹配的元素集合中每一個元素的所有唯一同輩元素的元素集合。可以用可選的表達式進行篩選。 add() 把與表達式匹配的元素添加到jQuery對象中。這個函數可以用于連接分別與兩個表達式匹配的元素結果集。 andSelf() 加入先前所選的加入當前元素中 contents() 查找匹配元素內部所有的子節點(包括文本節點)。如果元素是一個iframe,則查找文檔內容 end() 回到最近的一個"破壞性"操作之前。即,將匹配的元素列表變為前一次的狀態。
jQuery篩選操作
函數 描述 eq() 獲取第N個元素 first() 獲取第一個元素 last() 獲取最后一個元素 hasClass() 檢查當前的元素是否含有某個特定的類,如果有,則返回true。 filter() 篩選出與指定表達式匹配的元素集合。 is()1.6* 根據選擇器、DOM元素或 jQuery 對象來檢測匹配元素集合,如果其中至少有一個元素符合這個給定的表達式就返回true。 map() 將一組元素轉換成其他數組(不論是否是元素數組) has() 保留包含特定后代的元素,去掉那些不含有指定后代的元素。 not() 刪除與指定表達式匹配的元素 slice() 選取一個匹配的子集 children() 取得一個包含匹配的元素集合中每一個元素的所有子元素的元素集合。 closest()1.7* 從元素本身開始,逐級向上級元素匹配,并返回最先匹配的元素。。 find()1.6* 搜索所有與指定表達式匹配的元素。這個函數是找出正在處理的元素的后代元素的好方法。 next() 取得一個包含匹配的元素集合中每一個元素緊鄰的后面同輩元素的元素集合。 nextall() 查找當前元素之后所有的同輩元素。 nextUntil()1.6* 查找當前元素之后所有的同輩元素,直到遇到匹配的那個元素為止。 offsetParent() 返回第一個匹配元素用于定位的父節點。 parent() 取得一個包含著所有匹配元素的唯一父元素的元素集合。 parents() 取得一個包含著所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通過一個可選的表達式進行篩選。 parentsUntil()1.6* 查找當前元素的所有的父輩元素,直到遇到匹配的那個元素為止。 prev() 取得一個包含匹配的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合。 prevall() 查找當前元素之前所有的同輩元素 prevUntil()1.6* 查找當前元素之前所有的同輩元素,直到遇到匹配的那個元素為止。 siblings() 取得一個包含匹配的元素集合中每一個元素的所有唯一同輩元素的元素集合。可以用可選的表達式進行篩選。 add() 把與表達式匹配的元素添加到jQuery對象中。這個函數可以用于連接分別與兩個表達式匹配的元素結果集。 andSelf() 加入先前所選的加入當前元素中 contents() 查找匹配元素內部所有的子節點(包括文本節點)。如果元素是一個iframe,則查找文檔內容 end() 回到最近的一個"破壞性"操作之前。即,將匹配的元素列表變為前一次的狀態。
jQuery事件方法
函數 描述 ready() 當DOM載入就緒可以查詢及操縱時綁定一個要執行的函數。 on()1.7+ 在選擇元素上綁定一個或多個事件的事件處理函數。 off()1.7+ 在選擇元素上移除一個或多個事件的事件處理函數。 bind() 為每個匹配元素的特定事件綁定事件處理函數。 one() 為每一個匹配元素的特定事件(像click)綁定一個一次性的事件處理函數。 trigger() 在每一個匹配的元素上觸發某類事件。 triggerHandler() 這個特別的方法將會觸發指定的事件類型上所有綁定的處理函數。但不會執行瀏覽器默認動作,也不會產生事件冒泡。 unbind() bind()的反向操作,從每一個匹配的元素中刪除綁定的事件。 live()1.7- jQuery 給所有匹配的元素附加一個事件處理函數,即使這個元素是以后再添加進來的也有效。 die()1.7- 從元素中刪除先前用.live()綁定的所有事件.(此方法與live正好完全相反。) delegate() 指定的元素(屬于被選元素的子元素)添加一個或多個事件處理程序,并規定當這些事件發生時運行的函數。 undelegate()1.6* 刪除由 delegate() 方法添加的一個或多個事件處理程序。 hover() 一個模仿懸停事件(鼠標移動到一個對象上面及移出這個對象)的方法。 toggle() 用于綁定兩個或多個事件處理器函數,以響應被選元素的輪流的 click 事件。 blur() 當元素失去焦點時觸發 blur 事件。 change() 當元素的值發生改變時,會發生 change 事件。 click() 觸發每一個匹配元素的click事件。 dblclick() 當雙擊元素時,會發生 dblclick 事件。 error() 當元素遇到錯誤(沒有正確載入)時,發生 error 事件。 focus() 當元素獲得焦點時,觸發 focus 事件。 focusin() 當元素獲得焦點時,觸發 focusin 事件。 focusout() 當元素失去焦點時觸發 focusout 事件。 keydown() 當鍵盤或按鈕被按下時,發生 keydown 事件。 keypress() 當鍵盤或按鈕被按下時,發生 keypress 事件。 keyup() 當按鈕被松開時,發生 keyup 事件。它發生在當前獲得焦點的元素上。 mousedown() 當鼠標指針移動到元素上方,并按下鼠標按鍵時,會發生 mousedown 事件。 mouseenter() 當鼠標指針穿過元素時,會發生 mouseenter 事件。該事件大多數時候會與mouseleave 事件一起使用。 mouseleave() 當鼠標指針離開元素時,會發生 mouseleave 事件。該事件大多數時候會與mouseenter 事件一起使用。 mousemove() 當鼠標指針在指定的元素中移動時,就會發生 mousemove 事件。 mouseout() 當鼠標指針從元素上移開時,發生 mouseout 事件。 mouseover() 當鼠標指針位于元素上方時,會發生 mouseover 事件。 mouseup() 當在元素上放松鼠標按鈕時,會發生 mouseup 事件。 resize() 當調整瀏覽器窗口的大小時,發生 resize 事件。 scroll() 當用戶滾動指定的元素時,會發生 scroll 事件。 select() 當 textarea 或文本類型的 input 元素中的文本被選擇時,會發生 select 事件。 submit() 當提交表單時,會發生 submit 事件。 unload() 在當用戶離開頁面時,會發生 unload 事件。
jQuery效果
函數 描述 show() 顯示隱藏的匹配元素。 hide() 隱藏顯示的元素 toggle() 用于綁定兩個或多個事件處理器函數,以響應被選元素的輪流的 click 事件。 slideDown() 通過高度變化(向下增大)來動態地顯示所有匹配的元素,在顯示完成后可選地觸發一個回調函數。 slideUp() 通過高度變化(向上減小)來動態地隱藏所有匹配的元素,在隱藏完成后可選地觸發一個回調函數。 slideToggle() 通過高度變化來切換所有匹配元素的可見性,并在切換完成后可選地觸發一個回調函數。 fadeIn() 通過不透明度的變化來實現所有匹配元素的淡入效果,并在動畫完成后可選地觸發一個回調函數。 fadeOut() 通過不透明度的變化來實現所有匹配元素的淡出效果,并在動畫完成后可選地觸發一個回調函數。 fadeTo() 把所有匹配元素的不透明度以漸進方式調整到指定的不透明度,并在動畫完成后可選地觸發一個回調函數。 fadeToggle() 通過不透明度的變化來開關所有匹配元素的淡入和淡出效果,并在動畫完成后可選地觸發一個回調函數。 animate()1.8* 用于創建自定義動畫的函數。 stop()1.7* 停止所有在指定元素上正在運行的動畫。 delay() 設置一個延時來推遲執行隊列中之后的項目。 finish()1.9+ 停止當前正在運行的動畫,刪除所有排隊的動畫,并完成匹配元素所有的動畫。 jQuery.fx.off 關閉頁面上所有的動畫。 jQuery.fx.interval 設置動畫的顯示幀速。
jQuery ajax操作
函數 描述 $.ajax() 通過 HTTP 請求加載遠程數據。 load() 載入遠程 HTML 文件代碼并插入至 DOM 中。 $.get() 通過遠程 HTTP GET 請求載入信息。 $.getJSON() 通過 HTTP GET 請求載入 JSON 數據。 $.getScript() 通過 HTTP GET 請求載入并執行一個 JavaScript 文件。 $.post() 通過遠程 HTTP POST 請求載入信息。 ajaxComplete() AJAX 請求完成時執行函數。Ajax 事件。 ajaxError() AJAX 請求發生錯誤時執行函數。Ajax 事件。 ajaxSend() AJAX 請求發送前執行函數。Ajax 事件。 ajaxStart() AJAX 請求開始時執行函數。Ajax 事件。 ajaxStop() AJAX 請求結束時執行函數。Ajax 事件。 ajaxSuccess() AJAX 請求成功時執行函數。Ajax 事件。 $.ajaxPrefilter() Handle custom Ajax options or modify existing options before each request is sent and before they are processed by $.ajax(). $.ajaxSetup() 設置全局 AJAX 默認選項。 serialize() 序列化表格內容為字符串。 serializearray() 序列化表格元素 (類似 '.serialize()' 方法) 返回 JSON 數據結構數據。
接下來,我們再給大家看一下 jQuery常用語法及接口:
jQuery常用語法及接口
無論是寫程序還是看API文檔,要時刻注意區分Dom對象和jQuery包裝集。
1. Dom對象
在傳統的JavaScript開發中,都是首先獲取Dom對象,比如:
var div = document.getElementById("testDiv"); var divs = document.getElementsByTagName("div");
使用document.getElementById方法根據id獲取單個Dom對象,或者使用document. getElementsByTagName方法根據HTML標簽名稱獲取Dom對象集合。
另外,在事件函數中,可以通過在方法函數中使用this引用事件觸發對象,或者使用event對象的target(FF)或srcElement(IE6)獲取引發事件的Dom對象。
這里獲取的都是Dom對象,Dom對象也有不同的類型,如input、div、span等。Dom對象只有有限的屬性和方法,如圖6-2所示。
2. jQuery包裝集
jQuery包裝集可以說是Dom對象的擴充。在jQuery的世界中將所有的對象,無論是一個還是一組,都封裝成一個jQuery包裝集,比如獲取包含一個元素的jQuery包裝集:
var jQueryObject = $("#testDiv");
jQuery包裝集都是作為一個對象一起調用的。jQuery包裝集擁有豐富的屬性和方法,jQuery特有的屬性和方法如圖6-3所示。
3. Dom對象與jQuery對象的轉換
(1)Dom轉jQuery包裝集
如果要使用jQuery提供的函數,首先就需要構造jQuery包裝集。可以使用本文即將介紹的jQuery選擇器直接構造jQuery包裝集,比如:
$("#testDiv");
上面語句構造的包裝集只含有一個id是testDiv的元素。或者已經獲取了一個Dom元素,比如:
var div = document.getElementById("testDiv");
上面的代碼中div是一個Dom元素,可以將Dom元素轉換成jQuery包裝集:
var domToJQueryObject = $(div);
(2)jQuery包裝集轉Dom對象
jQuery包裝集是一個集合,所以可以通過索引器訪問其中的某一個元素:
var domObject = $("#testDiv")[0];
通過索引器返回的不再是jQuery包裝集,而是一個Dom對象!jQuery包裝集的某些遍歷方法,比如each()中,可以傳遞遍歷函數,在遍歷函數中的this也是Dom元素,比如:
$("#testDiv").each(function() { alert(this) })
如果要使用jQuery的方法操作Dom對象,用上面介紹過的轉換方法即可:
$("#testDiv").each(function() { $(this).html("修改內容") })
關于“jquery中有什么api”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。