jquery 動畫特效

隱藏元素的hide方法

讓頁面上的元素不可見载佳,一般可以通過設(shè)置css的display為none屬性泄朴。但是通過css直接修改是靜態(tài)的布局宵凌,如果在代碼執(zhí)行的時候郊供,一般是通過js控制元素的style屬性,這里jQuery提供了一個快捷的方法.hide()來達到這個效果

$elem.hide()

提供參數(shù):.hide( options )

當(dāng)提供hide方法一個參數(shù)時须揣,.hide()成為一個動畫方法盐股。.hide()方法將為匹配元素的寬度,高度耻卡,以及不透明度疯汁,同時進行動畫操作

快捷參數(shù):.hide(fast / slow)

這是一個動畫設(shè)置的快捷方式,'fast' 和 'slow' 分別代表200和600毫秒的延時卵酪,就是元素會執(zhí)行200/600毫秒的動畫后在隱藏

注意:

jQuery在做hide操作的時候幌蚊,是會保存本身的元素的原始屬性值谤碳,再之后通過對應(yīng)的方法還原的時候還是初始值。比如一個元素的display屬性值為inline溢豆,那么隱藏再顯示時蜒简,這個元素將再次顯示inline。一旦透明度 達到0沫换,display樣式屬性將被設(shè)置為none臭蚁,這個元素將不再在頁面中影響布局

顯示元素的show方法

css中有display:none屬性,同時也有display:block讯赏,所以jQuery同樣提供了與hide相反的show方法

方法的使用幾乎與hide是一致的垮兑,hide是讓元素顯示到隱藏,show則是相反漱挎,讓元素從隱藏到顯示

$('elem').hide(3000).show(3000)

讓元素執(zhí)行3秒的隱藏動畫系枪,然后執(zhí)行3秒的顯示動畫。

show與hide方法是非常常用的磕谅,但是一般很少會基于這2個屬性執(zhí)行動畫私爷,大多情況下還是直接操作元素的顯示與隱藏為主

注意事項:

show與hide方法是修改的display屬性,通過是visibility屬性布局需要通過css方法單獨設(shè)置

如果使用!important在你的樣式中膊夹,比如display: none !important衬浑,如果你希望.show()方法才能正常工作,必須使用.css('display', 'block !important')重寫樣式

如果讓show與hide成為一個動畫放刨,那么默認(rèn)執(zhí)行動畫會改變元素的高度工秩,高度,透明度

顯示與隱藏切換toggle方法

show與hide是一對互斥的方法进统。需要對元素進行顯示隱藏的互斥切換助币,通常情況是需要先判斷元素的display狀態(tài),然后調(diào)用其對應(yīng)的處理方法螟碎。比如顯示的元素眉菱,那么就要調(diào)用hide,反之亦然掉分。 對于這樣的操作行為俭缓,jQuery提供了一個便捷方法toggle用于切換顯示或隱藏匹配元素

基本的操作:toggle();

這是最基本的操作,處理元素顯示或者隱藏酥郭,因為不帶參數(shù)尔崔,所以沒有動畫。通過改變CSS的display屬性褥民,匹配的元素將被立即顯示或隱藏,沒有動畫洗搂。

如果元素是最初顯示消返,它會被隱藏

如果隱藏的载弄,它會顯示出來

display屬性將被儲存并且需要的時候可以恢復(fù)。如果一個元素的display值為inline撵颊,然后是隱藏和顯示宇攻,這個元素將再次顯示inline

提供參數(shù):.toggle( [duration ] ,[ complete ] )

同樣的提供了時間、還有動畫結(jié)束的回調(diào)倡勇。在參數(shù)對應(yīng)的時間內(nèi)逞刷,元素會發(fā)生顯示/隱藏的改變,在改變的過程中會把元素的高妻熊、寬夸浅、不透明度進行一系列動畫。這個元素其實就是show與hide的方法

直接定位:.toggle(display)

直接提供一個參數(shù)扔役,指定要改變的元素的最終效果

其實就是確定是使用show還是hide方法

