隱藏與顯示
.hide() 隱藏某個元素
.hide("fast / slow") //這是一個動畫設(shè)置的快捷方式摊欠，'fast' 和 'slow' 分別代表200和600毫秒的延時欺税，就是元素會執(zhí)行200/600毫秒的動畫后再隱藏
$("#a2").hide({
duration: 3000,
complete: function() {
alert('執(zhí)行3000ms動畫完畢')
}
})
注意
- jQuery在做hide操作的時候憨奸，是會保存本身的元素的原始屬性值，再之后通過對應(yīng)的方法還原的時候還是初始值崭孤。比如一個元素的display屬性值為inline曲楚，那么隱藏再顯示時裂七，這個元素將再次顯示inline。一旦透明度 達(dá)到0家破，display樣式屬性將被設(shè)置為none颜说，這個元素將不再在頁面中影響布局
.show() 顯示(用法和 hide 類似)
注意
- show與hide方法是修改的display屬性，通過是visibility屬性布局需要通過css方法單獨(dú)設(shè)置
- 如果使用!important在你的樣式中汰聋，比如display: none !important门粪，如果你希望.show()方法正常工作，必須使用.css('display', 'block !important')重寫樣式
- 如果讓show與hide成為一個動畫烹困，那么默認(rèn)執(zhí)行動畫會改變元素的高度玄妈，高度，透明度
.toggle() 對 hide 和 show 進(jìn)行切換
如果元素是最初顯示髓梅，它會被隱藏
如果隱藏的拟蜻，它會顯示出來
$(".test").toggle(3000) //3000毫秒隱藏 在3000毫秒顯示
上卷下拉
.slideDown()：用滑動動畫顯示一個匹配元素
.slideDown()方法將給匹配元素的高度的動畫，這會導(dǎo)致頁面的下面部分滑下去枯饿，彌補(bǔ)了顯示的方式
$("ele").slideDown(1000, function() {
//等待動畫執(zhí)行1秒后,執(zhí)行別的動作....
});
注意
- 下拉動畫是從無到有酝锅，所以一開始元素是需要先隱藏起來的，可以設(shè)置display:none
- 如 果提供回調(diào)函數(shù)參數(shù)奢方，callback會在動畫完成的時候調(diào)用。將不同的動畫串聯(lián)在一起按順序排列執(zhí)行是非常有用的歪沃。這個回調(diào)函數(shù)不設(shè)置任何參數(shù)她紫，但是 this會設(shè)成將要執(zhí)行動畫的那個DOM元素，如果多個元素一起做動畫效果扭勉，那么要非常注意，回調(diào)函數(shù)會在每一個元素執(zhí)行完動畫后都執(zhí)行一次苛聘，而不是這組 動畫整體才執(zhí)行一次
.slideUp() 用滑動動畫隱藏一個匹配元素(用法同slideDown)
注意
- 因?yàn)閯赢嬍钱惒降钠市В砸趧赢嬛髨?zhí)行某些操作就必須要寫到回調(diào)函數(shù)里面，這里要特別注意
slideToggle() 用滑動動畫顯示/隱藏一個匹配元素
注意
- display屬性值保存在jQuery的數(shù)據(jù)緩存中焰盗，所以display可以方便以后可以恢復(fù)到其初始值
- 當(dāng)一個隱藏動畫后璧尸，高度值達(dá)到0的時候，display 樣式屬性被設(shè)置為none熬拒，以確保該元素不再影響頁面布局
淡入淡出
fadeOut()函數(shù)用于隱藏所有匹配的元素爷光，并帶有淡出的過渡動畫效果
通過不透明度的變化來實(shí)現(xiàn)所有匹配元素的淡出效果，并在動畫完成后可選地觸發(fā)一個回調(diào)函數(shù)澎粟。這個動畫只調(diào)整元素的不透明度蛀序，也就是說所有匹配的元素的高度和寬度不會發(fā)生變化。
fadeIn() 函數(shù)用于顯示所有匹配的元素活烙，并帶有淡入的過渡動畫效果
注意
- 淡入的動畫原理：操作元素的不透明度從0%逐漸增加到100%
- 如果元素本身是可見的徐裸，不對其作任何改變。如果元素是隱藏的啸盏，則使其可見
fadeToggle() 淡入淡出的切換
fadeToggle切換fadeOut與fadeIn效果重贺，所謂"切換"，即如果元素當(dāng)前是可見的回懦，則將其隱藏(淡出)气笙；如果元素當(dāng)前是隱藏的，則使其顯示(淡入)怯晕。
.fadeTo( duration, opacity ,callback) 必需的 duration參數(shù)規(guī)定效果的時長潜圃。它可以取以下值："slow"、"fast" 或毫秒舟茶。opacity為元素透明度 , callback可以省略
$("p").fadeTo(1000, 0.9, function() {
alert('完成')//等待1秒將透明度變成0.9,執(zhí)行別的動作
});
比較
- toggle：切換顯示與隱藏效果
- sildeToggle：切換上下拉卷滾效果
- fadeToggle：切換淡入淡出效果
toggle：動態(tài)效果為從右至左谭期。橫向動作，toggle通過display來判斷切換所有匹配元素的可見性
slideToggle：動態(tài)效果從下至上吧凉。豎向動作隧出，slideToggle 通過高度變化來切換所有匹配元素的可見性
fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之間切換。
元素是淡出顯示的客燕，fadeToggle() 會使用淡入效果顯示它們鸳劳。
元素是淡入顯示的，fadeToggle() 會使用淡出效果顯示它們也搓。
隱藏的元素不會被完全顯示（不再影響頁面的布局）
自定義動畫
animate() 自定義動畫
.animate( properties ,[ duration ], [ easing ], [ complete ] )
.animate( properties, options )
注意
-
properties一個或多個css屬性的鍵值對所構(gòu)成的Object對象赏廓。要特別注意所有用于動畫的屬性必須是數(shù)字的涵紊，除非另有說明；這些屬性如果不是數(shù)字的將不能使用基本的jQuery功能幔摸。
比如常見的摸柄，border、margin既忆、padding驱负、width、height患雇、font跃脊、left、top苛吱、right酪术、bottom、wordSpacing等等這些都是能產(chǎn)生動畫效果的翠储。background-color很明顯不可以绘雁，因?yàn)閰?shù)是red或者GBG這樣的值。注意援所，CSS 樣式使用 DOM 名稱（比如 "fontSize"）來設(shè)置庐舟，而非 CSS 名稱（比如 "font-size"）。 - 除了定義數(shù)值住拭，每個屬性能使用'show', 'hide', 和 'toggle'挪略。這些快捷方式允許定制隱藏和顯示動畫用來控制元素的顯示或隱藏
-
duration動畫執(zhí)行的時間，持續(xù)時間是以毫秒為單位的废酷；值越大表示動畫執(zhí)行的越慢瘟檩，不是越快。還可以提供'fast' 和 'slow'字符串澈蟆，分別表示持續(xù)時間為200 和 600毫秒。 -
easing動畫運(yùn)動的算法卓研，jQuery庫中默認(rèn)調(diào)用 swing趴俘。如果需要其他的動畫算法，請查找相關(guān)的插件 -
complete動畫完成時執(zhí)行的函數(shù)奏赘，這個可以保證當(dāng)前動畫確定完成后發(fā)會觸發(fā)
- duration - 設(shè)置動畫執(zhí)行的時間
- easing - 規(guī)定要使用的 easing 函數(shù)寥闪，過渡使用哪種緩動函數(shù)
- step：規(guī)定每個動畫的每一步完成之后要執(zhí)行的函數(shù)
- progress：每一次動畫調(diào)用的時候會執(zhí)行這個回調(diào)，就是一個進(jìn)度的概念
- complete：動畫完成回調(diào)
- 如果多個元素執(zhí)行動畫磨淌，回調(diào)將在每個匹配的元素上執(zhí)行一次疲憋，不是作為整個動畫執(zhí)行一次
$('#elem').animate({
width: 'toggle',
height: 'toggle'
}, {
duration: 5000,
specialEasing: {
width: 'linear',
height: 'easeOutBounce'
},
complete: function() {
$(this).after('<div>Animation complete.</div>');
}
});
.stop() 停止某個動畫
.stop( [clearQueue ], [ jumpToEnd ] )
.stop( [queue ], [ clearQueue ] ,[ jumpToEnd ] )
注意
- .stop(); 停止當(dāng)前動畫，點(diǎn)擊在暫停處繼續(xù)開始
- .stop(true); 如果同一元素調(diào)用多個動畫方法梁只，尚未被執(zhí)行的動畫被放置在元素的效果隊(duì)列中缚柳。這些動畫不會開始埃脏，直到第一個完成。當(dāng)調(diào)用.stop()的時候秋忙，隊(duì)列中的下一個動畫立即開始彩掐。如果clearQueue參數(shù)提供true值,那么在隊(duì)列中的動畫其余被刪除并永遠(yuǎn)不會運(yùn)行
- .stop(true,true); 當(dāng)前動畫將停止，但該元素上的 CSS 屬性會被立刻修改成動畫的目標(biāo)值
jQuery 核心
.each() 處理對象和數(shù)組遍歷
jQuery.each(array, callback )
jQuery.each( object, callback )
第一個參數(shù)傳遞的就是一個對象或者數(shù)組灰追，第二個是回調(diào)函數(shù)
$.each(["1", "2","3","4"], function(index, value) {
//index是索引,也就是數(shù)組的索引
//value就是數(shù)組中的值了
//return false 停止循環(huán)
});
.inArray()函數(shù)用于在數(shù)組中搜索指定的值堵幽，并返回其索引值。如果數(shù)組中不存在該值弹澎，則返回 -1朴下。
如果要判斷數(shù)組中是否存在指定值，你需要通過該函數(shù)的返回值不等于(或大于)-1來進(jìn)行判斷
jQuery.inArray( value, array ,[ fromIndex ] )
用法非常簡單苦蒿，傳遞一個檢測的目標(biāo)值桐猬，然后傳遞原始的數(shù)組，可以通過fromIndex規(guī)定查找的起始值刽肠，默認(rèn)數(shù)組是0開始
$.inArray(5,[1,2,3,4,5,6,7]) //返回對應(yīng)的索引：4
.trim()函數(shù)用于去除字符串兩端的空白字符
注意
- 移除字符串開始和結(jié)尾處的所有換行符溃肪，空格(包括連續(xù)的空格)和制表符（tab）
- 如果這些空白字符在字符串中間時，它們將被保留音五，不會被移除
.get()獲取一個集合對象的某個元素
.get( [index ] )
注意
- get方法是獲取的dom對象惫撰，也就是通過document.getElementById獲取的對象
- get方法是從0開始索引
- get方法還可以從后往前索引，傳遞一個負(fù)索引值躺涝，注意的負(fù)值的索引起始值是-1
.index()方法厨钻，從匹配的元素中搜索給定元素的索引值，從0開始計數(shù)坚嗜。
.index()
.index( selector )
.index( element )
傳遞一個 jQuery或者 dom 對象作為查找條件
- 如果不傳遞任何參數(shù)給 .index() 方法夯膀，則返回值就是jQuery對象中第一個元素相對于它同輩元素的位置
- 如果在一組元素上調(diào)用 .index() ，并且參數(shù)是一個DOM元素或jQuery對象苍蔬， .index() 返回值就是傳入的元素相對于原先集合的位置
- 如果參數(shù)是一個選擇器诱建， .index() 返回值就是原先元素相對于選擇器匹配元素的位置。如果找不到匹配的元素碟绑，則 .index() 返回 -1
