jQuery?選擇器

選擇器??? ??????????????實例?????? ????????????? ??????????????選取

*?????????????????? ?????? $("*")???? ????????????? ??????????????所有元素

#id?? ???????????????????? $("#lastname")?????? ????????????? id="lastname"?的元素

.class?????? ????????????? $(".intro")????? ?????? ??????????????所有?class="intro"?的元素

element????????? ?????? $("p")???? ????????????? ??????????????所有?<p>?元素

.class.class????? ?????? $(".intro.demo")??? ??????????????所有?class="intro"?且?class="demo"?的元素

:first?????? ???????????????????? $("p:first")???? ?????? ??????????????第一個?<p>?元素

:last ???????????????????? $("p:last")????? ?????? ??????????????最后一個?<p>?元素

:even?????? ????????????? $("tr:even")??? ?????? ??????????????所有偶數?<tr>?元素

:odd?????????????? ?????? $("tr:odd")???? ?????? ??????????????所有奇數?<tr>?元素

:eq(index)?????? ?????? $("ul li:eq(3)")?????? ?????? ??????????????列表中的第四個元素（index?從?0?開始）

:gt(no)??? ????????????? $("ul li:gt(3)")?????? ?????? ??????????????列出?index?大于?3?的元素

:lt(no)???? ????????????? $("ul li:lt(3)") ?????? ??????????????列出?index?小于?3?的元素

:not(selector)? ?????? $("input:not(:empty)")?? ???????所有不為空的?input?元素

:header??? ????????????? $(":header")??? ?????? ??????????????所有標題元素?<h1> - <h6>

:animated?????? ???? ?????????????????????????????????? ??????????????所有動畫元素

:contains(text) ?????? $(":contains('W3School')")????包含指定字符串的所有元素

:empty??? ????????????? $(":empty")??? ?????? ??????????????無子（元素）節點的所有元素

:hidden??? ????????????? $("p:hidden")? ?????? ??????????????所有隱藏的?<p>?元素

:visible?????????? ?????? $("table:visible")??? ??????????????所有可見的表格

s1,s2,s3?? ????????????? $("th,td,.intro")????? ??????????????所有帶有匹配選擇的元素

[attribute]????????????? ?????? $("[href]")????? ?????? ??????????????所有帶有?href?屬性的元素

[attribute=value]??? $("[href='#']") ?????? ??????????????所有?href?屬性的值等于?"#"?的元素

[attribute!=value]?? $("[href!='#']")?????? ??????????????所有?href?屬性的值不等于?"#"?的元素

