-
$("#a1").stop().hide(3000).show(3000) //stop（） 用于避免動(dòng)畫(huà)執(zhí)行過(guò)程中反復(fù)觸發(fā) //語(yǔ)法結(jié)構(gòu) $("#div").stop();//停止當(dāng)前動(dòng)畫(huà)，繼續(xù)下一個(gè)動(dòng)畫(huà) $("#div").stop(true);//清除元素的所有動(dòng)畫(huà) $("#div").stop(false, true);//讓當(dāng)前動(dòng)畫(huà)直接到達(dá)末狀態(tài) ，繼續(xù)下一個(gè)動(dòng)畫(huà) $("#div").stop(true, true);//清除元素的所有動(dòng)畫(huà)，讓當(dāng)前動(dòng)畫(huà)直接到達(dá)末狀態(tài)查看全部
-
語(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方法 頁(yè)面中，通過(guò)input可以獲取用戶(hù)的輸入值，例如常見(jiàn)的登錄信息的提交處理。用戶(hù)的輸入不一定是標(biāo)準(zhǔn)的，輸入一段密碼：' 1123456 "，注意了： 密碼的前后會(huì)留空，這可能是用戶(hù)的無(wú)心的行為，但是密碼確實(shí)又沒(méi)錯(cuò)，針對(duì)這樣的行為，開(kāi)發(fā)者應(yīng)該要判斷輸入值的前后是否有空白符、換行符、制表符這樣明顯的無(wú)意義的輸入值。 jQuery.trim()函數(shù)用于去除字符串兩端的空白字符 這個(gè)函數(shù)很簡(jiǎn)單，沒(méi)有多余的參數(shù)用法 需要注意： 移除字符串開(kāi)始和結(jié)尾處的所有換行符，空格(包括連續(xù)的空格)和制表符（tab） 如果這些空白字符在字符串中間時(shí)，它們將被保留，不會(huì)被移除 通過(guò)右邊的代碼可以明顯看到trim使用后的效果查看全部
-
jQuery中查找數(shù)組中的索引inArray 在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)行判斷查看全部
-
回調(diào)函數(shù)中傳入的兩個(gè)參數(shù)，如果遍歷的是數(shù)組，第一個(gè)參數(shù)是索引值，第二個(gè)參數(shù)是數(shù)組的值；如果遍歷是對(duì)象，第一個(gè)參數(shù)是屬性，第二個(gè)參數(shù)是屬性值。 jQuery.each(<arr>, function(<index>, <val>)) jQuery.each(<obj>, function(<prop>, <val>)) <selector>.each(function(<index>, <ele>)) 停止循環(huán)：在function中返回false。查看全部
-
jQuery中停止動(dòng)畫(huà)stop 動(dòng)畫(huà)在執(zhí)行過(guò)程中是允許被暫停的，當(dāng)一個(gè)元素調(diào)用.stop()方法，當(dāng)前正在運(yùn)行的動(dòng)畫(huà)（如果有的話）立即停止 語(yǔ)法： .stop( [clearQueue ], [ jumpToEnd ] ) .stop( [queue ], [ clearQueue ] ,[ jumpToEnd ] ) stop還有幾個(gè)可選的參數(shù)，簡(jiǎn)單來(lái)說(shuō)可以這3種情況 .stop(); 停止當(dāng)前動(dòng)畫(huà)，點(diǎn)擊在暫停處繼續(xù)開(kāi)始 .stop(true); 如果同一元素調(diào)用多個(gè)動(dòng)畫(huà)方法，尚未被執(zhí)行的動(dòng)畫(huà)被放置在元素的效果隊(duì)列中。這些動(dòng)畫(huà)不會(huì)開(kāi)始，直到第一個(gè)完成。當(dāng)調(diào)用.stop()的時(shí)候，隊(duì)列中的下一個(gè)動(dòng)畫(huà)立即開(kāi)始。如果clearQueue參數(shù)提供true值,那么在隊(duì)列中的動(dòng)畫(huà)其余被刪除并永遠(yuǎn)不會(huì)運(yùn)行 .stop(true,true); 當(dāng)前動(dòng)畫(huà)將停止，但該元素上的 CSS 屬性會(huì)被立刻修改成動(dòng)畫(huà)的目標(biāo)值 簡(jiǎn)單的說(shuō)：參考下面代碼、 $("#aaron").animate({ height: 300 }, 5000) $("#aaron").animate({ width: 300 }, 5000) $("#aaron").animate({ opacity: 0.6 }, 2000) stop()：只會(huì)停止第一個(gè)動(dòng)畫(huà)，第二個(gè)第三個(gè)繼續(xù) stop(true)：停止第一個(gè)、第二個(gè)和第三個(gè)動(dòng)畫(huà) stop(true ture)：停止動(dòng)畫(huà)，直接跳到第一個(gè)動(dòng)畫(huà)的最終狀態(tài)查看全部
-
jQuery中動(dòng)畫(huà)animate(下) animate在執(zhí)行動(dòng)畫(huà)中，如果需要觀察動(dòng)畫(huà)的一些執(zhí)行情況，或者在動(dòng)畫(huà)進(jìn)行中的某一時(shí)刻進(jìn)行一些其他處理，我們可以通過(guò)animate提供的第二種設(shè)置語(yǔ)法，傳遞一個(gè)對(duì)象參數(shù)，可以拿到動(dòng)畫(huà)執(zhí)行狀態(tài)一些通知 .animate( properties, options ) options參數(shù) duration - 設(shè)置動(dòng)畫(huà)執(zhí)行的時(shí)間 easing - 規(guī)定要使用的 easing 函數(shù)，過(guò)渡使用哪種緩動(dòng)函數(shù) step：規(guī)定每個(gè)動(dòng)畫(huà)的每一步完成之后要執(zhí)行的函數(shù) progress：每一次動(dòng)畫(huà)調(diào)用的時(shí)候會(huì)執(zhí)行這個(gè)回調(diào)，就是一個(gè)進(jìn)度的概念 complete：動(dòng)畫(huà)完成回調(diào) 其中最關(guān)鍵的一點(diǎn)就是： 如果多個(gè)元素執(zhí)行動(dòng)畫(huà)，回調(diào)將在每個(gè)匹配的元素上執(zhí)行一次，不是作為整個(gè)動(dòng)畫(huà)執(zhí)行一次 列出常用的方式： $('#elem').animate({ width: 'toggle', height: 'toggle' }, { duration: 5000, specialEasing: { width: 'linear', height: 'easeOutBounce' }, complete: function() { $(this).after('<div>Animation complete.</div>'); } });查看全部
-
toggle、sildeToggle以及fadeToggle的區(qū)別： toggle：切換顯示與隱藏效果 sildeToggle：切換上下拉卷滾效果 fadeToggle：切換淡入淡出效果 $('#btnShow').click(function(){ var v = $('#animation').val(); if (v=="1"){ $('p').toggle(); } else if (v=="2"){ $('p').slideToggle('slow'); } else{ $('p').fadeToggle(1000,'linear') } });查看全部
-
淡入淡出fadeIn與fadeOut都是修改元素樣式的opacity屬性，但是他們都有個(gè)共同的特點(diǎn)，變化的區(qū)間要么是0，要么是1 fadeIn：淡入效果，內(nèi)容顯示，opacity是0到1 fadeOut：淡出效果，內(nèi)容隱藏，opacity是1到0 如果要讓元素保持動(dòng)畫(huà)效果，執(zhí)行opacity = 0.5的效果時(shí)，要如何處理？ 如果不考慮CSS3，我們用JS實(shí)現(xiàn)的話，基本就是通過(guò)定時(shí)器，在設(shè)定的時(shí)間內(nèi)一點(diǎn)點(diǎn)的修改opacity的值，最終為0.5，原理雖說(shuō)簡(jiǎn)單，但是總不如一鍵設(shè)置這么舒服，jQuery提供了fadeTo方法，可以讓改變透明度一步到位 語(yǔ)法 .fadeTo( duration, opacity ,callback) 必需的 duration參數(shù)規(guī)定效果的時(shí)長(zhǎng)。它可以取以下值："slow"、"fast" 或毫秒。fadeTo() 方法中必需的 opacity 參數(shù)將淡入淡出效果設(shè)置為給定的不透明度（值介于 0 與 1 之間）。可選的 callback 參數(shù)是該函數(shù)完成后所執(zhí)行的函數(shù)名稱(chēng)。查看全部
-
jQuery中淡入淡出切換fadeToggle fadeToggle()函數(shù)用于切換所有匹配的元素，并帶有淡入/淡出的過(guò)渡動(dòng)畫(huà)效果。之前也學(xué)過(guò)toggle、slideToggle 也是類(lèi)似的處理方式 fadeToggle切換fadeOut與fadeIn效果，所謂"切換"，即如果元素當(dāng)前是可見(jiàn)的，則將其隱藏(淡出)；如果元素當(dāng)前是隱藏的，則使其顯示(淡入)。 常用語(yǔ)法：.fadeToggle( [duration ] ,[ complete ] )查看全部
-
jQuery中淡入動(dòng)畫(huà)fadeIn fadeOut是淡出效果，相反的還有淡入效果fadeIn,方法使用上兩者都是一致的，只是結(jié)果相反 .fadeIn( [duration ], [ complete ] ) duration：指定過(guò)渡動(dòng)畫(huà)運(yùn)行多長(zhǎng)時(shí)間(毫秒數(shù))，默認(rèn)值為400。該參數(shù)也可以為字符串"fast"(=200)或"slow"(=600)。 元素顯示完畢后需要執(zhí)行的函數(shù)。函數(shù)內(nèi)的this指向當(dāng)前DOM元素。 fadeIn()函數(shù)用于顯示所有匹配的元素，并帶有淡入的過(guò)渡動(dòng)畫(huà)效果。 注意： 淡入的動(dòng)畫(huà)原理：操作元素的不透明度從0%逐漸增加到100% 如果元素本身是可見(jiàn)的，不對(duì)其作任何改變。如果元素是隱藏的，則使其可見(jiàn)查看全部
-
jQuery中淡出動(dòng)畫(huà)fadeOut 讓元素在頁(yè)面不可見(jiàn)，常用的辦法就是通過(guò)設(shè)置樣式的display:none。除此之外還可以一些類(lèi)似的辦法可以達(dá)到這個(gè)目的。這里要提一個(gè)透明度的方法，設(shè)置元素透明度為0，可以讓元素不可見(jiàn)，透明度的參數(shù)是0~1之間的值，通過(guò)改變這個(gè)值可以讓元素有一個(gè)透明度的效果。常見(jiàn)的淡入淡出動(dòng)畫(huà)正是這樣的原理。 fadeOut()函數(shù)用于隱藏所有匹配的元素，并帶有淡出的過(guò)渡動(dòng)畫(huà)效果 所謂"淡出"隱藏的，元素是隱藏狀態(tài)不對(duì)作任何改變，元素是可見(jiàn)的，則將其隱藏。 .fadeOut( [duration ], [ complete ] ) 通過(guò)不透明度的變化來(lái)實(shí)現(xiàn)所有匹配元素的淡出效果，并在動(dòng)畫(huà)完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。這個(gè)動(dòng)畫(huà)只調(diào)整元素的不透明度，也就是說(shuō)所有匹配的元素的高度和寬度不會(huì)發(fā)生變化。 字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時(shí)。如果提供任何其他字符串，或者這個(gè)duration參數(shù)被省略，那么默認(rèn)使用400毫秒的延時(shí)查看全部
-
jQuery中上卷下拉切換slideToggle slideDown與slideUp是一對(duì)相反的方法。需要對(duì)元素進(jìn)行上下拉卷效果的切換，jQuery提供了一個(gè)便捷方法slideToggle用滑動(dòng)動(dòng)畫(huà)顯示或隱藏一個(gè)匹配元素 基本的操作：slideToggle(); 這是最基本的操作，獲取元素的高度，使這個(gè)元素的高度發(fā)生改變，從而讓元素里的內(nèi)容往下或往上滑。 提供參數(shù)：.slideToggle( [duration ] ,[ complete ] ) 同樣的提供了時(shí)間、還有動(dòng)畫(huà)結(jié)束的回調(diào)。在參數(shù)對(duì)應(yīng)的時(shí)間內(nèi)，元素會(huì)完成動(dòng)畫(huà)，然后出發(fā)回調(diào)函數(shù) 同時(shí)也提供了時(shí)間的快速定義，字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時(shí) slideToggle("fast") slideToggle("slow") 注意： display屬性值保存在jQuery的數(shù)據(jù)緩存中，所以display可以方便以后可以恢復(fù)到其初始值 當(dāng)一個(gè)隱藏動(dòng)畫(huà)后，高度值達(dá)到0的時(shí)候，display 樣式屬性被設(shè)置為none，以確保該元素不再影響頁(yè)面布局查看全部
-
jQuery中上卷動(dòng)畫(huà)slideUp 對(duì)于顯示的元素，在將其隱藏的過(guò)程中，可以對(duì)其進(jìn)行一些變化的動(dòng)畫(huà)效果。之前學(xué)過(guò)了hide方法，hide方法在顯示的過(guò)程中也可以有動(dòng)畫(huà)，但 是.hide()方法將為匹配元素的寬度，高度，以及不透明度，同時(shí)進(jìn)行動(dòng)畫(huà)操作。這里將要學(xué)習(xí)一個(gè)新的顯示方法slideUp方法 最簡(jiǎn)單的使用：不帶參數(shù) $("elem").slideUp(); 這個(gè)使用的含義就是：找到元素的高度，然后采用一個(gè)下滑動(dòng)畫(huà)讓元素一直滑到隱藏，當(dāng)高度為0的時(shí)候，也就是不可見(jiàn)的時(shí)，修改元素display 樣式屬性被設(shè)置為none。這樣就能確保這個(gè)元素不會(huì)影響頁(yè)面布局了 帶參數(shù)： .slideUp( [duration ] [, easing ] [, complete ] ) 同樣可以提供一個(gè)時(shí)間，然后可以使用一種過(guò)渡使用哪種緩動(dòng)函數(shù)，jQuery默認(rèn)就2種，可以通過(guò)下載插件支持。最后一個(gè)動(dòng)畫(huà)結(jié)束的回調(diào)方法。 因?yàn)閯?dòng)畫(huà)是異步的，所以要在動(dòng)畫(huà)之后執(zhí)行某些操作就必須要寫(xiě)到回調(diào)函數(shù)里面，這里要特別注意查看全部
-
注意事項(xiàng)： 下拉動(dòng)畫(huà)是從無(wú)到有，所以一開(kāi)始元素是需要先隱藏起來(lái)的，可以設(shè)置display:none 如 果提供回調(diào)函數(shù)參數(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à)的那個(gè)DOM元素，如果多個(gè)元素一起做動(dòng)畫(huà)效果，那么要非常注意，回調(diào)函數(shù)會(huì)在每一個(gè)元素執(zhí)行完動(dòng)畫(huà)后都執(zhí)行一次，而不是這組 動(dòng)畫(huà)整體才執(zhí)行一次查看全部
舉報(bào)
0/150
提交
取消