-
上卷下拉切換slideToggle slideDown與slideUp是一對相反的方法。需要對元素進行上下拉卷效果的切換，jQuery提供了一個便捷方法slideToggle用滑動動畫顯示或隱藏一個匹配元素 基本的操作：slideToggle(); 這是最基本的操作，獲取元素的高度，使這個元素的高度發生改變，從而讓元素里的內容往下或往上滑。 提供參數：.slideToggle( [duration ] [, complete ] ) 同樣的提供了時間、還有動畫結束的回調。在參數對應的時間內，元素會完成動畫，然后出發回調函數 同時也提供了時間的快速定義，字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時 slideToggle("fast") slideToggle("slow") 注意： display屬性值保存在jQuery的數據緩存中，所以display可以方便以后可以恢復到其初始值 當一個隱藏動畫后，高度值達到0的時候，display 樣式屬性被設置為none，以確保該元素不再影響頁面布局查看全部
-
上卷動畫slideUp 對于顯示的元素，在將其隱藏的過程中，可以對其進行一些變化的動畫效果。之前學過了hide方法，hide方法在顯示的過程中也可以有動畫，但 是.hide()方法將為匹配元素的寬度，高度，以及不透明度，同時進行動畫操作。這里將要學習一個新的顯示方法slideUp方法 最簡單的使用：不帶參數 $("elem").slideUp(); 這個使用的含義就是：找到元素的高度，然后采用一個下滑動畫讓元素一直滑到隱藏，當高度為0的時候，也就是不可見的時，修改元素display 樣式屬性被設置為none。這樣就能確保這個元素不會影響頁面布局了 帶參數： .slideUp( [duration ] [, easing ] [, complete ] ) 同樣可以提供一個時間，然后可以使用一種過渡使用哪種緩動函數，jQuery默認就2種，可以通過下載插件支持。最后一個動畫結束的回調方法。 因為動畫是異步的，所以要在動畫之后執行某些操作就必須要寫到回調函數里面，這里要特別注意查看全部
-
slideDown()：用滑動動畫顯示一個匹配元素 .slideDown()方法將給匹配元素的高度的動畫，這會導致頁面的下面部分滑下去，彌補了顯示的方式 常見的操作，提供一個動畫是時間，然后傳遞一個回調，用于知道動畫是什么時候結束 .slideDown( [duration ] [, complete ] ) 持續時間（duration）是以毫秒為單位的，數值越大，動畫越慢，不是越快。字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時。如果提供任何其他字符串，或者這個duration參數被省略，那么默認使用400 毫秒的延時。 具體使用： $("ele").slideDown(1000, function() { //等待動畫執行1秒后,執行別的動作.... }); 注意事項： 下拉動畫是從無到有，所以一開始元素是需要先隱藏起來的，可以設置display:none 如 果提供回調函數參數，callback會在動畫完成的時候調用。將不同的動畫串聯在一起按順序排列執行是非常有用的。這個回調函數不設置任何參數，但是 this會設成將要執行動畫的那個DOM元素，如果多個元素一起做動畫效果，那么要非常注意，回調函數會在每一個元素執行完動畫后都執行一次，而不是這組 動畫整體才執行一次查看全部
-
顯示與隱藏切換toggle方法 show與hide是一對互斥的方法。需要對元素進行顯示隱藏的互斥切換，通常情況是需要先判斷元素的display狀態，然后調用其對應的處理方法。比如顯示的元素，那么就要調用hide，反之亦然。 對于這樣的操作行為，jQuery提供了一個便捷方法toggle用于切換顯示或隱藏匹配元素 基本的操作：toggle(); 這是最基本的操作，處理元素顯示或者隱藏，因為不帶參數，所以沒有動畫。通過改變CSS的display屬性，匹配的元素將被立即顯示或隱藏，沒有動畫。 如果元素是最初顯示，它會被隱藏 如果隱藏的，它會顯示出來 display屬性將被儲存并且需要的時候可以恢復。如果一個元素的display值為inline，然后是隱藏和顯示，這個元素將再次顯示inline 提供參數：.toggle( [duration ] [, complete ] ) 同樣的提供了時間、還有動畫結束的回調。在參數對應的時間內，元素會發生顯示/隱藏的改變，在改變的過程中會把元素的高、寬、不透明度進行一系列動畫。這個元素其實就是show與hide的方法 直接定位：.toggle(display) 直接提供一個參數，指定要改變的元素的最終效果 其實就是確定是使用show還是hide方法 if ( display === true ) { $( "elem" ).show(); } else if ( display === false ) { $( "elem" ).hide(); } toggle方法就是show與hide的相互切換的一個快捷方法，具體使用可以參考右邊的案例：查看全部
-
顯示元素的show方法 css中有display:none屬性，同時也有display:block，所以jQuery同樣提供了與hide相反的show方法 方法的使用幾乎與hide是一致的，hide是讓元素顯示到隱藏，show則是相反，讓元素從隱藏到顯示 看一段代碼：使用上一致，結果相反 $('elem').hide(3000).show(3000) 讓元素執行3秒的隱藏動畫，然后執行3秒的顯示動畫。 show與hide方法是非常常用的，但是一般很少會基于這2個屬性執行動畫，大多情況下還是直接操作元素的顯示與隱藏為主 注意事項： show與hide方法是修改的display屬性，通過是visibility屬性布局需要通過css方法單獨設置 如果使用!important在你的樣式中，比如display: none !important，如果你希望.show()方法才能正常工作，必須使用.css('display', 'block !important')重寫樣式 如果讓show與hide成為一個動畫，那么默認執行動畫會改變元素的高度，高度，透明度查看全部
-
hide()方法將為匹配元素的寬度，高度，以及不透明度，同時進行動畫操作 隱藏元素的hide方法 執行動畫隱藏： .hide(fast/slow) fast和slow分別代表200和600毫秒的延時，就是元素會執行200、600毫秒的動畫后再隱藏。 例子寫法一： $("#a2").hide(2000); 如果要設置動畫的多個參數： $("#a2").hide({ duration:2000, complete:function(){ alert("執行2000毫秒動畫完畢") } }) 寫法二： $("#a1").hide(2000,function () { alert("123"); });查看全部
-
去空格神器trim方法 頁面中，通過input可以獲取用戶的輸入值，例如常見的登錄信息的提交處理。用戶的輸入不一定是標準的，輸入一段密碼：' 1123456 "，注意了： 密碼的前后會留空，這可能是用戶的無心的行為，但是密碼確實又沒錯，針對這樣的行為，開發者應該要判斷輸入值的前后是否有空白符、換行符、制表符這樣明顯的無意義的輸入值。 jQuery.trim()函數用于去除字符串兩端的空白字符 這個函數很簡單，沒有多余的參數用法 需要注意： 移除字符串開始和結尾處的所有換行符，空格(包括連續的空格)和制表符（tab） 如果這些空白字符在字符串中間時，它們將被保留，不會被移除 通過右邊的代碼可以明顯看到trim使用后的效果查看全部
-
查找數組中的索引inArray 在PHP有in_array()判斷某個元素是否存在數組中，JavaScript卻沒有，但是jQuery封裝了inArray()函數判斷元素是否存在數組中。注意了：在ECMAScript5已經有數據的indexOf方法支持了，但是jQuery保持了版本向下兼容，所以封裝了一個inArray方法 jQuery.inArray()函數用于在數組中搜索指定的值，并返回其索引值。如果數組中不存在該值，則返回 -1。 語法： jQuery.inArray( value, array [, fromIndex ] ) 用法非常簡單，傳遞一個檢測的目標值，然后傳遞原始的數組，可以通過fromIndex規定查找的起始值，默認數組是0開始 例如：在數組中查找值是5的索引 $.inArray(5,[1,2,3,4,5,6,7]) //返回對應的索引：4 注意： 如果要判斷數組中是否存在指定值，你需要通過該函數的返回值不等于(或大于)-1來進行判斷查看全部
-
在jQuery庫中，$只不過是jQuery的簡寫！所以$.each==jQuery.each是等價的！查看全部
-
each方法的應用 jQuery中有個很重要的核心方法each，大部分jQuery方法在內部都會調用each，其主要的原因的就是jQuery的實例是一個元素合集 如下：找到所有的div，并且都設置樣式，css只是一個方法，所以內部會調用each處理這個div的合集，給每個div都設置style屬性 $('div').css(...) jQuery的大部分方法都是針元素合集的操作，所以jQuery會提供$(selector).each()來遍歷jQuery對象 .each只是處理jQuery對象的方法，jQuery還提供了一個通用的jQuery.each方法，用來處理對象和數組的遍歷 語法 jQuery.each(array, callback ) jQuery.each( object, callback ) 第一個參數傳遞的就是一個對象或者數組，第二個是回調函數 $.each(["Aaron", "慕課網"], function(index, value) { //index是索引,也就是數組的索引 //value就是數組中的值了 }); each就是for循環方法的一個包裝，內部就是通過for遍歷數組與對象，通過回調函數返回內部迭代的一些參數，第一個參數是當前迭代成員在對象或數組中的索引值(從0開始計數)，第二個參數是當前迭代成員(與this的引用相同 jQuery.each()函數還會根據每次調用函數callback的返回值來決定后續動作。如果返回值為false，則停止循環(相當于普通循環中的break)；如果返回其他任何值，均表示繼續執行下一個循環。 $.each(["Aaron", "慕課網"], function(index, value) { return false; //停止迭代 });查看全部
-
<script type="text/javascript"> //【切換顯示/隱藏】按鈕 $("#btnFadeSwitch").click(function() { var v = $("#animation").val(); if (v == "1") { $("p").fadeTo("slow", 0.5); } else if (v == "2") { $("p").fadeTo(1000, 0.2); } else if (v == "3") { $("p").fadeTo(1000, 0.9, function() { alert('完成') }); } }); </script>查看全部
-
淡入淡出fadeIn與fadeOut都是修改元素樣式的opacity屬性，但是他們都有個共同的特點，變化的區間要么是0，要么是1 fadeIn：淡出效果，即要顯示出來，opacity是0到1 fadeOut：淡入效果，即要隱藏出來，opacity是1到0 如果要讓元素保持動畫效果，執行opacity = 0.5的效果時，要如何處理？ 如果不考慮CSS3，我們用JS實現的話，基本就是通過定時器，在設定的時間內一點點的修改opacity的值，最終為0.5，原理雖說簡單，但是總不如一鍵設置這么舒服，jQuery提供了fadeTo方法，可以讓改變透明度一步到位 語法 .fadeTo( duration, opacity [, complete ] ) 必需的 duration參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。fadeTo() 方法中必需的 opacity 參數將淡入淡出效果設置為給定的不透明度（值介于 0 與 1 之間）?？蛇x的 callback 參數是該函數完成后所執行的函數名稱。查看全部
-
淡入淡出切換fadeToggle fadeToggle()函數用于切換所有匹配的元素，并帶有淡入/淡出的過渡動畫效果。之前也學過toggle、slideToggle 也是類似的處理方式 fadeToggle切換fadeOut與fadeIn效果，所謂"切換"，即如果元素當前是可見的，則將其隱藏(淡出)；如果元素當前是隱藏的，則使其顯示(淡入)。 常用語法：.fadeToggle( [duration ] [, complete ] ) 可選的 duration 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。 可選的 callback 參數是 fadeToggle完成后所執行的函數名稱。 fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。如果元素已淡出，則 fadeToggle() 會向元素添加淡入效果。如果元素已淡入，則 fadeToggle() 會向元素添加淡出效果。查看全部
-
val()方法，當沒設置value屬性時，獲取的是<option>中的文本，如“ <option>慕課網</option>”獲取到的是“慕課網”； 設置了value屬性的話，獲取到就是value的值，如“<option value=‘imooc’>慕課網</option>”獲取到的是“imooc”而不是“慕課網”了。查看全部
-
淡出動畫fadeOut 讓元素在頁面不可見，常用的辦法就是通過設置樣式的display:none。除此之外還可以一些類似的辦法可以達到這個目的。這里要提一個透明度的方法，設置元素透明度為0，可以讓元素不可見，透明度的參數是0~1之間的值，通過改變這個值可以讓元素有一個透明度的效果。常見的淡入淡出動畫正是這樣的原理。 fadeOut()函數用于隱藏所有匹配的元素，并帶有淡出的過渡動畫效果 所謂"淡出"隱藏的，元素是隱藏狀態不對作任何改變，元素是可見的，則將其隱藏。 .fadeOut( [duration ] [, complete ] ) 通過不透明度的變化來實現所有匹配元素的淡出效果，并在動畫完成后可選地觸發一個回調函數。這個動畫只調整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會發生變化。 字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時。如果提供任何其他字符串，或者這個duration參數8被省略，那么默認使用400毫秒的延時查看全部
舉報
0/150
提交
取消