[attribute[Math Processing Error]("[href$='.jpg']")???????? ???????所有?href?屬性的值包含以?".jpg"?結尾的元素

:input????? ????????????? $(":input")????? ?????? ??????????????所有?<input>?元素

:text ???????????????????? $(":text") ????????????? ??????????????所有?type="text"?的?<input>?元素

:password?????? ?????? $(":password")?????? ??????????????所有?type="password"?的?<input>?元素

:radio????? ????????????? $(":radio")????? ?????? ??????????????所有?type="radio"?的?<input>?元素

:checkbox?????? ?????? $(":checkbox")?????? ??????????????所有?type="checkbox"?的?<input>?元素

:submit??? ????????????? $(":submit")?? ?????? ??????????????所有?type="submit"?的?<input>?元素

:reset?????? ????????????? $(":reset")????? ?????? ??????????????所有?type="reset"?的?<input>?元素

:button?????????? ?????? $(":button")??? ?????? ??????????????所有?type="button"?的?<input>?元素

:image??????????? ?????? $(":image")??? ?????? ??????????????所有?type="image"?的?<input>?元素

:file?????????????? ?????? $(":file")??????? ?????? ??????????????所有?type="file"?的?<input>?元素

:enabled? ????????????? $(":enabled")? ?????? ??????????????所有激活的?input?元素

:disabled? ????????????? $(":disabled") ?????? ??????????????所有禁用的?input?元素

:selected? ????????????? $(":selected")? ?????? ??????????????所有被選取的?input?元素

:checked? ?????? ?????? $(":checked")? ?????? ??????????????所有被選中的?input?元素

jQuery?效果函數

方法?????????????????????描述

animate()???????????????對被選元素應用“自定義”的動畫

clearQueue()??????????對被選元素移除所有排隊的函數（仍未運行的）

delay()??????????????????對被選元素的所有排隊函數（仍未運行）設置延遲

dequeue()?????????????????????運行被選元素的下一個排隊函數

fadeIn()?????????????????淡入被選元素至完全不透明

fadeOut()?????????????????????淡出被選元素至完全不透明

fadeTo()????????????????把被選元素減弱至給定的不透明度

hide()????????????????????隱藏被選的元素

queue()?????????????????顯示被選元素的排隊函數

show()??????????????????顯示被選的元素

slideDown()???????????通過調整高度來滑動顯示被選元素

slideToggle()??????????對被選元素進行滑動隱藏和滑動顯示的切換

slideUp()???????????????通過調整高度來滑動隱藏被選元素

stop()????????????????????停止在被選元素上運行動畫

toggle()?????????????????對被選元素進行隱藏和顯示的切換

jQuery?文檔操作方法

這些方法對于?XML?文檔和?HTML?文檔均是適用的，除了：html()。

方法?????? ?????????????????????描述

addClass()????????????????????向匹配的元素添加指定的類名。

after()??????????????????????????在匹配的元素之后插入內容。

append()???????????????????????向匹配的元素內部追加內容。

appendTo()???????????????????向匹配的元素內部追加內容。

attr()???????????????????????????????????設置或返回匹配元素的屬性和值。

before()????????????????????????在每個匹配的元素之前插入內容。

clone()?????????????????????????創建匹配元素集合的副本。

detach()????????????????????????從?DOM?中移除匹配元素集合。

empty()????????????????????????刪除匹配的元素集合中所有的子節點。

hasClass()?????????????????????檢查匹配的元素是否擁有指定的類。

html()??????????????????????????設置或返回匹配的元素集合中的?HTML?內容。

insertAfter()?????????????????把匹配的元素插入到另一個指定的元素集合的后面。

insertBefore()???????????????把匹配的元素插入到另一個指定的元素集合的前面。

prepend()????????????????????????????向每個匹配的元素內部前置內容。

prependTo()??????????????????向每個匹配的元素內部前置內容。

remove()??????????????????????移除所有匹配的元素。

removeAttr()????????????????從所有匹配的元素中移除指定的屬性。

removeClass()???????????????從所有匹配的元素中刪除全部或者指定的類。

replaceAll()??????????????????用匹配的元素替換所有匹配到的元素。

replaceWith()????????????????用新內容替換匹配的元素。

text()???????????????????????????設置或返回匹配元素的內容。

toggleClass()?????????????????從匹配的元素中添加或刪除一個類。

unwrap()??????????????????????移除并替換指定元素的父元素。

val()???????????????????????????????????設置或返回匹配元素的值。

wrap()??????????????????????????把匹配的元素用指定的內容或元素包裹起來。

wrapAll()????????????????????????????把所有匹配的元素用指定的內容或元素包裹起來。

wrapinner()??????????????????將每一個匹配的元素的子內容用指定的內容或元素包裹起來。

jQuery?屬性操作方法

下面列出的這些方法獲得或設置元素的?DOM?屬性。

這些方法對于?XML?文檔和?HTML?文檔均是適用的，除了：html()。

方法?????????????????????描述

addClass()?????????????向匹配的元素添加指定的類名。

attr()????????????????????????????設置或返回匹配元素的屬性和值。

hasClass()??????????????檢查匹配的元素是否擁有指定的類。

html()???????????????????設置或返回匹配的元素集合中的?HTML?內容。

removeAttr()?????????從所有匹配的元素中移除指定的屬性。

removeClass()????????從所有匹配的元素中刪除全部或者指定的類。

toggleClass()??????????從匹配的元素中添加或刪除一個類。

val()????????????????????????????設置或返回匹配元素的值。

jQuery CSS?操作函數

CSS?屬性?????????????描述

css()??????????????????????設置或返回匹配元素的樣式屬性。

height()?????????????????設置或返回匹配元素的高度。

offset()??????????????????返回第一個匹配元素相對于文檔的位置。

offsetParent()?????????返回最近的定位祖先元素。

position()?????????????????????返回第一個匹配元素相對于父元素的位置。

scrollLeft()????????????設置或返回匹配元素相對滾動條頂部的偏移。

scrollTop()?????????????設置或返回匹配元素相對滾動條左側的偏移。

width()??????????????????設置或返回匹配元素的寬度。

jQuery Ajax?操作函數

jQuery?庫擁有完整的?Ajax?兼容套件。其中的函數和方法允許我們在不刷新瀏覽器的情況下從服務器加載數據。

函數????????????????????????????描述

jQuery.ajax()????????????????執行異步?HTTP (Ajax)?請求。

.ajaxComplete()????????????當?Ajax?請求完成時注冊要調用的處理程序。這是一個?Ajax?事件。

.ajaxError()??????????????????當?Ajax?請求完成且出現錯誤時注冊要調用的處理程序。這是一個?Ajax?事件。

.ajaxSend()???????????????????在?Ajax?請求發送之前顯示一條消息。

jQuery.ajaxSetup()????????設置將來的?Ajax?請求的默認值。

.ajaxStart()???????????????????當首個?Ajax?請求完成開始時注冊要調用的處理程序。這是一個?Ajax?事件。

.ajaxStop()???? ??????????????當所有?Ajax?請求完成時注冊要調用的處理程序。這是一個?Ajax?事件。

.ajaxSuccess()???????????????當?Ajax?請求成功完成時顯示一條消息。

jQuery.get()??????????????????使用?HTTP GET?請求從服務器加載數據。

jQuery.getJSON()?????????使用?HTTP GET?請求從服務器加載?JSON?編碼數據。

jQuery.getScript()?????????使用?HTTP GET?請求從服務器加載?JavaScript?文件，然后執行該文件。

.load()??????????????????????????從服務器加載數據，然后把返回到?HTML?放入匹配元素。

jQuery.param()?????????????創建數組或對象的序列化表示，適合在?URL?查詢字符串或?Ajax?請求中使用。

jQuery.post()????????????????使用?HTTP POST?請求從服務器加載數據。

.serialize()????????????????????將表單內容序列化為字符串。

.serializeArray()????????????序列化表單元素，返回?JSON?數據結構數據。

jQuery?遍歷函數

jQuery?遍歷函數包括了用于篩選、查找和串聯元素的方法。

函數?????? ?????????????????????描述

.add()????? ?????????????????????將元素添加到匹配元素的集合中。

.andSelf()?????? ?????????????????????把堆棧中之前的元素集添加到當前集合中。

.children()????? ??????????????獲得匹配元素集合中每個元素的所有子元素。

.closest() ?????????????????????從元素本身開始，逐級向上級元素匹配，并返回最先匹配的祖先元素。

.contents()????? ??????????????獲得匹配元素集合中每個元素的子元素，包括文本和注釋節點。

.each()??? ?????????????????????對?jQuery?對象進行迭代，為每個匹配元素執行函數。

.end()????? ?????????????????????結束當前鏈中最近的一次篩選操作，并將匹配元素集合返回到前一次的狀態。

.eq()?????? ????????????????????????????將匹配元素集合縮減為位于指定索引的新元素。

.filter()??? ?????????????????????將匹配元素集合縮減為匹配選擇器或匹配函數返回值的新元素。

.find()???? ?????????????????????獲得當前匹配元素集合中每個元素的后代，由選擇器進行篩選。

.first()???? ?????????????????????將匹配元素集合縮減為集合中的第一個元素。

.has()????? ?????????????????????將匹配元素集合縮減為包含特定元素的后代的集合。

.is() ????????????????????????????根據選擇器檢查當前匹配元素集合，如果存在至少一個匹配元素，則返回?true。

.last()????? ?????????????????????將匹配元素集合縮減為集合中的最后一個元素。

.map()???? ?????????????????????把當前匹配集合中的每個元素傳遞給函數，產生包含返回值的新?jQuery?對象。

.next()???? ?????????????????????獲得匹配元素集合中每個元素緊鄰的同輩元素。

.nextAll()???????????????????? ???????獲得匹配元素集合中每個元素之后的所有同輩元素，由選擇器進行篩選（可選）。

.nextUntil()??? ??????????????獲得每個元素之后所有的同輩元素，直到遇到匹配選擇器的元素為止。

.not()????? ?????????????????????從匹配元素集合中刪除元素。

.offsetParent() ??????????????獲得用于定位的第一個父元素。

.parent()? ?????????????????????獲得當前匹配元素集合中每個元素的父元素，由選擇器篩選（可選）。

.parents() ?????????????????????獲得當前匹配元素集合中每個元素的祖先元素，由選擇器篩選（可選）。

.parentsUntil()?????? ??????????????獲得當前匹配元素集合中每個元素的祖先元素，直到遇到匹配選擇器的元素為止。

.prev()??? ?????????????????????獲得匹配元素集合中每個元素緊鄰的前一個同輩元素，由選擇器篩選（可選）。

.prevAll()?????? ?????????????????????獲得匹配元素集合中每個元素之前的所有同輩元素，由選擇器進行篩選（可選）。

.prevUntil()??? ??????????????獲得每個元素之前所有的同輩元素，直到遇到匹配選擇器的元素為止。

.siblings()?????? ??????????????獲得匹配元素集合中所有元素的同輩元素，由選擇器篩選（可選）。

.slice()??? ?????????????????????將匹配元素集合縮減為指定范圍的子集。

?

jQuery?數據操作函數

這些方法允許我們將指定的?DOM?元素與任意數據相關聯。

函數????????????????????????????描述

.clearQueue()????????????????從隊列中刪除所有未運行的項目。

.data()??????????????????????????存儲與匹配元素相關的任意數據。

jQuery.data()????????????????存儲與指定元素相關的任意數據。

.dequeue()????????????????????從隊列最前端移除一個隊列函數，并執行它。

jQuery.dequeue()???????????從隊列最前端移除一個隊列函數，并執行它。

jQuery.hasData()???????????存儲與匹配元素相關的任意數據。

.queue()???????????????????????顯示或操作匹配元素所執行函數的隊列。

jQuery.queue()??????????????顯示或操作匹配元素所執行函數的隊列。

.removeData()???????????????移除之前存放的數據。

jQuery.removeData()?????移除之前存放的數據。

jQuery DOM?元素方法

函數????????????????????????????描述

.get()???????????????????????????從隊列中刪除所有未運行的項目。

.index()????????????????????????存儲與指定元素相關的任意數據。

.size()??????????????????????????存儲與匹配元素相關的任意數據。

.toArray()?????????????????????從隊列最前端移除一個隊列函數，并執行它。

jQuery?核心函數

函數????????????????????????????描述

jQuery()???????????????????????接受一個字符串，其中包含了用于匹配元素集合的?CSS?選擇器。

jQuery.noConflict()??????????????運行這個函數將變量?$?的控制權讓渡給第一個實現它的那個庫。

jQuery?事件方法

事件方法會觸發匹配元素的事件，或將函數綁定到所有匹配元素的某個事件。

觸發實例：

$("button#demo").click()

上面的例子將觸發?id="demo"?的?button?元素的?click?事件。

綁定實例：

[Math Processing Error]("img").hide()})

