jQuery動畫+實例
1.動畫基礎隱藏和顯示
jQuery中隱藏元素的hide方法javascript
讓頁面上的元素不可見，通常能夠經過設置css的display爲none屬性。可是經過css直接修改是靜態的佈局，若是在代碼執行的時候，通常是經過js控制元素的style屬性，這裏jQuery提供了一個快捷的方法.hide()來達到這個效果css
$elem.hide()
提供參數：java
.hide( options )
當提供hide方法一個參數時，.hide()就會成爲一個動畫方法。.hide()方法將會匹配元素的寬度，高度，以及不透明度，同時進行動畫操做web
快捷參數：算法
.hide("fast / slow")
這是一個動畫設置的快捷方式，’fast’ 和 ‘slow’ 分別表明200和600毫秒的延時，就是元素會執行200/600毫秒的動畫後再隱藏數組
注意：緩存
jQuery在作hide操做的時候，是會保存自己的元素的原始屬性值，再以後經過對應的方法還原的時候仍是初始值。好比一個元素的display屬性值爲inline，那麼隱藏再顯示時，這個元素將再次顯示inline。一旦透明度 達到0，display樣式屬性將被設置爲none，這個元素將再也不在頁面中影響佈局app
<script type="text/javascript">
//點擊buttom1 直接隱藏
$("button:first").click(function() {
$("#a1").hide()
});
</script>
<h4>測試一</h4>
<div id="a2">hide動畫操做</div>
<button>hide帶動畫</button>
<script type="text/javascript">
//點擊buttom2 執行動畫隱藏
$("button:last").click(function() {
$("#a2").hide({
duration: 3000,
complete: function() {
alert('執行3000ms動畫完畢')
}
})
});
</script>
- jQuery中顯示元素的show方法
css中有display:none屬性，同時也有display:block，因此jQuery一樣提供了與hide相反的show方法dom
方法的使用幾乎與hide是一致的，hide是讓元素顯示到隱藏，show則是相反，讓元素從隱藏到顯示異步
看一段代碼：使用上一致，結果相反
$('elem').hide(3000).show(3000)
讓元素執行3秒的隱藏動畫，而後執行3秒的顯示動畫。
show與hide方法是很是經常使用的，可是通常不多會基於這2個屬性執行動畫，大多狀況下仍是直接操做元素的顯示與隱藏爲主
注意事項：
1.show與hide方法是修改的display屬性，經過是visibility屬性佈局須要經過css方法單獨設置
2.若是使用!important在你的樣式中，好比display: none !important，若是你但願.show()方法正常工做，必須使用.css('display', 'block !important')重寫樣式
3.若是讓show與hide成爲一個動畫，那麼默認執行動畫會改變元素的高度，高度，透明度
<script type="text/javascript">
//點擊button
//執行3秒隱藏
//執行3秒顯示
$("button").click(function() {
$("#a1").hide(3000).show(3000)
});
</script>
jQuery中顯示與隱藏切換toggle方法
show與hide是一對互斥的方法。須要對元素進行顯示隱藏的互斥切換，一般狀況是須要先判斷元素的display狀態，而後調用其對應的處理方法。好比顯示的元素，那麼就要調用hide，反之亦然。 對於這樣的操做行爲，jQuery提供了一個便捷方法toggle用於切換顯示或隱藏匹配元素
基本的操做：toggle();
這是最基本的操做，處理元素顯示或者隱藏，由於不帶參數，因此沒有動畫。經過改變CSS的display屬性，匹配的元素將被當即顯示或隱藏，沒有動畫。
若是元素是最初顯示，它會被隱藏 若是隱藏的，它會顯示出來
display屬性將被儲存而且須要的時候能夠恢復。若是一個元素的display值爲inline，而後是隱藏和顯示，這個元素將再次顯示inline
提供參數：.toggle( [duration ] [, complete ] )
一樣的提供了時間、還有動畫結束的回調。在參數對應的時間內，元素會發生顯示/隱藏的改變，在改變的過程當中會把元素的高、寬、不透明度進行一系列動畫效果。這個元素其實就是show與hide的方法
直接定位：.toggle(display)
直接提供一個參數，指定要改變的元素的最終效果
其實就是肯定是使用show仍是hide方法
if ( display === true ) {
$( "elem" ).show();
} else if ( display === false ) {
$( "elem" ).hide();
}
<script type="text/javascript">
$("button:first").click(function() {
$(".left").toggle(3000)
});
</script>
<script type="text/javascript">
$("button:last").click(function() {
$(".right").toggle(3000)
});
</script>
2.上卷下拉效果
jQuery中下拉動畫slideDown
對於隱藏的元素，在將其顯示出來的過程當中，能夠對其進行一些變化的動畫效果。以前學過了show方法，show方法在顯示的過程當中也能夠有動畫，可是.show()方法將會匹配元素的寬度，高度，以及不透明度，同時進行動畫操做。這裏將要學習一個新的顯示方法slideDown方法
.slideDown()：用滑動動畫顯示一個匹配元素
.slideDown()方法將給匹配元素的高度的動畫，這會致使頁面的下面部分滑下去，彌補了顯示的方式
常見的操做，提供一個動畫是時間，而後傳遞一個回調，用於知道動畫是何時結束
.slideDown( [duration ] [, complete ] )
持續時間（duration）是以毫秒爲單位的，數值越大，動畫越慢，不是越快。字符串 ‘fast’ 和 ‘slow’ 分別表明200和600毫秒的延時。若是提供任何其餘字符串，或者這個duration參數被省略，那麼默認使用400 毫秒的延時。
具體使用：
$("ele").slideDown(1000, function() {
//等待動畫執行1秒後,執行別的動做....
});
注意事項：
1.下拉動畫是從無到有，因此一開始元素是須要先隱藏起來的，能夠設置display:none 2.若是提供回調函數參數，callback會在動畫完成的時候調用。將不一樣的動畫串聯在一塊兒按順序排列執行是很是有用的。這個回調函數不設置任何參數，可是 this會設成將要執行動畫的那個DOM元素，若是多個元素一塊兒作動畫效果，那麼要很是注意，回調函數會在每個元素執行完動畫後都執行一次，而不是這組 動畫總體才執行一次
<script type="text/javascript">
//點擊button
//執行3秒隱藏
//執行3秒顯示
$("button:first").click(function() {
$("#a1").slideDown(3000)
});
</script>
<script type="text/javascript">
//點擊button
//執行3秒隱藏
//執行3秒顯示
$("button:last").click(function() {
$("#a2").slideDown(3000,function(){
alert('動畫執行結束')
})
});
</script>
jQuery中上捲動畫slideUp
對於顯示的元素，在將其隱藏的過程當中，能夠對其進行一些變化的動畫效果。以前學過了hide方法，hide方法在顯示的過程當中也能夠有動畫，但 是.hide()方法將爲匹配元素的寬度，高度，以及不透明度，同時進行動畫操做。這裏將要學習一個新的顯示方法slideUp方法
最簡單的使用：不帶參數
$("elem").slideUp();
這個使用的含義就是：找到元素的高度，而後採用一個下滑動畫讓元素一直滑到隱藏，當高度爲0的時候，也就是不可見的時，修改元素display 樣式屬性被設置爲none。這樣就能確保這個元素不會影響頁面佈局了
帶參數：
.slideUp( [duration ] [, easing ] [, complete ] )
一樣能夠提供一個時間，而後可使用一種過渡使用哪一種緩動函數，jQuery默認就2種，能夠經過下載插件支持。最後一個動畫結束的回調方法。
由於動畫是異步的，因此要在動畫以後執行某些操做就必需要寫到回調函數裏面，這裏要特別注意
<script type="text/javascript">
//點擊button
//執行3秒隱藏
//執行3秒顯示
$("button:first").click(function() {
$("#a1").slideUp(3000)
});
</script>
<script type="text/javascript">
//點擊button
//執行3秒隱藏
//執行3秒顯示
$("button:last").click(function() {
$("#a2").slideUp(3000,function(){
alert('動畫執行結束')
})
});
</script>
jQuery中上卷下拉切換slideToggle
slideDown與slideUp是一對相反的方法。須要對元素進行上下拉卷效果的切換，jQuery提供了一個便捷方法slideToggle用滑動動畫顯示或隱藏一個匹配元素
基本的操做：slideToggle();
這是最基本的操做，獲取元素的高度，使這個元素的高度發生改變，從而讓元素裏的內容往下或往上滑。
提供參數：.slideToggle( [duration ] ,[ complete ] )
一樣的提供了時間、還有動畫結束的回調。在參數對應的時間內，元素會完成動畫，而後出發回調函數
同時也提供了時間的快速定義，字符串 ‘fast’ 和 ‘slow’ 分別表明200和600毫秒的延時
slideToggle("fast")
slideToggle("slow")
注意：
1.display屬性值保存在jQuery的數據緩存中，因此display能夠方便之後能夠恢復到其初始值 2.當一個隱藏動畫後，高度值達到0的時候，display 樣式屬性被設置爲none，以確保該元素再也不影響頁面佈局
<script type="text/javascript">
$("button").click(function() {
$("#a1").slideToggle(3000)
});
</script>
3.淡入淡出效果
jQuery中淡出動畫fadeOut
讓元素在頁面不可見，經常使用的辦法就是經過設置樣式的display:none。除此以外還能夠一些相似的辦法能夠達到這個目的。這裏要提一個透明度的方法，設置元素透明度爲0，可讓元素不可見，透明度的參數是0~1之間的值，經過改變這個值可讓元素有一個透明度的效果。常見的淡入淡出動畫正是這樣的原理。
fadeOut()函數用於隱藏全部匹配的元素，並帶有淡出的過渡動畫效果
所謂」淡出」隱藏的，元素是隱藏狀態不對做任何改變，元素是可見的，則將其隱藏。
.fadeOut( [duration ], [ complete ] )
經過不透明度的變化來實現全部匹配元素的淡出效果，並在動畫完成後可選地觸發一個回調函數。這個動畫只調整元素的不透明度，也就是說全部匹配的元素的高度和寬度不會發生變化。
字符串 ‘fast’ 和 ‘slow’ 分別表明200和600毫秒的延時。若是提供任何其餘字符串，或者這個duration參數被省略，那麼默認使用400毫秒的延時
<script type="text/javascript">
//【顯示】按鈕
$("#btnShow").click(function() {
$("p").show();
});
//【隱藏】按鈕
$("#btnFadeOut").click(function() {
var v = $("#animation").val();
if (v == "1") {
$("p").fadeOut();
} else if (v == "2") {
$("p").fadeOut("slow");
} else if (v == "3") {
$("p").fadeOut(3000);
} else if (v == "4") {
$("p").fadeOut(2000, function() {
alert("隱藏完畢!");
});
} else if (v == "5") {
$("p").fadeOut(1000, "linear");
} else if (v == "6") {
$("p").fadeOut({
duration: 1000
});
}
});
</script>
jQuery中淡入動畫fadeIn
fadeOut是淡出效果，相反的還有淡入效果fadeIn,方法使用上二者都是一致的，只是結果相反
.fadeIn( [duration ], [ complete ] )
duration：指定過渡動畫運行多長時間(毫秒數)，默認值爲400。該參數也能夠爲字符串」fast」(=200)或」slow」(=600)。
元素顯示完畢後須要執行的函數。函數內的this指向當前DOM元素。
fadeIn()函數用於顯示全部匹配的元素，並帶有淡入的過渡動畫效果。
注意：
1.淡入的動畫原理：操做元素的不透明度從0%逐漸增長到100% 2.若是元素自己是可見的，不對其做任何改變。若是元素是隱藏的，則使其可見
<script type="text/javascript">
//【顯示】按鈕
$("#btnFadeIn").click(function() {
var v = $("#animation").val();
if (v == "1") {
$("p").fadeIn();
} else if (v == "2") {
$("p").fadeIn("slow");
} else if (v == "3") {
$("p").fadeIn(3000);
} else if (v == "4") {
$("p").fadeIn(2000, function() {
alert("顯示完畢!");
});
} else if (v == "5") {
$("p").fadeIn(1000, "linear");
} else if (v == "6") {
$("p").fadeIn({
duration: 1000
});
}
});
// 【隱藏】按鈕
$("#btnHide").click(function() {
$("p").hide();
});
</script>
jQuery中淡入淡出切換fadeToggle
fadeToggle()函數用於切換全部匹配的元素，並帶有淡入/淡出的過渡動畫效果。以前也學過toggle、slideToggle 也是相似的處理方式
fadeToggle切換fadeOut與fadeIn效果，所謂」切換」，即若是元素當前是可見的，則將其隱藏(淡出)；若是元素當前是隱藏的，則使其顯示(淡入)。
經常使用語法：.fadeToggle( [duration ] ,[ complete ] )
可選的 duration 參數規定效果的時長。它能夠取如下值：」slow」、」fast」 或毫秒。 可選的 callback 參數是 fadeToggle完成後所執行的函數名稱。
fadeToggle() 方法能夠在 fadeIn() 與 fadeOut() 方法之間進行切換。若是元素已淡出，則 fadeToggle() 會向元素添加淡入效果。若是元素已淡入，則 fadeToggle() 會向元素添加淡出效果。
<script type="text/javascript">
//【切換顯示/隱藏】按鈕
$("#btnFadeSwitch").click(function() {
var v = $("#animation").val();
if (v == "1") {
$("p").fadeToggle();
} else if (v == "2") {
$("p").fadeToggle("slow");
} else if (v == "3") {
$("p").fadeToggle(3000);
} else if (v == "4") {
$("p").fadeToggle(1000, function() {
alert("切換完畢!");
});
} else if (v == "5") {
$("p").fadeToggle(1000, "linear");
} else if (v == "6") {
$("p").fadeToggle({
duration: 1000
});
}
});
</script>
jQuery中淡入效果fadeTo
淡入淡出fadeIn與fadeOut都是修改元素樣式的opacity屬性，可是他們都有個共同的特色，變化的區間要麼是0，要麼是1
fadeIn：淡入效果，內容顯示，opacity是0到1
fadeOut：淡出效果，內容隱藏，opacity是1到0
若是要讓元素保持動畫效果，執行opacity = 0.5的效果時，要如何處理？
若是不考慮CSS3，咱們用JS實現的話，基本就是經過定時器，在設定的時間內一點點的修改opacity的值，最終爲0.5，原理雖然說簡單，可是總不如一鍵設置這麼舒服，jQuery提供了fadeTo方法，可讓改變透明度一步到位
語法
.fadeTo( duration, opacity ,callback)
必需的 duration參數規定效果的時長。它能夠取如下值：」slow」、」fast」 或毫秒。fadeTo() 方法中必需的 opacity 參數將淡入淡出效果設置爲給定的不透明度（值介於 0 與 1 之間）。可選的 callback 參數是該函數完成後所執行的函數名稱。
<script type="text/javascript">
//【切換顯示/隱藏】按鈕
$("#btnFadeSwitch").click(function() {
var v = $("#animation").val();
if (v == "1") {
$("p").fadeTo("slow", 0.5);
} else if (v == "2") {
$("p").fadeTo(1000, 0.2);
} else if (v == "3") {
$("p").fadeTo(1000, 0.9, function() {
alert('完成')
});
}
});
</script>
4.動畫切換的比較
jQuery中toggle與slideToggle以及fadeToggle的比較
操做元素的顯示和隱藏能夠有幾種方法。
例如：
1.改變樣式display爲none 2.設置位置高度爲0 3.設置透明度爲0
都能達到這個目的，而且針對這樣的處理jQuery都提供了各自的方法。show/hide、sildeDown/sildeUp、fadeIn/fadeOut。除此以外，還引入了toggle、sildeToggle以及fadeToggle切換方法
toggle、sildeToggle以及fadeToggle的區別：
1.toggle：切換顯示與隱藏效果 2.sildeToggle：切換上下拉卷滾效果 3.fadeToggle：切換淡入淡出效果
固然細節上仍是有更多的不一樣點:
toggle與slideToggle細節區別：
1.toggle：動態效果爲從右至左。橫向動做，toggle經過display來判斷切換全部匹配元素的可見性 2.slideToggle：動態效果從下至上。豎向動做，slideToggle 經過高度變化來切換全部匹配元素的可見性
fadeToggle方法
1.fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之間切換。 2.元素是淡出顯示的，fadeToggle() 會使用淡入效果顯示它們。 3.元素是淡入顯示的，fadeToggle() 會使用淡出效果顯示它們。 4.註釋：隱藏的元素不會被徹底顯示（再也不影響頁面的佈局）
<script type="text/javascript">
$("#btnShow").click(function() {
var v = $("#animation").val();
if (v == "1") {
$("p").toggle();
} else if (v == "2") {
$("p").slideToggle("slow");
} else if (v == "3") {
$("p").fadeToggle(1000, "linear");
}
});
</script>
5.自定義動畫
jQuery中動畫animate(上)
有些複雜的動畫經過以前學到的幾個動畫函數是不可以實現，這時候就須要強大的animate方法了
操做一個元素執行3秒的淡入動畫，對比一下2組動畫設置的區別
$(elem).fadeOut(3000)
$(elem).animate({
opacity:0
},3000)
顯而易見，animate方法更加靈活了，能夠精確的控制樣式屬性從而執行動畫
語法：
.animate( properties ,[ duration ], [ easing ], [ complete ] ) .animate( properties, options )
.animate()方法容許咱們在任意的數值的CSS屬性上建立動畫。2種語法使用，幾乎差很少了，惟一必要的屬性就是一組CSS屬性鍵值對。這組屬性和用於設置.css()方法的屬性鍵值對相似，除了屬性範圍作了更多限制。第二個參數開始能夠單獨傳遞多個實參也能夠合併成一個對象傳遞了
參數分解：
properties：一個或多個css屬性的鍵值對所構成的Object對象。要特別注意全部用於動畫的屬性必須是數字的，除非另有說明；這些屬性若是不是數字的將不能使用基本的jQuery功能。好比常見的，border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等這些都是能產生動畫效果的。background-color很明顯不能夠，由於參數是red或者GBG這樣的值，很是用插件，不然正常狀況下是不能只用動畫效果的。注意，CSS 樣式使用 DOM 名稱（好比 「fontSize」）來設置，而非 CSS 名稱（好比 「font-size」）。
特別注意單位，屬性值的單位像素（px）,除非另有說明。單位em 和 %須要指定使用
.animate({
left: 50,
width: '50px'
opacity: 'show',
fontSize: "10em",
}, 500);
除了定義數值，每一個屬性能使用’show’, ‘hide’, 和 ‘toggle’。這些快捷方式容許定製隱藏和顯示動畫用來控制元素的顯示或隱藏
.animate({
width: "toggle"
});
若是提供一個以+= 或 -=開始的值，那麼目標值就是以這個屬性的當前值加上或者減去給定的數字來計算的
.animate({
left: '+=50px'
}, "slow");
duration時間
動畫執行的時間，持續時間是以毫秒爲單位的；值越大表示動畫執行的越慢，不是越快。還能夠提供’fast’ 和 ‘slow’字符串，分別表示持續時間爲200 和 600毫秒。
easing動畫運動的算法
jQuery庫中默認調用 swing。若是須要其餘的動畫算法，請查找相關的插件
complete回調
動畫完成時執行的函數，這個能夠保證當前動畫肯定完成後發會觸發
<script type="text/javascript">
$("#exec").click(function() {
var v = $("#animation").val();
var $aaron = $("#aaron");
if (v == "1") {
// 數值的單位默認是px
$aaron.animate({
width :300,
height :300
});
} else if (v == "2") {
// 在現有高度的基礎上增長100px
$aaron.animate({
width : "+=100px",
height : "+=100px"
});
} else if (v == "3") {
$aaron.animate({
fontSize: "5em"
}, 2000, function() {
alert("動畫 fontSize執行完畢!");
});
} else if (v == "4") {
//經過toggle參數切換高度
$aaron.animate({
width: "toggle"
});
}
});
</script>
jQuery中動畫animate(下)
animate在執行動畫中，若是須要觀察動畫的一些執行狀況，或者在動畫進行中的某一時刻進行一些其餘處理，咱們能夠經過animate提供的第二種設置語法，傳遞一個對象參數，能夠拿到動畫執行狀態一些通知
.animate( properties, options )
options參數
duration - 設置動畫執行的時間 easing - 規定要使用的 easing 函數，過渡使用哪一種緩動函數 step：規定每一個動畫的每一步完成以後要執行的函數 progress：每一次動畫調用的時候會執行這個回調，就是一個進度的概念 complete：動畫完成回調
其中最關鍵的一點就是：
若是多個元素執行動畫，回調將在每一個匹配的元素上執行一次，不是做爲整個動畫執行一次
列出經常使用的方式：
$('#elem').animate({
width: 'toggle',
height: 'toggle'
}, {
duration: 5000,
specialEasing: {
width: 'linear',
height: 'easeOutBounce'
},
complete: function() {
$(this).after('<div>Animation complete.</div>');
}
});
<script type="text/javascript">
$("#exec").click(function() {
var v = $("#animation").val();
var $aaron = $("#aaron");
if (v == "1") {
//觀察每一次動畫的改變
$aaron.animate({
height: '50'
}, {
duration :2000,
//每個動畫都會調用
step: function(now, fx) {
$aaron.text('高度的改變值:'+now)
}
})
} else if (v == "2") {
//觀察每一次進度的變化
$aaron.animate({
height: '50'
}, {
duration :2000,
//每一步動畫完成後調用的一個函數，
//不管動畫屬性有多少，每一個動畫元素都執行單獨的函數
progress: function(now, fx) {
$aaron.text('進度:'+arguments[1])
var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
alert(data)
}
})
}
});
</script>
- jQuery中中止動畫stop
動畫在執行過程當中是容許被暫停的，當一個元素調用.stop()方法，當前正在運行的動畫（若是有的話）當即中止
語法：
.stop( [clearQueue ], [ jumpToEnd ] ) .stop( [queue ], [ clearQueue ] ,[ jumpToEnd ] )
stop還有幾個可選的參數，簡單來講能夠這3種狀況
1..stop(); 中止當前動畫，點擊在暫停處繼續開始 2..stop(true); 若是同一元素調用多個動畫方法，還沒有被執行的動畫被放置在元素的效果隊列中。這些動畫不會開始，直到第一個完成。當調用.stop()的時候，隊列中的下一個動畫當即開始。若是clearQueue參數提供true值,那麼在隊列中的動畫其他被刪除並永遠不會運行 3..stop(true,true); 當前動畫將中止，但該元素上的 CSS 屬性會被馬上修改爲動畫的目標值
簡單的說：參考下面代碼、
$("#aaron").animate({
height: 300
}, 5000)
$("#aaron").animate({
width: 300
}, 5000)
$("#aaron").animate({
opacity: 0.6
}, 2000)
stop()：只會中止第一個動畫，第二個第三個繼續 stop(true)：中止第一個、第二個和第三個動畫 stop(true ture)：中止動畫，直接跳到第一個動畫的最終狀態
<script type="text/javascript">
//點擊執行動畫
$("#exec").click(function(){
$("#aaron").animate({
height: 300
}, 5000)
$("#aaron").animate({
width: 300
}, 5000)
$("#aaron").animate({
opacity: 0.6
}, 2000)
})
$("#stop").click(function() {
var v = $("#animation").val();
var $aaron = $("#aaron");
if (v == "1") {
//當前當前動畫
$aaron.stop()
} else if (v == "2") {
//中止因此隊列
$aaron.stop(true)
} else if (v == "3") {
//中止動畫，直接跳到當前動畫的結束
$aaron.stop(true,true)
}
});
</script>
jQuery中each方法的應用
jQuery中有個很重要的核心方法each，大部分jQuery方法在內部都會調用each，其主要的緣由的就是jQuery的實例是一個元素合集
以下：找到全部的div，而且都設置樣式，css只是一個方法，因此內部會調用each處理這個div的合集，給每一個div都設置style屬性
$('div').css(...)
- jQuery的大部分方法都是針元素合集的操做，因此jQuery會提供
$(selector).each()來遍歷jQuery對象
.each只是處理jQuery對象的方法，jQuery還提供了一個通用的jQuery.each方法，用來處理對象和數組的遍歷
語法
jQuery.each(array, callback ) jQuery.each( object, callback )
- 第一個參數傳遞的就是一個對象或者數組，第二個是回調函數
$.each(["aron", "博客網"], function(index, value) {
//index是索引,也就是數組的索引
//value就是數組中的值了
});
each就是for循環方法的一個包裝，內部就是經過for遍歷數組與對象，經過回調函數返回內部迭代的一些參數，第一個參數是當前迭代成員在對象或數組中的索引值(從0開始計數)，第二個參數是當前迭代成員(與this的引用相同）
jQuery.each()函數還會根據每次調用函數callback的返回值來決定後續動做。若是返回值爲false，則中止循環(至關於普通循環中的break)；若是返回其餘任何值，均表示繼續執行下一個循環。
$.each(["aron", "博客網"], function(index, value) {
return false; //中止迭代
});
jQuery方法能夠很方便的遍歷一個數據，不須要考慮這個數據是對象仍是數組
<script type="text/javascript">
$("#exec").click(function() {
var v = $("#animation").val();
var $aaron = $("#aaron");
$aaron.empty();
if (v == "1") {
// 遍歷數組元素
$.each(['Aaron', '博客網'], function(i, item) {
$aaron.append("索引=" + i + "; 元素=" + item);
});
} else if (v == "2") {
// 遍歷對象屬性
$.each({
name: "張三",
age: 18
}, function(property, value) {
$aaron.append("屬性名=" + property + "; 屬性值=" + value);
});
}
});
</script>
- jQuery中查找數組中的索引inArray
在PHP有in_array()判斷某個元素是否存在數組中，JavaScript卻沒有，可是jQuery封裝了inArray()函數判斷元素是否存在數組中。注意了：在ECMAScript5已經有數據的indexOf方法支持了，可是jQuery保持了版本向下兼容，因此封裝了一個inArray方法
jQuery.inArray()函數用於在數組中搜索指定的值，並返回其索引值。若是數組中不存在該值，則返回 -1。
語法：
jQuery.inArray( value, array ,[ fromIndex ] )
用法很是簡單，傳遞一個檢測的目標值，而後傳遞原始的數組，能夠經過fromIndex規定查找的起始值，默認數組是0開始
例如：在數組中查找值是5的索引
$.inArray(5,[1,2,3,4,5,6,7]) //返回對應的索引：4
注意：
若是要判斷數組中是否存在指定值，你須要經過該函數的返回值不等於(或大於)-1來進行判斷
<script type="text/javascript">
$("#exec").click(function() {
var v = $("#animation").val();
var $aaron = $("#aaron");
$aaron.empty();
if (v == "1") {
var index = $.inArray('csdn',['test','csdn', 'array','博客網']);
$aaron.text('csdn的索引是: '+ index)
} else if (v == "2") {
//指定索引開始的位置
var index = $.inArray('a',['a','b','c','d','a','c'],2);
$aaron.text('a的索引是: '+ index)
}
});
</script>
jQuery中去空格神器trim方法
頁面中，經過input能夠獲取用戶的輸入值，例如常見的登陸信息的提交處理。用戶的輸入不必定是標準的，輸入一段密碼：’ 1123456 「，注意了： 密碼的先後會留空，這多是用戶的無意的行爲，可是密碼確實又沒錯，針對這樣的行爲，開發者應該要判斷輸入值的先後是否有空白符、換行符、製表符這樣明顯的無心義的輸入值。
jQuery.trim()函數用於去除字符串兩端的空白字符
這個函數很簡單，沒有多餘的參數用法
須要注意：
1.移除字符串開始和結尾處的全部換行符，空格(包括連續的空格)和製表符（tab） 2.若是這些空白字符在字符串中間時，它們將被保留，不會被移除
<script type="text/javascript">
$("#exec1").click(function() {
alert("值的長度：" + $("#results1").val().length)
});
$("#exec2").click(function() {
alert("值的長度：" + $.trim($("#results2").val()).length)
});
</script>
jQuery中DOM元素的獲取get方法
jQuery是一個合集對象，若是須要單獨操做合集中的的某一個元素，能夠經過.get()方法獲取到
如下有3個a元素結構：
<a>1</a> <a>2</a> <a>3</a>
經過jQuery獲取全部的a元素合集$("a")，若是想進一步在合集中找到第二2個dom元素單獨處理，能夠經過get方法
語法：
.get( [index ] )
注意2點
1.get方法是獲取的dom對象，也就是經過document.getElementById獲取的對象 2.get方法是從0開始索引
因此第二個a元素的查找： $(a).get(1)
負索引值參數
get方法還能夠從後往前索引，傳遞一個負索引值，注意的負值的索引發始值是-1
一樣是找到第二元素，能夠傳遞 $(a).get(-2)
<script type="text/javascript">
$("#exec").click(function() {
var v = $("#animation").val();
var $aaron = $("#aaron a");
//經過get找到第二個a元素，並修改藍色字體
if (v == "1") {
$aaron.get(1).style.color = "blue"
} else if (v == "2") {
//經過get找到最後一個a元素，並修改字體顏色
$aaron.get(-1).style.color = "#8A2BE2"
}
});
</script>
jQuery中DOM元素的獲取index方法
get方法是經過已知的索引在合集中找到對應的元素。若是反過來，已知元素如何在合集中找到對應的索引呢？
.index()方法，從匹配的元素中搜索給定元素的索引值，從0開始計數。
語法：參數接受一個jQuery或者dom對象做爲查找的條件
.index() .index( selector ) .index( element )
1.若是不傳遞任何參數給 .index() 方法，則返回值就是jQuery對象中第一個元素相對於它同輩元素的位置 2.若是在一組元素上調用 .index() ，而且參數是一個DOM元素或jQuery對象， .index() 返回值就是傳入的元素相對於原先集合的位置 3.若是參數是一個選擇器， .index() 返回值就是原先元素相對於選擇器匹配元素的位置。若是找不到匹配的元素，則 .index() 返回 -1
簡單來講：
<ul>
<a></a>
<li id="test1">1</li>
<li id="test2">2</li>
<li id="test3">3</li>
</ul>
$("li").index() 沒有傳遞參數，反正的結果是1，它的意思是返回同輩的排列循序，第一個li以前有a元素,同輩元素是a開始爲0，因此li的開始索引是1
若是要快速找到第二個li在列表中的索引,能夠經過以下2種方式處理
$("li").index(document.getElementById("test2")) //結果：1
$("li").index($("#test2")) //結果:1
<script type="text/javascript">
$("#exec").click(function() {
var v = $("#animation").val();
var $span = $("span");
$span.empty();
if (v == "1") {
//找到第一個li的同輩節點中的索引位置
$span.text($("li").index())
} else if (v == "2") {
//經過傳遞dom查找
$span.text($("li").index(document.getElementById("test5")))
} else if (v == "3") {
//經過傳遞jQuery對象查找
$span.text($("li").index($("#test6")))
}
});
</script>
- 1. 10個jQuery動畫實例
- 2. JQuery 動畫實現
- 3. jquery實現動畫效果
- 4. jQuery動畫的實現
- 5. jQuery動畫效果實現
- 6. jQuery Animation實現CSS3動畫
- 7. jquery實現css3動畫
- 8. JQuery——實現動畫效果
- 9. JQuery 現實動畫效果
- 10. jQuery實現跨界動畫
- 更多相關文章...
- • jQuery Mobile 實例 - jQuery Mobile 教程
- • ionic 加載動畫 - ionic 教程
- • 算法總結-滑動窗口
- • SpringBoot中properties文件不能自動提示解決方法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 10個jQuery動畫實例
- 2. JQuery 動畫實現
- 3. jquery實現動畫效果
- 4. jQuery動畫的實現
- 5. jQuery動畫效果實現
- 6. jQuery Animation實現CSS3動畫
- 7. jquery實現css3動畫
- 8. JQuery——實現動畫效果
- 9. JQuery 現實動畫效果
- 10. jQuery實現跨界動畫