if ( display === true ) {

$( "elem" ).show();

} else if ( display === false ) {

$( "elem" ).hide();

}

下拉動畫slideDown

對于隱藏的元素帆喇,在將其顯示出來的過程中,可以對其進行一些變化的動畫效果亿胸。之前學(xué)過了show方法坯钦,show方法在顯示的過程中也可以有動畫,但是.show()方法將為匹配元素的寬度侈玄,高度婉刀,以及不透明度,同時進行動畫操作序仙。這里將要學(xué)習(xí)一個新的顯示方法slideDown方法

.slideDown():用滑動動畫顯示一個匹配元素

.slideDown()方法將給匹配元素的高度的動畫突颊,這會導(dǎo)致頁面的下面部分滑下去,彌補了顯示的方式

常見的操作诱桂,提供一個動畫是時間洋丐,然后傳遞一個回調(diào),用于知道動畫是什么時候結(jié)束

.slideDown( [duration ], [ complete ] )

持續(xù)時間(duration)是以毫秒為單位的挥等,數(shù)值越大友绝,動畫越慢,不是越快肝劲。字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時迁客。如果提供任何其他字符串,或者這個duration參數(shù)被省略辞槐,那么默認(rèn)使用400 毫秒的延時掷漱。

具體使用:

$("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

對于顯示的元素,在將其隱藏的過程中湾宙,可以對其進行一些變化的動畫效果樟氢。之前學(xué)過了hide方法,hide方法在顯示的過程中也可以有動畫侠鳄,但 是.hide()方法將為匹配元素的寬度埠啃,高度,以及不透明度畦攘,同時進行動畫操作霸妹。這里將要學(xué)習(xí)一個新的顯示方法slideUp方法

最簡單的使用:不帶參數(shù)

$("elem").slideUp();

這個使用的含義就是:找到元素的高度,然后采用一個下滑動畫讓元素一直滑到隱藏知押,當(dāng)高度為0的時候叹螟,也就是不可見的時,修改元素display 樣式屬性被設(shè)置為none台盯。這樣就能確保這個元素不會影響頁面布局了

帶參數(shù):

.slideUp( [duration ] ,[ easing ], [complete ] )

同樣可以提供一個時間罢绽,然后可以使用一種過渡使用哪種緩動函數(shù),jQuery默認(rèn)就2種静盅,可以通過下載插件支持良价。最后一個動畫結(jié)束的回調(diào)方法。

因為動畫是異步的蒿叠,所以要在動畫之后執(zhí)行某些操作就必須要寫到回調(diào)函數(shù)里面明垢,這里要特別注意

上卷下拉切換slideToggle

slideDown與slideUp是一對相反的方法。需要對元素進行上下拉卷效果的切換市咽,jQuery提供了一個便捷方法slideToggle用滑動動畫顯示或隱藏一個匹配元素

基本的操作:slideToggle();

這是最基本的操作痊银,獲取元素的高度,使這個元素的高度發(fā)生改變施绎,從而讓元素里的內(nèi)容往下或往上滑溯革。

提供參數(shù):.slideToggle( [duration ] [, complete ] )

同樣的提供了時間、還有動畫結(jié)束的回調(diào)谷醉。在參數(shù)對應(yīng)的時間內(nèi)致稀,元素會完成動畫,然后出發(fā)回調(diào)函數(shù)

同時也提供了時間的快速定義俱尼,字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時

slideToggle("fast")

slideToggle("slow")

注意:

display屬性值保存在jQuery的數(shù)據(jù)緩存中抖单,所以display可以方便以后可以恢復(fù)到其初始值

當(dāng)一個隱藏動畫后,高度值達到0的時候,display 樣式屬性被設(shè)置為none矛绘,以確保該元素不再影響頁面布局

淡出動畫fadeOut

讓元素在頁面不可見躺酒,常用的辦法就是通過設(shè)置樣式的display:none。除此之外還可以一些類似的辦法可以達到這個目的蔑歌。這里要提一個透明度的方法,設(shè)置元素透明度為0揽碘,可以讓元素不可見次屠,透明度的參數(shù)是0~1之間的值,通過改變這個值可以讓元素有一個透明度的效果雳刺。常見的淡入淡出動畫正是這樣的原理劫灶。

fadeOut()函數(shù)用于隱藏所有匹配的元素,并帶有淡出的過渡動畫效果

所謂"淡出"隱藏的掖桦,元素是隱藏狀態(tài)不對作任何改變本昏,元素是可見的,則將其隱藏枪汪。

.fadeOut( [duration ] [, complete ] )

通過不透明度的變化來實現(xiàn)所有匹配元素的淡出效果涌穆,并在動畫完成后可選地觸發(fā)一個回調(diào)函數(shù)。這個動畫只調(diào)整元素的不透明度雀久,也就是說所有匹配的元素的高度和寬度不會發(fā)生變化宿稀。

字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時。如果提供任何其他字符串赖捌,或者這個duration參數(shù)8被省略祝沸,那么默認(rèn)使用400毫秒的延時

淡入動畫fadeIn

fadeOut是淡出效果,相反的還有淡入效fadeIn,方法使用上兩者都是一致的越庇,只是結(jié)果相反

.fadeIn( [duration ] [, complete ] )

duration:指定過渡動畫運行多長時間(毫秒數(shù))罩锐,默認(rèn)值為400。該參數(shù)也可以為字符串"fast"(=200)或"slow"(=600)卤唉。

元素顯示完畢后需要執(zhí)行的函數(shù)涩惑。函數(shù)內(nèi)的this指向當(dāng)前DOM元素。

fadeIn()函數(shù)用于顯示所有匹配的元素搬味,并帶有淡入的過渡動畫效果境氢。

注意

淡入的動畫原理:操作元素的不透明度從0%逐漸增加到100%

如果元素本身是可見的,不對其作任何改變碰纬。如果元素是隱藏的萍聊,則使其可見

淡入淡出切換fadeToggle

fadeToggle()函數(shù)用于切換所有匹配的元素,并帶有淡入/淡出的過渡動畫效果悦析。之前也學(xué)過toggle寿桨、slideToggle 也是類似的處理方式

fadeToggle切換fadeOut與fadeIn效果,所謂"切換",即如果元素當(dāng)前是可見的亭螟,則將其隱藏(淡出)挡鞍;如果元素當(dāng)前是隱藏的,則使其顯示(淡入)预烙。

常用語法:.fadeToggle( [duration ] [, complete ] )

可選的duration參數(shù)規(guī)定效果的時長墨微。它可以取以下值:"slow"、"fast" 或毫秒扁掸。 可選的 callback 參數(shù)是 fadeToggle完成后所執(zhí)行的函數(shù)名稱翘县。

fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。如果元素已淡出谴分,則 fadeToggle() 會向元素添加淡入效果锈麸。如果元素已淡入,則 fadeToggle() 會向元素添加淡出效果牺蹄。

淡入效果fadeTo

淡入淡出fadeIn與fadeOut都是修改元素樣式的opacity屬性忘伞,但是他們都有個共同的特點,變化的區(qū)間要么是0沙兰,要么是1

fadeIn:淡出效果氓奈,即要顯示出來,opacity是0到1

fadeOut:淡入效果僧凰,即要隱藏出來探颈,opacity是1到0

如果要讓元素保持動畫效果,執(zhí)行opacity = 0.5的效果時训措,要如何處理伪节?

如果不考慮CSS3,我們用JS實現(xiàn)的話绩鸣,基本就是通過定時器导梆,在設(shè)定的時間內(nèi)一點點的修改opacity的值墓怀,最終為0.5榴嗅,原理雖說簡單秤涩,但是總不如一鍵設(shè)置這么舒服,jQuery提供了fadeTo方法捡多,可以讓改變透明度一步到位

語法

.fadeTo( duration, opacity [, complete ] )

必需的 duration參數(shù)規(guī)定效果的時長蓖康。它可以取以下值:"slow"、"fast" 或毫秒垒手。fadeTo() 方法中必需的 opacity 參數(shù)將淡入淡出效果設(shè)置為給定的不透明度(值介于 0 與 1 之間)蒜焊。可選的 callback 參數(shù)是該函數(shù)完成后所執(zhí)行的函數(shù)名稱科贬。

toggle與slideToggle以及fadeToggle的比較

操作元素的顯示和隱藏可以有幾種方法泳梆。

例如:

改變樣式diplay為none

位置高度為0

透明度為0

都能達到這個目的,并且針對這樣的處理jQuery都提供了各自的方法。show/hide优妙、sildeDown/sildeUp乘综、fadeInOut。除此之外套硼,還引入了toggle卡辰、sildeToggle以及fadeToggle切換方法

toggle、sildeToggle以及fadeToggle的區(qū)別:

toggle:切換顯示與隱藏效果

sildeToggle:切換上下拉卷滾效果

fadeToggle:切換淡入淡出效果

當(dāng)然細(xì)節(jié)上還是有更多的不同點:

toggle與slideToggle細(xì)節(jié)區(qū)別:

toggle:動態(tài)效果為從右至左邪意。橫向動作看政,toggle通過display來判斷切換所有匹配元素的可見性

slideToggle:動態(tài)效果從下至上。豎向動作抄罕,slideToggle 通過高度變化來切換所有匹配元素的可見性

fadeToggle方法

fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之間切換。

元素是淡出顯示的于颖,fadeToggle() 會使用淡入效果顯示它們呆贿。

元素是淡入顯示的,fadeToggle() 會使用淡出效果顯示它們森渐。

注釋:隱藏的元素不會被完全顯示(不再影響頁面的布局)

動畫animate(上)

有些復(fù)雜的動畫通過之前學(xué)到的幾個動畫函數(shù)是不能夠?qū)崿F(xiàn)做入,這時候就是強大的animate方法了