上面的例子會在點擊?id="demo"?的按鈕時隱藏所有圖像。

方法????????????????????????????描述

bind()??????????????????????????向匹配元素附加一個或更多事件處理器

blur()???????????????????????????觸發、或將函數綁定到指定元素的?blur?事件

change()???????????????????????觸發、或將函數綁定到指定元素的?change?事件

click()??????????????????????????觸發、或將函數綁定到指定元素的?click?事件

dblclick()????????????????????????????觸發、或將函數綁定到指定元素的?double click?事件

delegate()????????????????????????????向匹配元素的當前或未來的子元素附加一個或多個事件處理器

die()???????????????????????????????????移除所有通過?live()?函數添加的事件處理程序。

error()??????????????????????????觸發、或將函數綁定到指定元素的?error?事件

event.isDefaultPrevented()????返回?event?對象上是否調用了?event.preventDefault()。

event.pageX??????????????????相對于文檔左邊緣的鼠標位置。

event.pageY??????????????????相對于文檔上邊緣的鼠標位置。

event.preventDefault()???阻止事件的默認動作。

event.result???????????????????包含由被指定事件觸發的事件處理器返回的最后一個值。

event.target???????????????????觸發事件的?DOM?元素。

event.timeStamp???????????該屬性返回從?1970?年?1?月?1?日到事件發生時的毫秒數。

