1.toggle有兩種形式
(1)toggle()用于切換元素的可見(jiàn)性,如果被選元素可見(jiàn),則隱藏這些元素,如果被選元素不可見(jiàn),則顯示這些元素。
如:
<body>
<p id="content">當(dāng)點(diǎn)擊上面的“點(diǎn)擊這里字樣”,這里的內(nèi)容將隱藏與顯示切換</p>
<input type="button" id="test" value="點(diǎn)擊這里"></input>
</body>
$(document).ready(function(){
$("#test").click(function(){
$("#content").toggle();
});
});
(2)toggle(f(n),f(m)) 效果是:每次點(diǎn)擊后依次調(diào)用函數(shù);如果點(diǎn)擊了一個(gè)匹配的元素,則觸發(fā)指定的第一個(gè)函數(shù),當(dāng)再次點(diǎn)擊同一元素時(shí),則觸發(fā)指定的第二個(gè)函數(shù),如果有更多函數(shù),則再次觸發(fā),直到最后一個(gè)。隨后的每次點(diǎn)擊都重復(fù)對(duì)這幾個(gè)函數(shù)的輪番調(diào)用.
<body>
<p id="content">當(dāng)點(diǎn)擊上面的“點(diǎn)擊這里字樣”,這里的內(nèi)容顏色將切換</p>
<input type="button" id="test" value="點(diǎn)擊這里"></input>
</body>
樣式:
.bg{color:#ff0;}
.cg{color:#f0f;}
$(document).ready(function(){
$("#test").toggle(
function(){
$("#content").addClass("bg");
},
function(){
$("#content").removeClass("bg");
},
function(){
$("#content").addClass("cg");
});
});
當(dāng)然這里不能循環(huán)執(zhí)行,應(yīng)為當(dāng)執(zhí)行完addClass("cg")時(shí)就得執(zhí)行addClass("bg")這是錯(cuò)誤的,應(yīng)該在將cg樣式去掉就ok啦,可以在下面在加一個(gè)去掉的函數(shù)。
2.hover一個(gè)模仿懸停事件(鼠標(biāo)移動(dòng)到一個(gè)對(duì)象上面及移出這個(gè)對(duì)象)的方法,效果:當(dāng)鼠標(biāo)移動(dòng)到一個(gè)匹配的元素上面時(shí),會(huì)觸發(fā)指定的第一個(gè)函數(shù)。當(dāng)鼠標(biāo)移出這個(gè)元素時(shí),會(huì)觸發(fā)指定的第二個(gè)函數(shù)。而且,會(huì)伴隨著對(duì)鼠標(biāo)是否仍然處在特定元素中的檢測(cè)(例如,處在div中的圖像),如果是,則會(huì)繼續(xù)保持“懸停”狀態(tài),而不觸發(fā)移出事件(修正了使用mouseout事件的一個(gè)常見(jiàn)錯(cuò)誤)。
$("#content").hover(function(){
$(this).addClass("bg");},
function(){
$(this).removeClass("bg");
});
這里只寫(xiě)這兩個(gè)例子,其他的參加下面的事件匯總。來(lái)源:
http://www.cnblogs.com/EricChan/archive/2011/02/01/1948534.html
方法 描述
ready() 文檔就緒事件(當(dāng) HTML 文檔就緒可用時(shí))
blur() 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 blur 事件
change() 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 change 事件
click() 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 click 事件
dblclick() 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 double click 事件
error() 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 error 事件
focus() 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 focus 事件
keydown() 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 key down 事件
keypress() 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 key press 事件
keyup() 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 key up 事件
load() 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 load 事件
mousedown() 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 mouse down 事件
mouseenter() 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 mouse enter 事件
mouseleave() 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 mouse leave 事件
mousemove() 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 mouse move 事件
mouseout() 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 mouse out 事件
mouseover() 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 mouse over 事件
mouseup() 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 mouse up 事件
resize() 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 resize 事件
scroll() 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 scroll 事件
select() 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 select 事件
submit() 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 submit 事件
unload() 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 unload 事件
jQuery 事件處理方法
事件處理方法把事件處理器綁定至匹配元素。
方法 觸發(fā)
$(selector).bind(event) 向匹配元素添加一個(gè)或更多事件處理器
$(selector).delegate(selector, event) 向匹配元素添加一個(gè)事件處理器,現(xiàn)在或?qū)?lái)
$(selector).die() 移除所有通過(guò) live() 函數(shù)添加的事件處理器
$(selector).live(event) 向匹配元素添加一個(gè)事件處理器,現(xiàn)在或?qū)?lái)
$(selector).one(event) 向匹配元素添加一個(gè)事件處理器。該處理器只能觸發(fā)一次。
$(selector).unbind(event) 從匹配元素移除一個(gè)被添加的事件處理器
$(selector).undelegate(event) 從匹配元素移除一個(gè)被添加的事件處理器,現(xiàn)在或?qū)?lái)
$(selector).trigger(event) 所有匹配元素的指定事件
$(selector).triggerHandler(event) 第一個(gè)被匹配元素的指定事件
jQuery 效果函數(shù)
Hide / Show 描述
show() 顯示被選的元素
hide() 隱藏被選的元素
toggle() 對(duì)被選元素進(jìn)行隱藏和顯示的切換
Slide
slideDown() 通過(guò)調(diào)整高度來(lái)滑動(dòng)顯示被選元素
slideUp() 通過(guò)調(diào)整高度來(lái)滑動(dòng)隱藏被選元素
slideToggle() 對(duì)被選元素進(jìn)行滑動(dòng)隱藏和滑動(dòng)顯示的切換
Fade in / out
fadeIn() 淡入被選元素至完全不透明
fadeOut() 淡出被選元素至完全不透明
fadeTo() 把被選元素減弱至給定的不透明度
Animation
animate() 對(duì)被選元素應(yīng)用“自定義”的動(dòng)畫(huà)
stop() 停止在被選元素上運(yùn)行動(dòng)畫(huà)
Queue
clearQueue() 對(duì)被選元素移除所有排隊(duì)的函數(shù)(仍未運(yùn)行的)
delay() 對(duì)被選元素的所有排隊(duì)函數(shù)(仍未運(yùn)行)設(shè)置延遲
dequeue() 運(yùn)行被選元素的下一個(gè)排隊(duì)函數(shù)
queue() 顯示被選元素的排隊(duì)函數(shù)
jQuery 文檔操作方法
這些方法對(duì)于 XML 文檔和 HTML 文檔均是適用的,除了:html()。
方法 描述
addClass() 向匹配的元素添加指定的類(lèi)名。
after() 在匹配的元素之后插入內(nèi)容。
append() 向匹配的元素內(nèi)部追加內(nèi)容。
appendTo() 向匹配的元素內(nèi)部追加內(nèi)容。
attr() 設(shè)置或返回匹配元素的屬性和值。
before() 在每個(gè)匹配的元素之前插入內(nèi)容。
clone() 創(chuàng)建匹配元素集合的副本。
detach() 從 DOM 中移除匹配元素集合。
empty() 刪除匹配的元素集合中所有的子節(jié)點(diǎn)。
hasClass() 檢查匹配的元素是否擁有指定的類(lèi)。
html() 設(shè)置或返回匹配的元素集合中的 HTML 內(nèi)容。
insertAfter() 把匹配的元素插入到另一個(gè)指定的元素集合的后面。
insertBefore() 把匹配的元素插入到另一個(gè)指定的元素集合的前面。
prepend() 向每個(gè)匹配的元素內(nèi)部前置內(nèi)容。
prependTo() 向每個(gè)匹配的元素內(nèi)部前置內(nèi)容。
remove() 移除所有匹配的元素。
removeAttr() 從所有匹配的元素中移除指定的屬性。
removeClass() 從所有匹配的元素中刪除全部或者指定的類(lèi)。
replaceAll() 用匹配的元素替換所有匹配到的元素。
replaceWith() 用新內(nèi)容替換匹配的元素。
text() 設(shè)置或返回匹配元素的內(nèi)容。
toggleClass() 從匹配的元素中添加或刪除一個(gè)類(lèi)。
unwrap() 移除并替換指定元素的父元素。
val() 設(shè)置或返回匹配元素的值。
wrap() 把匹配的元素用指定的內(nèi)容或元素包裹起來(lái)。
wrapAll() 把所有匹配的元素用指定的內(nèi)容或元素包裹起來(lái)。
wrapinner() 將每一個(gè)匹配的元素的子內(nèi)容用指定的內(nèi)容或元素包裹起來(lái)。
jQuery 屬性操作方法
下面列出的這些方法獲得或設(shè)置元素的 DOM 屬性。
這些方法對(duì)于 XML 文檔和 HTML 文檔均是適用的,除了:html()。
方法 描述
addClass() 向匹配的元素添加指定的類(lèi)名。
attr() 設(shè)置或返回匹配元素的屬性和值。
hasClass() 檢查匹配的元素是否擁有指定的類(lèi)。
html() 設(shè)置或返回匹配的元素集合中的 HTML 內(nèi)容。
removeAttr() 從所有匹配的元素中移除指定的屬性。
removeClass() 從所有匹配的元素中刪除全部或者指定的類(lèi)。
toggleClass() 從匹配的元素中添加或刪除一個(gè)類(lèi)。
val() 設(shè)置或返回匹配元素的值。
注釋?zhuān)簀Query 文檔操作參考手冊(cè)中也列出了以上方法。本參考頁(yè)的作用是方便用戶單獨(dú)查閱有關(guān)屬性操作方面的方法。
jQuery CSS 操作函數(shù)
下面列出的這些方法設(shè)置或返回元素的 CSS 相關(guān)屬性。
CSS 屬性 描述
css() 設(shè)置或返回匹配元素的樣式屬性。
height() 設(shè)置或返回匹配元素的高度。
offset() 返回第一個(gè)匹配元素相對(duì)于文檔的位置。
offsetParent() 返回最近的定位祖先元素。
position() 返回第一個(gè)匹配元素相對(duì)于父元素的位置。
scrollTop() 設(shè)置或返回匹配元素相對(duì)滾動(dòng)條頂部的偏移。
scrollLeft() 設(shè)置或返回匹配元素相對(duì)滾動(dòng)條左側(cè)的偏移。
width() 設(shè)置或返回匹配元素的寬度。
jQuery Ajax 操作函數(shù)
jQuery 庫(kù)擁有完整的 Ajax 兼容套件。其中的函數(shù)和方法允許我們?cè)诓凰⑿聻g覽器的情況下從服務(wù)器加載數(shù)據(jù)。
函數(shù) 描述
jQuery.ajax() 執(zhí)行異步 HTTP (Ajax) 請(qǐng)求。
.ajaxComplete() 當(dāng) Ajax 請(qǐng)求完成時(shí)注冊(cè)要調(diào)用的處理程序。這是一個(gè) Ajax 事件。
.ajaxError() 當(dāng) Ajax 請(qǐng)求完成且出現(xiàn)錯(cuò)誤時(shí)注冊(cè)要調(diào)用的處理程序。這是一個(gè) Ajax 事件。
.ajaxSend() 在 Ajax 請(qǐng)求發(fā)送之前顯示一條消息。
jQuery.ajaxSetup() 設(shè)置將來(lái)的 Ajax 請(qǐng)求的默認(rèn)值。
.ajaxStart() 當(dāng)首個(gè) Ajax 請(qǐng)求完成開(kāi)始時(shí)注冊(cè)要調(diào)用的處理程序。這是一個(gè) Ajax 事件。
.ajaxStop() 當(dāng)所有 Ajax 請(qǐng)求完成時(shí)注冊(cè)要調(diào)用的處理程序。這是一個(gè) Ajax 事件。
.ajaxSuccess() 當(dāng) Ajax 請(qǐng)求成功完成時(shí)顯示一條消息。
jQuery.get() 使用 HTTP GET 請(qǐng)求從服務(wù)器加載數(shù)據(jù)。
jQuery.getJSON() 使用 HTTP GET 請(qǐng)求從服務(wù)器加載 JSON 編碼數(shù)據(jù)。
jQuery.getScript() 使用 HTTP GET 請(qǐng)求從服務(wù)器加載 JavaScript 文件,然后執(zhí)行該文件。
.load() 從服務(wù)器加載數(shù)據(jù),然后把返回到 HTML 放入匹配元素。
jQuery.param() 創(chuàng)建數(shù)組或?qū)ο蟮男蛄谢硎荆m合在 URL 查詢字符串或 Ajax 請(qǐng)求中使用。
jQuery.post() 使用 HTTP POST 請(qǐng)求從服務(wù)器加載數(shù)據(jù)。
.serialize() 將表單內(nèi)容序列化為字符串。
.serializeArray() 序列化表單元素,返回 JSON 數(shù)據(jù)結(jié)構(gòu)數(shù)據(jù)。
jQuery 遍歷函數(shù)
jQuery 遍歷函數(shù)包括了用于篩選、查找和串聯(lián)元素的方法。
函數(shù) |
描述 |
.add() |
將元素添加到匹配元素的集合中。 |
.andSelf() |
把堆棧中之前的元素集添加到當(dāng)前集合中。 |
.children() |
獲得匹配元素集合中每個(gè)元素的所有子元素。 |
.closest() |
從元素本身開(kāi)始,逐級(jí)向上級(jí)元素匹配,并返回最先匹配的祖先元素。 |
.contents() |
獲得匹配元素集合中每個(gè)元素的子元素,包括文本和注釋節(jié)點(diǎn)。 |
.each() |
對(duì) jQuery 對(duì)象進(jìn)行迭代,為每個(gè)匹配元素執(zhí)行函數(shù)。 |
.end() |
結(jié)束當(dāng)前鏈中最近的一次篩選操作,并將匹配元素集合返回到前一次的狀態(tài)。 |
.eq() |
將匹配元素集合縮減為位于指定索引的新元素。 |
.filter() |
將匹配元素集合縮減為匹配選擇器或匹配函數(shù)返回值的新元素。 |
.find() |
獲得當(dāng)前匹配元素集合中每個(gè)元素的后代,由選擇器進(jìn)行篩選。 |
.first() |
將匹配元素集合縮減為集合中的第一個(gè)元素。 |
.has() |
將匹配元素集合縮減為包含特定元素的后代的集合。 |
.is() |
根據(jù)選擇器檢查當(dāng)前的匹配元素集合,如果存在至少一個(gè)匹配元素,則返回 true。 |
.last() |
將匹配元素集合縮減為集合中的最后一個(gè)元素。 |
.map() |
把當(dāng)前匹配集合中的每個(gè)元素傳遞給一個(gè)函數(shù),產(chǎn)生包含返回值的新的 jQuery 對(duì)象。 |
.next() |
獲得匹配元素集合中每個(gè)元素緊鄰的同輩元素。 |
.nextAll() |
獲得匹配元素集合中每個(gè)元素之后的所有同輩元素,由選擇器進(jìn)行篩選(可選)。 |
.nextUntil() |
獲得每個(gè)元素之后所有的同輩元素,直到遇到匹配選擇器的元素為止。 |
.not() |
從匹配元素集合中刪除元素。 |
.offsetParent() |
獲得用于定位的第一個(gè)父元素。 |
.parent() |
獲得當(dāng)前匹配元素集合中每個(gè)元素的父元素,由選擇器篩選(可選)。 |
.parentsUntil() |
獲得當(dāng)前匹配元素集合中每個(gè)元素的祖先元素,直到遇到匹配選擇器的元素為止。 |
.prev() |
獲得匹配元素集合中每個(gè)元素緊鄰的前一個(gè)同輩元素,由選擇器篩選(可選)。 |
.prevAll() |
獲得匹配元素集合中每個(gè)元素之前的所有同輩元素,由選擇器進(jìn)行篩選(可選)。 |
.prevUntil() |
獲得每個(gè)元素之前所有的同輩元素,直到遇到匹配選擇器的元素為止。 |
.siblings() |
獲得匹配元素集合中所有元素的同輩元素,由選擇器篩選(可選)。 |
.slice() |
將匹配元素集合縮減為指定范圍的子集。 |
jQuery 數(shù)據(jù)存儲(chǔ)函數(shù)
這些方法允許我們將指定的 DOM 元素與任意數(shù)據(jù)相關(guān)聯(lián)。
函數(shù) |
描述 |
.data() |
存儲(chǔ)與匹配元素相關(guān)的任意數(shù)據(jù)。 |
jQuery.data() |
存儲(chǔ)與指定元素相關(guān)的任意數(shù)據(jù)。 |
.removeData() |
移除之前存放的數(shù)據(jù)。 |
jQuery.removeData() |
移除之前存放的數(shù)據(jù)。 |
jQuery 隊(duì)列控制函數(shù)
函數(shù) |
描述 |
.clearQueue() |
從隊(duì)列中刪除所有未運(yùn)行的項(xiàng)目。 |
.dequeue() |
從隊(duì)列最前端移除一個(gè)隊(duì)列函數(shù),并執(zhí)行它。 |
jQuery.dequeue() |
從隊(duì)列最前端移除一個(gè)隊(duì)列函數(shù),并執(zhí)行它。 |
.queue() |
顯示或操作匹配元素所執(zhí)行函數(shù)的隊(duì)列。 |
jQuery.queue() |
顯示或操作匹配元素所執(zhí)行函數(shù)的隊(duì)列。 |