操作一個元素執(zhí)行3秒的淡入動畫,對比下一下2組動畫設(shè)置的區(qū)別

$(elem).fadeOut(3000)

$(elem).animate({

opacity:0

},3000)

顯而易見同衣,animate方法更加靈活了竟块,可以精確的控制樣式屬性從而執(zhí)行動畫

語法:

.animate( properties [, duration ] [, easing ] [, complete ] )

.animate( properties, options )

.animate()方法允許我們在任意的數(shù)值的CSS屬性上創(chuàng)建動畫。2種語法使用耐齐,幾乎差不多了浪秘,唯一必要的屬性就是一組CSS屬性鍵值對。這組屬性和用于設(shè)置.css()方法的屬性鍵值對類似埠况,除了屬性范圍做了更多限制耸携。第二個參數(shù)開始可以單獨傳遞多個實參也可以合并成一個對象傳遞了

參數(shù)分解:

properties:一個或多個css屬性的鍵值對所構(gòu)成的Object對象。要特別注意所有用于動畫的屬性必須是數(shù)字的辕翰,除非另有說明夺衍;這些屬性如果不是數(shù)字的將不能使用基本的jQuery功能。比如常見的喜命,border沟沙、margin、padding壁榕、width矛紫、height、font护桦、left含衔、top、right、bottom贪染、wordSpacing等等這些都是能產(chǎn)生動畫效果的缓呛。background-color很明顯不可以,因為參數(shù)是red或者GBG這樣的值杭隙,非常用插件哟绊,否則正常情況下是不能只能動畫效果的。注意痰憎,CSS 樣式使用 DOM 名稱(比如 "fontSize")來設(shè)置票髓,而非 CSS 名稱(比如 "font-size")。

