009_jQuery链式编程
生活随笔
收集整理的這篇文章主要介紹了
009_jQuery链式编程
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1. jQuery方法鏈接
1.1. 有一種名為鏈接(chaining)的技術(shù), 允許我們在相同的元素上運(yùn)行多條jQuery命令, 一條接著另一條。
1.2. 這樣的話, 瀏覽器就不必多次查找相同的元素。
1.3. 如需鏈接一個(gè)動作, 您只需簡單地把該動作追加到之前的動作上。
1.4. 下面的例子, 把fadeOut()、fadeIn()、slideUp()和slideDown()鏈接在一起。id為"p1"元素首先會隱藏, 然后會顯示, 再然后向上滑動, 最后向下滑動:
$("#p1").fadeOut().fadeIn().slideUp().slideDown();1.5. 當(dāng)進(jìn)行鏈接時(shí), 代碼行會變得很差。不過, jQuery在語法上不是很嚴(yán)格; 您可以按照希望的格式來寫, 包含折行和縮進(jìn)。
$("#p1").fadeOut().fadeIn().slideUp().slideDown();2. 例子
2.1. 代碼
<!DOCTYPE html> <html><head><title>jQuery鏈?zhǔn)骄幊?lt;/title><meta charset="utf-8" /><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){$("div").hide('normal').show('slow').fadeOut(2000).fadeIn('fast').slideUp().slideDown();});});</script></head><body><button id="btn1">執(zhí)行多個(gè)效果</button><br /><br /><div style="background-color: red; width:300px; height: 150px;">jQuery鏈?zhǔn)骄幊?lt;/div></body> </html>2.2. 效果圖
總結(jié)
以上是生活随笔為你收集整理的009_jQuery链式编程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 008_效果和动画的Callback函数
- 下一篇： 001_Ajax简介