jQuery知识汇总
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")??? ?????? ??????????????所有偶數(shù)?<tr>?元素
:odd?????????????? ?????? $("tr:odd")???? ?????? ??????????????所有奇數(shù)?<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")??? ?????? ??????????????無子(元素)節(jié)點的所有元素
: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?效果函數(shù)
方法?????????????????????描述
animate()???????????????對被選元素應用“自定義”的動畫
clearQueue()??????????對被選元素移除所有排隊的函數(shù)(仍未運行的)
delay()??????????????????對被選元素的所有排隊函數(shù)(仍未運行)設置延遲
dequeue()?????????????????????運行被選元素的下一個排隊函數(shù)
fadeIn()?????????????????淡入被選元素至完全不透明
fadeOut()?????????????????????淡出被選元素至完全不透明
fadeTo()????????????????把被選元素減弱至給定的不透明度
hide()????????????????????隱藏被選的元素
queue()?????????????????顯示被選元素的排隊函數(shù)
show()??????????????????顯示被選的元素
slideDown()???????????通過調整高度來滑動顯示被選元素
slideToggle()??????????對被選元素進行滑動隱藏和滑動顯示的切換
slideUp()???????????????通過調整高度來滑動隱藏被選元素
stop()????????????????????停止在被選元素上運行動畫
toggle()?????????????????對被選元素進行隱藏和顯示的切換
jQuery?文檔操作方法
這些方法對于?XML?文檔和?HTML?文檔均是適用的,除了:html()。
方法?????? ?????????????????????描述
addClass()????????????????????向匹配的元素添加指定的類名。
after()??????????????????????????在匹配的元素之后插入內容。
append()???????????????????????向匹配的元素內部追加內容。
appendTo()???????????????????向匹配的元素內部追加內容。
attr()???????????????????????????????????設置或返回匹配元素的屬性和值。
before()????????????????????????在每個匹配的元素之前插入內容。
clone()?????????????????????????創(chuàng)建匹配元素集合的副本。
detach()????????????????????????從?DOM?中移除匹配元素集合。
empty()????????????????????????刪除匹配的元素集合中所有的子節(jié)點。
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?操作函數(shù)
CSS?屬性?????????????描述
css()??????????????????????設置或返回匹配元素的樣式屬性。
height()?????????????????設置或返回匹配元素的高度。
offset()??????????????????返回第一個匹配元素相對于文檔的位置。
offsetParent()?????????返回最近的定位祖先元素。
position()?????????????????????返回第一個匹配元素相對于父元素的位置。
scrollLeft()????????????設置或返回匹配元素相對滾動條頂部的偏移。
scrollTop()?????????????設置或返回匹配元素相對滾動條左側的偏移。
width()??????????????????設置或返回匹配元素的寬度。
jQuery Ajax?操作函數(shù)
jQuery?庫擁有完整的?Ajax?兼容套件。其中的函數(shù)和方法允許我們在不刷新瀏覽器的情況下從服務器加載數(shù)據(jù)。
函數(shù)????????????????????????????描述
jQuery.ajax()????????????????執(zhí)行異步?HTTP (Ajax)?請求。
.ajaxComplete()????????????當?Ajax?請求完成時注冊要調用的處理程序。這是一個?Ajax?事件。
.ajaxError()??????????????????當?Ajax?請求完成且出現(xiàn)錯誤時注冊要調用的處理程序。這是一個?Ajax?事件。
.ajaxSend()???????????????????在?Ajax?請求發(fā)送之前顯示一條消息。
jQuery.ajaxSetup()????????設置將來的?Ajax?請求的默認值。
.ajaxStart()???????????????????當首個?Ajax?請求完成開始時注冊要調用的處理程序。這是一個?Ajax?事件。
.ajaxStop()???? ??????????????當所有?Ajax?請求完成時注冊要調用的處理程序。這是一個?Ajax?事件。
.ajaxSuccess()???????????????當?Ajax?請求成功完成時顯示一條消息。
jQuery.get()??????????????????使用?HTTP GET?請求從服務器加載數(shù)據(jù)。
jQuery.getJSON()?????????使用?HTTP GET?請求從服務器加載?JSON?編碼數(shù)據(jù)。
jQuery.getScript()?????????使用?HTTP GET?請求從服務器加載?JavaScript?文件,然后執(zhí)行該文件。
.load()??????????????????????????從服務器加載數(shù)據(jù),然后把返回到?HTML?放入匹配元素。
jQuery.param()?????????????創(chuàng)建數(shù)組或對象的序列化表示,適合在?URL?查詢字符串或?Ajax?請求中使用。
jQuery.post()????????????????使用?HTTP POST?請求從服務器加載數(shù)據(jù)。
.serialize()????????????????????將表單內容序列化為字符串。
.serializeArray()????????????序列化表單元素,返回?JSON?數(shù)據(jù)結構數(shù)據(jù)。
jQuery?遍歷函數(shù)
jQuery?遍歷函數(shù)包括了用于篩選、查找和串聯(lián)元素的方法。
函數(shù)?????? ?????????????????????描述
.add()????? ?????????????????????將元素添加到匹配元素的集合中。
.andSelf()?????? ?????????????????????把堆棧中之前的元素集添加到當前集合中。
.children()????? ??????????????獲得匹配元素集合中每個元素的所有子元素。
.closest() ?????????????????????從元素本身開始,逐級向上級元素匹配,并返回最先匹配的祖先元素。
.contents()????? ??????????????獲得匹配元素集合中每個元素的子元素,包括文本和注釋節(jié)點。
.each()??? ?????????????????????對?jQuery?對象進行迭代,為每個匹配元素執(zhí)行函數(shù)。
.end()????? ?????????????????????結束當前鏈中最近的一次篩選操作,并將匹配元素集合返回到前一次的狀態(tài)。
.eq()?????? ????????????????????????????將匹配元素集合縮減為位于指定索引的新元素。
.filter()??? ?????????????????????將匹配元素集合縮減為匹配選擇器或匹配函數(shù)返回值的新元素。
.find()???? ?????????????????????獲得當前匹配元素集合中每個元素的后代,由選擇器進行篩選。
.first()???? ?????????????????????將匹配元素集合縮減為集合中的第一個元素。
.has()????? ?????????????????????將匹配元素集合縮減為包含特定元素的后代的集合。
.is() ????????????????????????????根據(jù)選擇器檢查當前匹配元素集合,如果存在至少一個匹配元素,則返回?true。
.last()????? ?????????????????????將匹配元素集合縮減為集合中的最后一個元素。
.map()???? ?????????????????????把當前匹配集合中的每個元素傳遞給函數(shù),產生包含返回值的新?jQuery?對象。
.next()???? ?????????????????????獲得匹配元素集合中每個元素緊鄰的同輩元素。
.nextAll()???????????????????? ???????獲得匹配元素集合中每個元素之后的所有同輩元素,由選擇器進行篩選(可選)。
.nextUntil()??? ??????????????獲得每個元素之后所有的同輩元素,直到遇到匹配選擇器的元素為止。
.not()????? ?????????????????????從匹配元素集合中刪除元素。
.offsetParent() ??????????????獲得用于定位的第一個父元素。
.parent()? ?????????????????????獲得當前匹配元素集合中每個元素的父元素,由選擇器篩選(可選)。
.parents() ?????????????????????獲得當前匹配元素集合中每個元素的祖先元素,由選擇器篩選(可選)。
.parentsUntil()?????? ??????????????獲得當前匹配元素集合中每個元素的祖先元素,直到遇到匹配選擇器的元素為止。
.prev()??? ?????????????????????獲得匹配元素集合中每個元素緊鄰的前一個同輩元素,由選擇器篩選(可選)。
.prevAll()?????? ?????????????????????獲得匹配元素集合中每個元素之前的所有同輩元素,由選擇器進行篩選(可選)。
.prevUntil()??? ??????????????獲得每個元素之前所有的同輩元素,直到遇到匹配選擇器的元素為止。
.siblings()?????? ??????????????獲得匹配元素集合中所有元素的同輩元素,由選擇器篩選(可選)。
.slice()??? ?????????????????????將匹配元素集合縮減為指定范圍的子集。
?
jQuery?數(shù)據(jù)操作函數(shù)
這些方法允許我們將指定的?DOM?元素與任意數(shù)據(jù)相關聯(lián)。
函數(shù)????????????????????????????描述
.clearQueue()????????????????從隊列中刪除所有未運行的項目。
.data()??????????????????????????存儲與匹配元素相關的任意數(shù)據(jù)。
jQuery.data()????????????????存儲與指定元素相關的任意數(shù)據(jù)。
.dequeue()????????????????????從隊列最前端移除一個隊列函數(shù),并執(zhí)行它。
jQuery.dequeue()???????????從隊列最前端移除一個隊列函數(shù),并執(zhí)行它。
jQuery.hasData()???????????存儲與匹配元素相關的任意數(shù)據(jù)。
.queue()???????????????????????顯示或操作匹配元素所執(zhí)行函數(shù)的隊列。
jQuery.queue()??????????????顯示或操作匹配元素所執(zhí)行函數(shù)的隊列。
.removeData()???????????????移除之前存放的數(shù)據(jù)。
jQuery.removeData()?????移除之前存放的數(shù)據(jù)。
jQuery DOM?元素方法
函數(shù)????????????????????????????描述
.get()???????????????????????????從隊列中刪除所有未運行的項目。
.index()????????????????????????存儲與指定元素相關的任意數(shù)據(jù)。
.size()??????????????????????????存儲與匹配元素相關的任意數(shù)據(jù)。
.toArray()?????????????????????從隊列最前端移除一個隊列函數(shù),并執(zhí)行它。
jQuery?核心函數(shù)
函數(shù)????????????????????????????描述
jQuery()???????????????????????接受一個字符串,其中包含了用于匹配元素集合的?CSS?選擇器。
jQuery.noConflict()??????????????運行這個函數(shù)將變量?$?的控制權讓渡給第一個實現(xiàn)它的那個庫。
jQuery?事件方法
事件方法會觸發(fā)匹配元素的事件,或將函數(shù)綁定到所有匹配元素的某個事件。
觸發(fā)實例:
$("button#demo").click()
上面的例子將觸發(fā)?id="demo"?的?button?元素的?click?事件。
綁定實例:
[Math Processing Error]("img").hide()})
上面的例子會在點擊?id="demo"?的按鈕時隱藏所有圖像。
方法????????????????????????????描述
bind()??????????????????????????向匹配元素附加一個或更多事件處理器
blur()???????????????????????????觸發(fā)、或將函數(shù)綁定到指定元素的?blur?事件
change()???????????????????????觸發(fā)、或將函數(shù)綁定到指定元素的?change?事件
click()??????????????????????????觸發(fā)、或將函數(shù)綁定到指定元素的?click?事件
dblclick()????????????????????????????觸發(fā)、或將函數(shù)綁定到指定元素的?double click?事件
delegate()????????????????????????????向匹配元素的當前或未來的子元素附加一個或多個事件處理器
die()???????????????????????????????????移除所有通過?live()?函數(shù)添加的事件處理程序。
error()??????????????????????????觸發(fā)、或將函數(shù)綁定到指定元素的?error?事件
event.isDefaultPrevented()????返回?event?對象上是否調用了?event.preventDefault()。
event.pageX??????????????????相對于文檔左邊緣的鼠標位置。
event.pageY??????????????????相對于文檔上邊緣的鼠標位置。
event.preventDefault()???阻止事件的默認動作。
event.result???????????????????包含由被指定事件觸發(fā)的事件處理器返回的最后一個值。
event.target???????????????????觸發(fā)事件的?DOM?元素。
event.timeStamp???????????該屬性返回從?1970?年?1?月?1?日到事件發(fā)生時的毫秒數(shù)。
event.type?????????????????????描述事件的類型。
event.which??????????????????指示按了哪個鍵或按鈕。
focus()?????????????????????????觸發(fā)、或將函數(shù)綁定到指定元素的?focus?事件
keydown()????????????????????觸發(fā)、或將函數(shù)綁定到指定元素的?key down?事件
keypress()?????????????????????觸發(fā)、或將函數(shù)綁定到指定元素的?key press?事件
keyup()????????????????????????觸發(fā)、或將函數(shù)綁定到指定元素的?key up?事件
live()???????????????????????????觸發(fā)、或將函數(shù)綁定到指定元素的?load?事件
load()???????????????????????????觸發(fā)、或將函數(shù)綁定到指定元素的?load?事件
mousedown()????????????????觸發(fā)、或將函數(shù)綁定到指定元素的?mouse down?事件
mouseenter()?????????????????觸發(fā)、或將函數(shù)綁定到指定元素的?mouse enter?事件
mouseleave()????????????????觸發(fā)、或將函數(shù)綁定到指定元素的?mouse leave?事件
mousemove()????????????????觸發(fā)、或將函數(shù)綁定到指定元素的?mouse move?事件
mouseout()???????????????????觸發(fā)、或將函數(shù)綁定到指定元素的?mouse out?事件
mouseover()?????????????????觸發(fā)、或將函數(shù)綁定到指定元素的?mouse over?事件
mouseup()????????????????????觸發(fā)、或將函數(shù)綁定到指定元素的?mouse up?事件
one()????????????????????????????向匹配元素添加事件處理器。每個元素只能觸發(fā)一次該處理器。
ready()?????????????????????????文檔就緒事件(當?HTML?文檔就緒可用時)
resize()?????????????????????????觸發(fā)、或將函數(shù)綁定到指定元素的?resize?事件
scroll()?????????????????????????觸發(fā)、或將函數(shù)綁定到指定元素的?scroll?事件
select()?????????????????????????觸發(fā)、或將函數(shù)綁定到指定元素的?select?事件
submit()???????????????????????觸發(fā)、或將函數(shù)綁定到指定元素的?submit?事件
toggle()????????????????????????綁定兩個或多個事件處理器函數(shù),當發(fā)生輪流的?click?事件時執(zhí)行。
trigger()???????????????????????所有匹配元素的指定事件
triggerHandler()????????????第一個被匹配元素的指定事件
unbind()???????????????????????從匹配元素移除一個被添加的事件處理器
undelegate()??????????????????從匹配元素移除一個被添加的事件處理器,現(xiàn)在或將來
unload()???????????????????????觸發(fā)、或將函數(shù)綁定到指定元素的?unload?事件
總結
以上是生活随笔為你收集整理的jQuery知识汇总的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: jQuery css-dom
- 下一篇: JQuery获取与设置HTML元素的内容