-
toggle、sildeToggle以及fadeToggle的區(qū)別:
toggle:切換顯示與隱藏效果
sildeToggle:切換上下拉卷滾效果
fadeToggle:切換淡入淡出效果
當(dāng)然細(xì)節(jié)上還是有更多的不同點(diǎn):
toggle與slideToggle細(xì)節(jié)區(qū)別:toggle:動(dòng)態(tài)效果為從右至左。橫向動(dòng)作,toggle通過display來判斷切換所有匹配元素的可見性
slideToggle:動(dòng)態(tài)效果從下至上。豎向動(dòng)作,slideToggle 通過高度變化來切換所有匹配元素的可見性
fadeToggle方法
fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之間切換。
元素是淡出顯示的,fadeToggle() 會(huì)使用淡入效果顯示它們。
元素是淡入顯示的,fadeToggle() 會(huì)使用淡出效果顯示它們。
注釋:隱藏的元素不會(huì)被完全顯示(不再影響頁面的布局)
查看全部 -
注意事項(xiàng):
下拉動(dòng)畫是從無到有,所以一開始元素是需要先隱藏起來的,可以設(shè)置display:none
如 果提供回調(diào)函數(shù)參數(shù),callback會(huì)在動(dòng)畫完成的時(shí)候調(diào)用。將不同的動(dòng)畫串聯(lián)在一起按順序排列執(zhí)行是非常有用的。這個(gè)回調(diào)函數(shù)不設(shè)置任何參數(shù),但是 this會(huì)設(shè)成將要執(zhí)行動(dòng)畫的那個(gè)DOM元素,如果多個(gè)元素一起做動(dòng)畫效果,那么要非常注意,回調(diào)函數(shù)會(huì)在每一個(gè)元素執(zhí)行完動(dòng)畫后都執(zhí)行一次,而不是這組 動(dòng)畫整體才執(zhí)行一次
查看全部 -
注意事項(xiàng):
show與hide方法是修改的display屬性,通過是visibility屬性布局需要通過css方法單獨(dú)設(shè)置
如果使用!important在你的樣式中,比如display: none !important,如果你希望.show()方法正常工作,必須使用.css('display', 'block !important')重寫樣式
如果讓show與hide成為一個(gè)動(dòng)畫,那么默認(rèn)執(zhí)行動(dòng)畫會(huì)改變元素的高度,高度,透明度
?
查看全部 -
語法:參數(shù)接受一個(gè)jQuery或者dom對象作為查找的條件
.index()
.index(selector)
.index(element)
如果不傳遞任何參數(shù)給.index()方法,則返回值就是jQuery對象中第一個(gè)元素相對于它同輩元素的位置
如果在一組元素上調(diào)用.index(),并且參數(shù)是一個(gè)DOM元素或jQuery對象,index()返回值就是傳入的元素相對于原先集合的位置
如果參數(shù)是一個(gè)選擇器,index()返回值就是原先元素相對于選擇器匹配元素的位置。如果找不到匹配的元素,則.index()返回-1
查看全部 -
語法
.get([index])
注意兩點(diǎn)
get方法是獲取的dom對象,也就是通過document.getElementById獲取的對象
get方法是從0開始索引
所以第二個(gè)a元素的查找:$(a).get(1)
負(fù)索引值參數(shù)
get方法還可以從后往前索引,傳遞一個(gè)負(fù)索引值,注意的負(fù)值的索引起始值是-1
同樣是找到第二個(gè)元素,可以傳遞$(a).get(-2)
查看全部 -
jQuery.trim()函數(shù)用于去除字符串兩端的空白字符
這個(gè)函數(shù)很簡單,沒有多余的參數(shù)用法
需要注意:
移除字符串開始和結(jié)尾處的所有換行符,空格(包括連續(xù)的空格)和制表符(tab)
如果這些空白字符在字符串中間時(shí),它們將被保留,不會(huì)被移除
查看全部 -
語法
jQuery.inArray(value,array.[gromIndex])
注意:
如果要判斷數(shù)組中是否存在指定值,你需要通過該函數(shù)的返回值不等于(或大于)-1來進(jìn)行判斷
查看全部 -
語法
jQuery.each(array,callback)
jQuery.each(object,callback)
第一個(gè)參數(shù)傳遞的就是一個(gè)對象或者數(shù)組,第二個(gè)是回調(diào)函數(shù)
查看全部 -
基本語法
.stop();停止當(dāng)前動(dòng)畫,點(diǎn)擊在暫停處繼續(xù)開始
.stop(true)如果同一個(gè)元素調(diào)用多個(gè)動(dòng)畫方法,尚未被執(zhí)行的動(dòng)畫被放置在元素的效果隊(duì)列中。這些動(dòng)畫不會(huì)開始,知道第一個(gè)完成。當(dāng)調(diào)用.stop()的時(shí)候,隊(duì)列中的下一個(gè)動(dòng)畫立即開始。如果clearQueue參數(shù)提供true值,那么在隊(duì)列中的動(dòng)畫其余被刪除并永遠(yuǎn)不會(huì)運(yùn)行
.stop(true,true);當(dāng)前動(dòng)畫將停止,但該元素上的css屬性會(huì)被立刻修改成動(dòng)畫的目標(biāo)值
stop():只會(huì)停止第一個(gè)動(dòng)畫,第二個(gè)第三個(gè)繼續(xù)
stop(true):停止第一個(gè)、第二個(gè)和第三個(gè)動(dòng)畫
stop(true true):停止動(dòng)畫,直接跳到第一個(gè)動(dòng)畫的最終狀態(tài)
查看全部 -
option參數(shù):
duration-設(shè)置動(dòng)畫執(zhí)行的時(shí)間
easing-規(guī)定要用的easing函數(shù),過渡使用哪種緩動(dòng)函數(shù)
step-規(guī)定每個(gè)動(dòng)畫的每一步完成之后要執(zhí)行的函數(shù)
progress:每一次動(dòng)畫調(diào)用的時(shí)候會(huì)執(zhí)行這個(gè)回調(diào),就是一個(gè)進(jìn)度的概念
complete:動(dòng)畫完成回調(diào)
最關(guān)鍵的一點(diǎn):
如果多個(gè)元素執(zhí)行動(dòng)畫,回調(diào)將在每個(gè)匹配的元素上執(zhí)行一次,不是作為整個(gè)動(dòng)畫執(zhí)行一次
查看全部 -
語法:.animate(properties,[duration],[easing],[complete])
.animate(properties,option)
properties:一個(gè)或多個(gè)css屬性的鍵值對所構(gòu)成的Object對象。要特別注意所有用于動(dòng)畫的屬性必須是數(shù)字的,除非另有說明
查看全部 -
jQuery是一個(gè)合集對象,如果需要單獨(dú)操作合集中的的某一個(gè)元素,可以通過.get()方法獲取到
以下有3個(gè)a元素結(jié)構(gòu):
<a>1</a> <a>2</a> <a>3</a>
通過jQuery獲取所有的a元素合集$("a"),如果想進(jìn)一步在合集中找到第二2個(gè)dom元素單獨(dú)處理,可以通過get方法
語法:
.get(?[index?]?)
注意2點(diǎn)
get方法是獲取的dom對象,也就是通過document.getElementById獲取的對象
get方法是從0開始索引
所以第二個(gè)a元素的查找: $(a).get(1)
get方法還可以從后往前索引,傳遞一個(gè)負(fù)索引值,注意的負(fù)值的索引起始值是-1
同樣是找到第二元素,可以傳遞?$(a).get(-2)?
查看全部 -
元素的顯示隱藏:
改變樣式display為none
設(shè)置高度為0
設(shè)置透明度為0
toggle、slideToggle以及fadeToggle的區(qū)別
toggle:切換顯示與隱藏效果
slideToggle:切換上下拉卷滾效果
fadeToggle:切換淡入淡出效果
toggle與slideToggle:
toggle:動(dòng)態(tài)效果為從右至左。橫向動(dòng)作,toggle通過display來判斷切換所有匹配元素的可見性
slideToggle:動(dòng)態(tài)效果從下至上。豎向動(dòng)作,slideToggle通過高度變化來切換所有匹配元素的可見性
fadeToggle方法
fadeToggle()方法在fadeIn()和fadeOut()方法之間切換
元素是淡出顯示的,fadeToggle()會(huì)使用淡入效果顯示它們
元素是淡入顯示的,fadeToggle()會(huì)使用淡出效果顯示它們
注釋:隱藏的元素不會(huì)被完全顯示(不再影響頁面的布局)
查看全部 -
jQuery.trim()函數(shù)用于去除字符串兩端的空白字符
需要注意:
移除字符串開始和結(jié)尾處的所有換行符,空格(包括連續(xù)的空格)和制表符(tab)
如果這些空白字符在字符串中間時(shí),它們將被保留,不會(huì)被移除
查看全部 -
fadeIn:淡入效果,內(nèi)容顯示,opacity是0到1
fadeOut:淡出效果,內(nèi)容隱藏,opacity是1到0
語法:.fadeTo(duration,opacity,callback)
必需的duration參數(shù)規(guī)定效果的時(shí)長,它可以取以下值:"slow"、"fast"或毫秒。fadeTo()方法中必需的opacity參數(shù)將淡入淡出效果設(shè)置為給定的不透明度(值介于0到1之間)。可選的callback參數(shù)是該函數(shù)完成后執(zhí)行的函數(shù)名稱。
查看全部
舉報(bào)