event.type?????????????????????描述事件的類型。

event.which??????????????????指示按了哪個鍵或按鈕。

focus()?????????????????????????觸發、或將函數綁定到指定元素的?focus?事件

keydown()????????????????????觸發、或將函數綁定到指定元素的?key down?事件

keypress()?????????????????????觸發、或將函數綁定到指定元素的?key press?事件

keyup()????????????????????????觸發、或將函數綁定到指定元素的?key up?事件

live()???????????????????????????觸發、或將函數綁定到指定元素的?load?事件

load()???????????????????????????觸發、或將函數綁定到指定元素的?load?事件

mousedown()????????????????觸發、或將函數綁定到指定元素的?mouse down?事件

mouseenter()?????????????????觸發、或將函數綁定到指定元素的?mouse enter?事件

mouseleave()????????????????觸發、或將函數綁定到指定元素的?mouse leave?事件

mousemove()????????????????觸發、或將函數綁定到指定元素的?mouse move?事件

mouseout()???????????????????觸發、或將函數綁定到指定元素的?mouse out?事件

mouseover()?????????????????觸發、或將函數綁定到指定元素的?mouse over?事件

mouseup()????????????????????觸發、或將函數綁定到指定元素的?mouse up?事件

one()????????????????????????????向匹配元素添加事件處理器。每個元素只能觸發一次該處理器。

ready()?????????????????????????文檔就緒事件（當?HTML?文檔就緒可用時）

resize()?????????????????????????觸發、或將函數綁定到指定元素的?resize?事件

scroll()?????????????????????????觸發、或將函數綁定到指定元素的?scroll?事件

select()?????????????????????????觸發、或將函數綁定到指定元素的?select?事件

submit()???????????????????????觸發、或將函數綁定到指定元素的?submit?事件

toggle()????????????????????????綁定兩個或多個事件處理器函數，當發生輪流的?click?事件時執行。

trigger()???????????????????????所有匹配元素的指定事件

triggerHandler()????????????第一個被匹配元素的指定事件

unbind()???????????????????????從匹配元素移除一個被添加的事件處理器

undelegate()??????????????????從匹配元素移除一個被添加的事件處理器，現在或將來

unload()???????????????????????觸發、或將函數綁定到指定元素的?unload?事件

總結

以上是生活随笔為你收集整理的jQuery知识汇总的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。