特別注意單位铣耘,屬性值的單位像素(px),除非另有說明洽沟。單位em 和 %需要指定使

.animate({

left: 50,

width: '50px'

opacity: 'show',

fontSize: "10em",

}, 500);

除了定義數(shù)值,每個屬性能使用'show', 'hide', 和 'toggle'蜗细。這些快捷方式允許定制隱藏和顯示動畫用來控制元素的顯示或隱藏

.animate({

width: "toggle"

});

如果提供一個以+= 或 -=開始的值裆操,那么目標(biāo)值就是以這個屬性的當(dāng)前值加上或者減去給定的數(shù)字來計算的

.animate({

left: '+50px'

}, "slow");

duration時間

動畫執(zhí)行的時間,持續(xù)時間是以毫秒為單位的炉媒;值越大表示動畫執(zhí)行的越慢踪区,不是越快。還可以提供'fast' 和 'slow'字符串吊骤,分別表示持續(xù)時間為200 和 600毫秒缎岗。

easing動畫運動的算法

jQuery庫中是默認(rèn)的時調(diào)用 swing。在一個恒定的速度進行動畫白粉,如果需要其他的動畫算法传泊,請查找相關(guān)的插件

complete回調(diào)

動畫完成時執(zhí)行的函數(shù),這個可以保證當(dāng)前動畫確定完成后發(fā)會觸發(fā)

