溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

jQuery——?jiǎng)赢?huà)、類(lèi)數(shù)組

發(fā)布時(shí)間:2020-07-28 18:33:30 來(lái)源:網(wǎng)絡(luò) 閱讀:429 作者:huingsn 欄目:web開(kāi)發(fā)

2、動(dòng)畫(huà)
   jquery中常用的動(dòng)畫(huà)的方法就是hide()與show().
       $(element).hide()這段代碼可以與這相等element.css("display","none")
       在hide(time)與show(time)中填入事件,可以慢慢消失跟顯現(xiàn)??梢孕薷脑氐亩鄠€(gè)樣式,高度,寬度,不透明度。
   另一組方法fadeIn()與fadeOut()這個(gè)與hide跟show不同的是,當(dāng)使用hide或者show的時(shí)候會(huì)改變網(wǎng)頁(yè)的高度,而fadeIn與fadeOut則不會(huì)。
       還有一組是slideUp,slideDown改變高度。
   方法說(shuō)明:
       Hide()/show():同時(shí)修改多個(gè)樣式屬性:高度、寬度、不透明度。
       fadeIn()/fadeout():只修改不透明度。
       slideUp()/slideDown():只改變高度。
       fadeTo():只改變不透明度。
       Toggle():用來(lái)替代hide()方法和show()方法,所以會(huì)同時(shí)修改多個(gè)樣式屬性即高度寬度和不透明度。
       slideToggle():用來(lái)代替slideUp()和slideDown()方法,所以只能改變高度。
       Animate():屬于自定義動(dòng)畫(huà)的方法,直接使用animate()方法還能自定義其他的屬性樣式,例如left,marginLeft,scrollTop等。

   1)、show(), hide()       animate / a1.html
       a,作用: 通過(guò)同時(shí)改變?cè)氐膶挾群透叨葋?lái)實(shí)現(xiàn)顯示或者隱藏。
       b,用法:
           show(速度,[callback])
           速度: 'slow','normal','fast',也可以用毫秒數(shù)
           callback: 當(dāng)整個(gè)動(dòng)畫(huà)執(zhí)行完畢之后,會(huì)立即調(diào)用這個(gè)函數(shù)(回調(diào)函數(shù))。
   2)、slideUp() slideDown()  animate / a1.html
       a,作用:通過(guò)改變?cè)氐母叨葋?lái)實(shí)現(xiàn)顯示或者隱藏
       b,用法:同show
   3)、fadeIn() fadeOut()  animate / a2.html
       a,作用:通過(guò)改變不透明度來(lái)實(shí)現(xiàn)顯示或者隱藏
       b,用法:同show
   4)、自定義動(dòng)畫(huà) animate animate / a3.html
       用法:
       animate(params,speed,[callback])
           params: 是一個(gè)javascript對(duì)象,描述了動(dòng)畫(huà)完成之后元素的樣式。比如: {'left':'500px','top':'200px'}
           speed:速度,單位是毫秒
           callback:回調(diào)函數(shù),也就是說(shuō),當(dāng)整個(gè)動(dòng)畫(huà)執(zhí)行完畢之后會(huì)執(zhí)行。
   5)、動(dòng)畫(huà)隊(duì)列問(wèn)題
       a、一組元素上的動(dòng)畫(huà)效果。
           a)當(dāng)在一個(gè)animate()方法中應(yīng)用多個(gè)屬性時(shí),動(dòng)畫(huà)是同時(shí)發(fā)生的。
           b)當(dāng)以鏈?zhǔn)降膶?xiě)法應(yīng)用動(dòng)畫(huà)方法時(shí),動(dòng)畫(huà)是按照順序發(fā)生的。
       b、多組元素上的動(dòng)畫(huà)效果。
           a)默認(rèn)情況下,動(dòng)畫(huà)都是同時(shí)發(fā)生的。
           b)當(dāng)以回調(diào)的形式應(yīng)用動(dòng)畫(huà)方式時(shí),動(dòng)畫(huà)是按照回調(diào)順序發(fā)生的。
       另外,在動(dòng)畫(huà)方法中,要注意其他非動(dòng)畫(huà)的方法會(huì)插隊(duì),例如css()方法,要使這些非動(dòng)畫(huà)的方法也按照順序來(lái)執(zhí)行,需要把這些方法寫(xiě)在動(dòng)畫(huà)方法的回調(diào)函數(shù)中。
       例子:
       $('#id').animate({left:'600px',top:'400px'},3000,function(){
           $(this).css('border','2px solid blue');
       });
       若想要?jiǎng)赢?huà)停止,需要在animate()方法前插入stop()方法
           如:$("#id").stop().animate()注意stop中的兩個(gè)參數(shù)。
       判斷元素是否在動(dòng)畫(huà)狀態(tài)的方法時(shí):
           $(element).is(":animated");
3、類(lèi)數(shù)組的操作  array/a1.html
   所謂類(lèi)數(shù)組,指的是jQuery對(duì)象里面包含的所有的dom對(duì)象。可以利用jQuery對(duì)象提供的一些方法和屬性來(lái)對(duì)這些dom對(duì)象進(jìn)行遍歷。
   1)屬性
       length: 獲得dom對(duì)象的個(gè)數(shù)。
   2)方法
       a, each(fn(i)):循環(huán)遍歷每一個(gè)元素,
           i表示被迭代的對(duì)象的下標(biāo)
           this代表被迭代的dom對(duì)象,
           $(this)代表被迭代的jquery對(duì)象。
       b,eq(index):返回index位置處的jquery對(duì)象
       c,index(obj):返回下標(biāo),其中obj可以是dom對(duì)象或者jquery對(duì)象。
       d,get():返回dom對(duì)象組成的數(shù)組
       e,get(index):返回index位置處的dom對(duì)象。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI