-
toggle、slideToggle以及fadeToggle的區(qū)別:
toggle:切換顯示與隱藏效果;
slideToggle:切換上下拉卷滾效果;
fadeToggle:切換淡入淡出效果。
toggle與slideToggle細(xì)節(jié)區(qū)別:
toggle:動(dòng)態(tài)效果為從右至左。橫向動(dòng)作,toggle通過(guò)display來(lái)判斷切換所有匹配元素的可見(jiàn)性。
slideToggle:動(dòng)態(tài)效果從下至上。豎向動(dòng)作,slideToggle通過(guò)高度變化來(lái)切換所有匹配元素的可見(jiàn)性。
fadeToggle方法:
fadeToggle()方法在fadeIn()和fadeOut()方法之間切換。
元素是淡出顯示的,fadeToggle()會(huì)使用淡入效果顯示它們。
元素是淡入顯示的,fadeToggle()會(huì)使用淡出效果顯示它們。
注釋:隱藏的元素不會(huì)別完全顯示(不再影響頁(yè)面的布局)
查看全部 -
fadeIn:淡入效果,內(nèi)容顯示,opacity是0到1;
fadeOut:淡出效果,內(nèi)容隱藏,opacity是1到0;
.fadeTo(duration,opacity,callback),
查看全部 -
淡入淡出切換fadeToggle:fadeToggle方法可以在fadeOut()和fadeIn()方法之間進(jìn)行切換。如果元素已經(jīng)淡出,則fadeToggle()會(huì)向元素添加淡入效果。如果元素已淡入,則fadeToggle()會(huì)向元素添加淡出效果。
查看全部 -
淡入動(dòng)畫(huà)fadeIn:與fadeOut效果相反,使用上是一致的。
注意:
淡入的動(dòng)畫(huà)原理:操作元素的不透明度從0%逐漸增加到100%;
如果元素本身是可見(jiàn)的,不對(duì)其作任何改變。如果元素是隱藏的,則是其可見(jiàn)。
查看全部 -
淡出動(dòng)畫(huà)fadeOut:用于隱藏所有匹配的元素,并帶有淡出的過(guò)渡動(dòng)畫(huà)效果。即通過(guò)不透明度的變化實(shí)現(xiàn)所有匹配元素的淡出效果,并可以在動(dòng)畫(huà)完成后選擇地觸發(fā)一個(gè)函數(shù)回調(diào)。
查看全部 -
上卷下拉切換slideToggle:獲取元素的高度,使這個(gè)元素的高度發(fā)生改變,從而讓元素里的內(nèi)容往下或往上滑。
注意:
display屬性值保存在jQuery的數(shù)據(jù)中,所以display可以方便以后恢復(fù)到其初始值;
當(dāng)一個(gè)隱藏動(dòng)畫(huà)后,高度值達(dá)到0的時(shí)候,display樣式屬性被設(shè)置為none,以確保該元素不再影響頁(yè)面布局。
查看全部 -
上卷動(dòng)畫(huà)slideUp:找到元素的高度,然后采用一個(gè)下滑動(dòng)畫(huà)讓元素一直下滑到隱藏。
查看全部 -
下拉動(dòng)畫(huà)slideDown:用滑動(dòng)顯示一個(gè)匹配元素。通過(guò)提供動(dòng)畫(huà)的時(shí)間,然后傳遞一個(gè)回調(diào)實(shí)現(xiàn)動(dòng)畫(huà)效果。
注意:
下拉動(dòng)畫(huà)是從無(wú)到有,所以一開(kāi)始元素是需要先隱藏起來(lái)的,可以設(shè)置display:none。
如果提供回調(diào)參數(shù),callback會(huì)在動(dòng)畫(huà)完成的時(shí)候調(diào)用。將不同的動(dòng)畫(huà)串聯(lián)在一起按順序排列執(zhí)行是非常有用的。這個(gè)回調(diào)函數(shù)不設(shè)置任何參數(shù),但是this會(huì)設(shè)成將要執(zhí)行動(dòng)畫(huà)效果,那么要非常注意,回調(diào)函數(shù)會(huì)在一個(gè)元素執(zhí)行完成動(dòng)畫(huà)都執(zhí)行一次,而不是這組動(dòng)畫(huà)整體才執(zhí)行一次。
查看全部 -
基本操作:toggle();處理元素顯示或隱藏。因?yàn)闆](méi)有參數(shù),通過(guò)改變css的display屬性,匹配的元素被立即顯示或隱藏,沒(méi)有動(dòng)畫(huà)。
如果添加時(shí)間和動(dòng)畫(huà)結(jié)束的回調(diào),在參數(shù)對(duì)應(yīng)的時(shí)間內(nèi),元素會(huì)發(fā)生顯示|隱藏的改變,在改變的過(guò)程中會(huì)把元素的高、寬、不透明度進(jìn)行一系列動(dòng)畫(huà)效果。
查看全部 -
show與hide方法是修改的display屬性,通過(guò)是visibility屬性布局需要通過(guò)css方法單獨(dú)設(shè)置;
如果使用!important在你的樣式中,比如display:none !important,如果你希望.show()方法正常工作,必須使用.css('display','block !important')重寫樣式;
如果讓show與hide成為一個(gè)動(dòng)畫(huà),那么默認(rèn)執(zhí)行動(dòng)畫(huà)會(huì)改變?cè)氐母叨龋瑢挾?,透明度?/p>
查看全部 -
index()方法,從匹配的元素中搜索給定元素的索引值,從0開(kāi)始計(jì)數(shù)。
語(yǔ)法:參數(shù)接受一個(gè)jQuery或者dom對(duì)象作為查找的條件
.index() .index(?selector?) .index(?element?)
如果不傳遞任何參數(shù)給 .index() 方法,則返回值就是jQuery對(duì)象中第一個(gè)元素相對(duì)于它同輩元素的位置
如果在一組元素上調(diào)用 .index() ,并且參數(shù)是一個(gè)DOM元素或jQuery對(duì)象, .index() 返回值就是傳入的元素相對(duì)于原先集合的位置
如果參數(shù)是一個(gè)選擇器, .index() 返回值就是原先元素相對(duì)于選擇器匹配元素的位置。如果找不到匹配的元素,則 .index() 返回 -1
簡(jiǎn)單來(lái)說(shuō):
<ul> ????<a></a> ????<li?id="test1">1</li> ????<li?id="test2">2</li> ????<li?id="test3">3</li> </ul>
$("li").index() 沒(méi)有傳遞參數(shù),反正的結(jié)果是1,它的意思是返回同輩的排列循序,第一個(gè)li之前有a元素,同輩元素是a開(kāi)始為0,所以li的開(kāi)始索引是1
如果要快速找到第二個(gè)li在列表中的索引,可以通過(guò)如下2種方式處理
$("li").index(document.getElementById("test2"))?//結(jié)果:1$("li").index($("#test2"))??//結(jié)果:1
查看全部 -
jQuery是一個(gè)合集對(duì)象,如果需要單獨(dú)操作合集中的的某一個(gè)元素,可以通過(guò).get()方法獲取到
以下有3個(gè)a元素結(jié)構(gòu):
<a>1</a> <a>2</a> <a>3</a>
通過(guò)jQuery獲取所有的a元素合集$("a"),如果想進(jìn)一步在合集中找到第二2個(gè)dom元素單獨(dú)處理,可以通過(guò)get方法
語(yǔ)法:
.get(?[index?]?)
注意2點(diǎn)
get方法是獲取的dom對(duì)象,也就是通過(guò)document.getElementById獲取的對(duì)象
get方法是從0開(kāi)始索引
所以第二個(gè)a元素的查找: $(a).get(1)
負(fù)索引值參數(shù)
get方法還可以從后往前索引,傳遞一個(gè)負(fù)索引值,注意的負(fù)值的索引起始值是-1
同樣是找到第二元素,可以傳遞?$(a).get(-2)?
查看全部 -
jQuery.trim()函數(shù)用于去除字符串兩端的空白字符
這個(gè)函數(shù)很簡(jiǎn)單,沒(méi)有多余的參數(shù)用法
需要注意:
移除字符串開(kāi)始和結(jié)尾處的所有換行符,空格(包括連續(xù)的空格)和制表符(tab)
如果這些空白字符在字符串中間時(shí),它們將被保留,不會(huì)被移除
查看全部 -
在PHP有in_array()判斷某個(gè)元素是否存在數(shù)組中,JavaScript卻沒(méi)有,但是jQuery封裝了inArray()函數(shù)判斷元素是否存在數(shù)組中。注意了:在ECMAScript5已經(jīng)有數(shù)據(jù)的indexOf方法支持了,但是jQuery保持了版本向下兼容,所以封裝了一個(gè)inArray方法
jQuery.inArray()函數(shù)用于在數(shù)組中搜索指定的值,并返回其索引值。如果數(shù)組中不存在該值,則返回 -1。
語(yǔ)法:
jQuery.inArray(?value,?array?,[?fromIndex?]?)
用法非常簡(jiǎn)單,傳遞一個(gè)檢測(cè)的目標(biāo)值,然后傳遞原始的數(shù)組,可以通過(guò)fromIndex規(guī)定查找的起始值,默認(rèn)數(shù)組是0開(kāi)始
例如:在數(shù)組中查找值是5的索引
$.inArray(5,[1,2,3,4,5,6,7])?//返回對(duì)應(yīng)的索引:4
注意:
如果要判斷數(shù)組中是否存在指定值,你需要通過(guò)該函數(shù)的返回值不等于(或大于)-1來(lái)進(jìn)行判斷
查看全部 -
jQuery中有個(gè)很重要的核心方法each,大部分jQuery方法在內(nèi)部都會(huì)調(diào)用each,其主要的原因的就是jQuery的實(shí)例是一個(gè)元素合集
如下:找到所有的div,并且都設(shè)置樣式,css只是一個(gè)方法,所以內(nèi)部會(huì)調(diào)用each處理這個(gè)div的合集,給每個(gè)div都設(shè)置style屬性
$('div').css(...)
jQuery的大部分方法都是針元素合集的操作,所以jQuery會(huì)提供$(selector).each()來(lái)遍歷jQuery對(duì)象
.each只是處理jQuery對(duì)象的方法,jQuery還提供了一個(gè)通用的jQuery.each方法,用來(lái)處理對(duì)象和數(shù)組的遍歷
語(yǔ)法
jQuery.each(array,?callback?) jQuery.each(?object,?callback?)
第一個(gè)參數(shù)傳遞的就是一個(gè)對(duì)象或者數(shù)組,第二個(gè)是回調(diào)函數(shù)
$.each(["Aaron",?"慕課網(wǎng)"],?function(index,?value)?{ ???//index是索引,也就是數(shù)組的索引 ???//value就是數(shù)組中的值了 });
each就是for循環(huán)方法的一個(gè)包裝,內(nèi)部就是通過(guò)for遍歷數(shù)組與對(duì)象,通過(guò)回調(diào)函數(shù)返回內(nèi)部迭代的一些參數(shù),第一個(gè)參數(shù)是當(dāng)前迭代成員在對(duì)象或數(shù)組中的索引值(從0開(kāi)始計(jì)數(shù)),第二個(gè)參數(shù)是當(dāng)前迭代成員(與this的引用相同
jQuery.each()函數(shù)還會(huì)根據(jù)每次調(diào)用函數(shù)callback的返回值來(lái)決定后續(xù)動(dòng)作。如果返回值為false,則停止循環(huán)(相當(dāng)于普通循環(huán)中的break);如果返回其他任何值,均表示繼續(xù)執(zhí)行下一個(gè)循環(huán)。
$.each(["Aaron",?"慕課網(wǎng)"],?function(index,?value)?{ ????return?false;?//停止迭代 });
?
jQuery方法可以很方便的遍歷一個(gè)數(shù)據(jù),不需要考慮這個(gè)數(shù)據(jù)是對(duì)象還是數(shù)組
查看全部
舉報(bào)