動畫animate(下)

animate在執(zhí)行動畫中鸭巴,如果需要觀察動畫的一些執(zhí)行情況或渤,或者在動畫進行中的某一時刻進行一些其他處理,我們可以通過animate的提供第二種設(shè)置語法奕扣,傳遞一個對象參數(shù)薪鹦,可以拿到動畫執(zhí)行狀態(tài)一些通知

.animate( properties, options )

options參數(shù)

duration?- 設(shè)置動畫執(zhí)行的時間

easing - 規(guī)定要使用的 easing 函數(shù),過渡使用哪種緩動函數(shù)

step:規(guī)定每個動畫的每一步完成之后要執(zhí)行的函數(shù)

progress:每一次動畫調(diào)用的時候會執(zhí)行這個回調(diào)惯豆,就是一個進度的概念

complete:動畫完成回調(diào)

其中最關(guān)鍵的一點就是:

如果多個元素執(zhí)行動畫池磁,回調(diào)將在每個匹配的元素上執(zhí)行一次,不是作為整個動畫執(zhí)行一次

列出常用的方式:

$('#elem').animate({

width: 'toggle',

height: 'toggle'

}, {

duration: 5000,

specialEasing: {

width: 'linear',

height: 'easeOutBounce'

},

complete: function() {

$(this).after('

Animation complete.

');

}

});

停止動畫stop

動畫在執(zhí)行過程中是允許被暫停的楷兽,當(dāng)一個元素調(diào)用.stop()方法地熄,當(dāng)前正在運行的動畫(如果有的話)立即停止

語法:

.stop( [clearQueue ] [, jumpToEnd ] )

.stop( [queue ] [, clearQueue ] [, jumpToEnd ] )

stop還有幾個可選的參數(shù),簡單來說可以這3種情況

.stop(); 停止當(dāng)前動畫芯杀,點擊在暫停處繼續(xù)開始

.stop(true); 如果同一元素調(diào)用多個動畫方法端考,尚未被執(zhí)行的動畫被放置在元素的效果隊列中雅潭。這些動畫不會開始,直到第一個完成却特。當(dāng)調(diào)用.stop()的時候扶供,隊列中的下一個動畫立即開始。如果clearQueue參數(shù)提供true值,那么在隊列中的動畫其余被刪除并永遠(yuǎn)不會運行

.stop(true,true);? .stop(? [ clearQueue ] [, jumpToEnd ] )? clearQueue為true 表名結(jié)束線程 裂明,jumpToEnd表名跳轉(zhuǎn)到未完成動畫的最終狀態(tài)椿浓。當(dāng)前動畫將停止,但該元素上的 CSS 屬性會被立刻修改成動畫的目標(biāo)值

簡單的說:參考下面代碼闽晦、

$("#aaron").animate({

height: 300

}, 5000)

$("#aaron").animate({

width: 300

}, 5000)

$("#aaron").animate({

opacity: 0.6

}, 2000)

stop():只會停止第一個動畫扳碍,第二個第三個繼續(xù)

stop(true):停止第一個、第二個和第三個動畫

stop(true ture):停止動畫仙蛉,直接跳到第一個動畫的最終狀態(tài)

值得注意的問題:

如果動畫未完成停止了笋敞,那么動畫完成時執(zhí)行的回調(diào)函數(shù)是不會被調(diào)用的

each方法的應(yīng)用

jQuery中有個很重要的核心方法each,大部分jQuery方法在內(nèi)部都會調(diào)用each荠瘪,其主要的原因的就是jQuery的實例是一個元素合集

如下:找到所有的div液样,并且都設(shè)置樣式,css只是一個方法巧还,所以內(nèi)部會調(diào)用each處理這個div的合集,給每個div都設(shè)置style屬性

$('div').css(...)

jQuery的大部分方法都是針元素合集的操作坊秸,所以jQuery會提供$(selector).each()來遍歷jQuery對象

.each只是處理jQuery對象的方法麸祷,jQuery還提供了一個通用的jQuery.each方法,用來處理對象和數(shù)組的遍歷

語法

jQuery.each(array, callback )

jQuery.each( object, callback )

第一個參數(shù)傳遞的就是一個對象或者數(shù)組褒搔,第二個是回調(diào)函數(shù)

$.each(["Aaron", "慕課網(wǎng)"], function(index, value) {

//index是索引,也就是數(shù)組的索引

//value就是數(shù)組中的值了

});

each就是for循環(huán)方法的一個包裝阶牍,內(nèi)部就是通過for遍歷數(shù)組與對象,通過回調(diào)函數(shù)返回內(nèi)部迭代的一些參數(shù)星瘾,第一個參數(shù)是當(dāng)前迭代成員在對象或數(shù)組中的索引值(從0開始計數(shù))走孽,第二個參數(shù)是當(dāng)前迭代成員(與this的引用相同

jQuery.each()函數(shù)還會根據(jù)每次調(diào)用函數(shù)callback的返回值來決定后續(xù)動作。如果返回值為false琳状,則停止循環(huán)(相當(dāng)于普通循環(huán)中的break)磕瓷;如果返回其他任何值,均表示繼續(xù)執(zhí)行下一個循環(huán)念逞。

$.each(["Aaron", "慕課網(wǎng)"], function(index, value) {

return false; //停止迭代

});

jQuery方法可以很方便的遍歷一個數(shù)據(jù)困食,不需要考慮這個數(shù)據(jù)是對象還是數(shù)組

查找數(shù)組中的索引inArray

在PHP有in_array()判斷某個元素是否存在數(shù)組中,JavaScript卻沒有翎承,但是jQuery封裝了inArray()函數(shù)判斷元素是否存在數(shù)組中硕盹。注意了:在ECMAScript5已經(jīng)有數(shù)據(jù)的indexOf方法支持了,但是jQuery保持了版本向下兼容叨咖,所以封裝了一個inArray方法

jQuery.inArray()函數(shù)用于在數(shù)組中搜索指定的值瘩例,并返回其索引值啊胶。如果數(shù)組中不存在該值,則返回 -1垛贤。

語法:

jQuery.inArray( value, array [, fromIndex ] )

用法非常簡單焰坪,傳遞一個檢測的目標(biāo)值,然后傳遞原始的數(shù)組南吮,可以通過fromIndex規(guī)定查找的起始值琳彩,默認(rèn)數(shù)組是0開始

例如:在數(shù)組中查找值是5的索引

$.inArray(5,[1,2,3,4,5,6,7]) //返回對應(yīng)的索引:4

注意:

如果要判斷數(shù)組中是否存在指定值,你需要通過該函數(shù)的返回值不等于(或大于)-1來進行判斷

去空格神器trim方法

頁面中部凑,通過input可以獲取用戶的輸入值露乏,例如常見的登錄信息的提交處理。用戶的輸入不一定是標(biāo)準(zhǔn)的涂邀,輸入一段密碼:' ?1123456 ?"瘟仿,注意了: 密碼的前后會留空,這可能是用戶的無心的行為比勉,但是密碼確實又沒錯劳较,針對這樣的行為,開發(fā)者應(yīng)該要判斷輸入值的前后是否有空白符浩聋、換行符观蜗、制表符這樣明顯的無意義的輸入值。

jQuery.trim()函數(shù)用于去除字符串兩端的空白字符

這個函數(shù)很簡單衣洁,沒有多余的參數(shù)用法

需要注意:

移除字符串開始和結(jié)尾處的所有換行符墓捻,空格(包括連續(xù)的空格)和制表符(tab)

如果這些空白字符在字符串中間時,它們將被保留坊夫,不會被移除

通過右邊的代碼可以明顯看到trim使用后的效果

DOM元素的獲取get方法

jQuery是一個合集對象砖第,如果需要單獨操作合集中的的某一個元素,可以通過.get()方法獲取到

通過jQuery獲取所有的a元素合集$("a")环凿,如果想進一步在合集中找到第二2個dom元素單獨處理梧兼,可以通過get方法

語法:

.get( [index ] )

注意2點

get方法是獲取的dom對象,也就是通過document.getElementById獲取的對象

get方法是從0開始索引

所以第二個a元素的查找: $(a).get(1)

負(fù)索引值參數(shù)

get方法還可以從后往前索引智听,傳遞一個負(fù)索引值羽杰,注意的負(fù)值的索引起始值是-1

同樣是找到第二元素,可以傳遞?$(a).get(-2)

DOM元素的獲取index方法

get方法是通過已知的索引在合集中找到對應(yīng)的元素到推。如果反過來忽洛,已知元素如何在合集中找到對應(yīng)的索引呢?

.index()方法环肘,從匹配的元素中搜索給定元素的索引值欲虚,從0開始計數(shù)。

語法:參數(shù)接受一個jQuery或者dom對象作為查找的條件

.index()

.index( selector )

.index( element )

如果不傳遞任何參數(shù)給 .index() 方法悔雹,則返回值就是jQuery對象中第一個元素相對于它同輩元素的位置

如果在一組元素上調(diào)用 .index() 复哆,并且參數(shù)是一個DOM元素或jQuery對象欣喧, .index() 返回值就是傳入的元素相對于原先集合的位置

如果參數(shù)是一個選擇器, .index() 返回值就是原先元素相對于選擇器匹配元素的位置梯找。如果找不到匹配的元素唆阿,則 .index() 返回 -1

簡單來說:

<ul>?

? ?<a></a>?

? ? ? ? <li></li>

? ? ? ?<li></li>

? ? ? ?<li></li>?

? ? ? ?<li></li>

</ul>

    $("li").index() 沒有傳遞參數(shù),反正的結(jié)果是1锈锤,它的意思是返回同輩的排列循序驯鳖,第一個li之前有a元素,同輩元素是a開始為0,所以li的開始索引是1

    如果要快速找到第二個li在列表中的索引,可以通過如下2種方式處理

    $("li").index(document.getElementById("test2")) //結(jié)果:1$("li").index($("#test2")) ?//結(jié)果:1

    最后編輯于
    ?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
    • 序言:七十年代末久免,一起剝皮案震驚了整個濱河市浅辙,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌阎姥,老刑警劉巖记舆,帶你破解...
      沈念sama閱讀 216,651評論 6 501
    • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異呼巴,居然都是意外死亡泽腮,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
      沈念sama閱讀 92,468評論 3 392
    • 文/潘曉璐 我一進店門衣赶,熙熙樓的掌柜王于貴愁眉苦臉地迎上來诊赊,“玉大人,你說我怎么就攤上這事府瞄”贪酰” “怎么了?”我有些...
      開封第一講書人閱讀 162,931評論 0 353
    • 文/不壞的土叔 我叫張陵摘能,是天一觀的道長。 經(jīng)常有香客問我敲街,道長团搞,這世上最難降的妖魔是什么? 我笑而不...
      開封第一講書人閱讀 58,218評論 1 292
    • 正文 為了忘掉前任多艇,我火速辦了婚禮逻恐,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘峻黍。我一直安慰自己复隆,他們只是感情好,可當(dāng)我...
      茶點故事閱讀 67,234評論 6 388
    • 文/花漫 我一把揭開白布姆涩。 她就那樣靜靜地躺著挽拂,像睡著了一般。 火紅的嫁衣襯著肌膚如雪骨饿。 梳的紋絲不亂的頭發(fā)上亏栈,一...
      開封第一講書人閱讀 51,198評論 1 299
    • 那天台腥,我揣著相機與錄音,去河邊找鬼绒北。 笑死黎侈,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的闷游。 我是一名探鬼主播峻汉,決...
      沈念sama閱讀 40,084評論 3 418
    • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼脐往!你這毒婦竟也來了休吠?” 一聲冷哼從身側(cè)響起,我...
      開封第一講書人閱讀 38,926評論 0 274
    • 序言:老撾萬榮一對情侶失蹤钙勃,失蹤者是張志新(化名)和其女友劉穎蛛碌,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體辖源,經(jīng)...
      沈念sama閱讀 45,341評論 1 311
    • 正文 獨居荒郊野嶺守林人離奇死亡蔚携,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
      茶點故事閱讀 37,563評論 2 333
    • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了克饶。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片酝蜒。...
      茶點故事閱讀 39,731評論 1 348
    • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖矾湃,靈堂內(nèi)的尸體忽然破棺而出亡脑,到底是詐尸還是另有隱情,我是刑警寧澤邀跃,帶...
      沈念sama閱讀 35,430評論 5 343
    • 正文 年R本政府宣布霉咨,位于F島的核電站,受9級特大地震影響拍屑,放射性物質(zhì)發(fā)生泄漏途戒。R本人自食惡果不足惜,卻給世界環(huán)境...
      茶點故事閱讀 41,036評論 3 326
    • 文/蒙蒙 一僵驰、第九天 我趴在偏房一處隱蔽的房頂上張望喷斋。 院中可真熱鬧,春花似錦蒜茴、人聲如沸星爪。這莊子的主人今日做“春日...
      開封第一講書人閱讀 31,676評論 0 22
    • 文/蒼蘭香墨 我抬頭看了看天上的太陽顽腾。三九已至,卻和暖如春诺核,著一層夾襖步出監(jiān)牢的瞬間崔泵,已是汗流浹背秒赤。 一陣腳步聲響...
      開封第一講書人閱讀 32,829評論 1 269
    • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留憎瘸,地道東北人入篮。 一個月前我還...
      沈念sama閱讀 47,743評論 2 368
    • 正文 我出身青樓,卻偏偏與公主長得像幌甘,于是被迫代替她去往敵國和親潮售。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
      茶點故事閱讀 44,629評論 2 354

    推薦閱讀更多精彩內(nèi)容

    • 調(diào)用 show() 和 hide() 方法顯示和隱藏元素 show()和hide()方法用于顯示或隱藏頁面中的元素...
      孤傭閱讀 362評論 0 0
    • jQuery中隱藏元素的hide方法 讓頁面上的元素不可見锅风,一般可以通過設(shè)置css的display為none屬性酥诽。...
      阿r阿r閱讀 1,140評論 0 4
    • 通過jQuery,您可以選戎宀骸(查詢肮帐,query)HTML元素,并對它們執(zhí)行“操作”(actions)边器。 jQuer...
      枇杷樹8824閱讀 656評論 0 3
    • 第1章 動畫基礎(chǔ)隱藏和顯示 1-1 jQuery中隱藏元素的hide方法 讓頁面上的元素不可見训枢,一般可以通過設(shè)置c...
      mo默22閱讀 752評論 0 8
    • (續(xù)jQuery基礎(chǔ)(2)) 四、動畫篇 第1章 動畫基礎(chǔ)隱藏和顯示 (1)隱藏元素的hide方法 讓頁面上的元素...
      凜0_0閱讀 457評論 0 6