-
jq中顯示與隱藏切換toggle方法
show與hide是一對互斥的方法。需要對元素進行顯示隱藏的互斥切換，通常情況是需要先判斷元素的display狀態(tài)，然后調用其對應的處理方法。比如顯示的元素，那么就要調用hide，反之亦然。 對于這樣的操作行為，jQuery提供了一個便捷方法toggle用于切換顯示或隱藏匹配元素
基本操作：toggle()
這是最基本的操作，處理元素顯示或者隱藏，因為不帶參數(shù)，所以沒有動畫。
如果元素是最初顯示，它會被隱藏
如果隱藏的，它會顯示出來
提供參數(shù)：.toggle( [duration ] [, complete ] )
直接定位：.toggle(display)：直接提供一個參數(shù)，指定要改變的元素的最終效果，其實就是確定使用show還是hide方法
if(display==true){
????$("elem").show();
}else if(display == false){
????$("elem").hide();
}
查看全部 -
jq中顯示元素的show方法
方法的使用幾乎與hide是一致的，hide是讓元素顯示到隱藏，show則是相反，讓元素從隱藏到顯示
$('elem').hide(3000).show(3000)
讓元素執(zhí)行3秒的隱藏動畫，然后執(zhí)行3秒的顯示動畫
查看全部 -
toggle、sildeToggle以及fadeToggle的區(qū)別：
toggle：切換顯示與隱藏效果
sildeToggle：切換上下拉卷滾效果
fadeToggle：切換淡入淡出效果
查看全部 -
jq中隱藏元素的hide方法：讓頁面上的元素不可見，一般可以通過設置css的display為none屬性。但是通過css直接修改是靜態(tài)的布局，如果在代碼執(zhí)行的時候，一般是通過js控制元素的style屬性，這里jQuery提供了一個快捷的方法.hide()來達到這個效果
$elem.hide()
提供參數(shù)
.hide(options)
當提供hide方法一個參數(shù)時，.hide()就會成為一個動畫方法。.hide()方法將會匹配元素的寬度，高度，以及不透明度，同時進行動畫操作
查看全部 -
下拉動畫是從無到有，所以一開始元素是需要先隱藏起來的，可以設置display:none
如 果提供回調函數(shù)參數(shù)，callback會在動畫完成的時候調用。將不同的動畫串聯(lián)在一起按順序排列執(zhí)行是非常有用的。這個回調函數(shù)不設置任何參數(shù)，但是 this會設成將要執(zhí)行動畫的那個DOM元素，如果多個元素一起做動畫效果，那么要非常注意，回調函數(shù)會在每一個元素執(zhí)行完動畫后都執(zhí)行一次，而不是這組 動畫整體才執(zhí)行一次
查看全部 -
.index() .index(?selector?) .index(?element?)
如果不傳遞任何參數(shù)給 .index() 方法，則返回值就是jQuery對象中第一個元素相對于它同輩元素的位置
如果在一組元素上調用 .index() ，并且參數(shù)是一個DOM元素或jQuery對象， .index() 返回值就是傳入的元素相對于原先集合的位置
如果參數(shù)是一個選擇器， .index() 返回值就是原先元素相對于選擇器匹配元素的位置。如果找不到匹配的元素，則 .index() 返回 -1
簡單來說：
<ul> ????<a></a> ????<li?id="test1">1</li> ????<li?id="test2">2</li> ????<li?id="test3">3</li> </ul>
$("li").index() 沒有傳遞參數(shù)，反正的結果是1，它的意思是返回同輩的排列循序，第一個li之前有a元素,同輩元素是a開始為0，所以li的開始索引是1
如果要快速找到第二個li在列表中的索引,可以通過如下2種方式處理
$("li").index(document.getElementById("test2"))?//結果：1$("li").index($("#test2"))??//結果:1查看全部 -
.get(?[index?]?)
注意2點
get方法是獲取的dom對象，也就是通過document.getElementById獲取的對象
get方法是從0開始索引
所以第二個a元素的查找： $(a).get(1)
負索引值參數(shù)
get方法還可以從后往前索引，傳遞一個負索引值，注意的負值的索引起始值是-1
同樣是找到第二元素，可以傳遞?$(a).get(-2)?
查看全部 -
jQuery.trim()函數(shù)用于去除字符串兩端的空白字符
這個函數(shù)很簡單，沒有多余的參數(shù)用法
需要注意：
移除字符串開始和結尾處的所有換行符，空格(包括連續(xù)的空格)和制表符（tab）
如果這些空白字符在字符串中間時，它們將被保留，不會被移除
查看全部 -
jQuery.trim()函數(shù)用于去除字符串兩端的空白字符
這個函數(shù)很簡單，沒有多余的參數(shù)用法
需要注意：
移除字符串開始和結尾處的所有換行符，空格(包括連續(xù)的空格)和制表符（tab）
如果這些空白字符在字符串中間時，它們將被保留，不會被移除
查看全部 -
jQuery.inArray()函數(shù)用于在數(shù)組中搜索指定的值，并返回其索引值。如果數(shù)組中不存在該值，則返回 -1。
語法：
jQuery.inArray(?value,?array?,[?fromIndex?]?)
用法非常簡單，傳遞一個檢測的目標值，然后傳遞原始的數(shù)組，可以通過fromIndex規(guī)定查找的起始值，默認數(shù)組是0開始
查看全部 -
找到所有的div，并且都設置樣式，css只是一個方法，所以內部會調用each處理這個div的合集，給每個div都設置style屬性
$('div').css(...)jQuery的大部分方法都是針元素合集的操作，所以jQuery會提供$(selector).each()來遍歷jQuery對象
.each只是處理jQuery對象的方法，jQuery還提供了一個通用的jQuery.each方法，用來處理對象和數(shù)組的遍歷
語法
jQuery.each(array,?callback?) jQuery.each(?object,?callback?)
第一個參數(shù)傳遞的就是一個對象或者數(shù)組，第二個是回調函數(shù)
$.each(["Aaron",?"慕課網(wǎng)"],?function(index,?value)?{ ???//index是索引,也就是數(shù)組的索引 ???//value就是數(shù)組中的值了 });each就是for循環(huán)方法的一個包裝，內部就是通過for遍歷數(shù)組與對象，通過回調函數(shù)返回內部迭代的一些參數(shù)，第一個參數(shù)是當前迭代成員在對象或數(shù)組中的索引值(從0開始計數(shù))，第二個參數(shù)是當前迭代成員(與this的引用相同
jQuery.each()函數(shù)還會根據(jù)每次調用函數(shù)callback的返回值來決定后續(xù)動作。如果返回值為false，則停止循環(huán)(相當于普通循環(huán)中的break)；如果返回其他任何值，均表示繼續(xù)執(zhí)行下一個循環(huán)。
$.each(["Aaron",?"慕課網(wǎng)"],?function(index,?value)?{ ????return?false;?//停止迭代 });jQuery方法可以很方便的遍歷一個數(shù)據(jù)，不需要考慮這個數(shù)據(jù)是對象還是數(shù)組
查看全部 -
.stop(?[clearQueue?],?[?jumpToEnd?]?) .stop(?[queue?],?[?clearQueue?]?,[?jumpToEnd?]?)
stop還有幾個可選的參數(shù)，簡單來說可以這3種情況
.stop(); 停止當前動畫，點擊在暫停處繼續(xù)開始
.stop(true); 如果同一元素調用多個動畫方法，尚未被執(zhí)行的動畫被放置在元素的效果隊列中。這些動畫不會開始，直到第一個完成。當調用.stop()的時候，隊列中的下一個動畫立即開始。如果clearQueue參數(shù)提供true值,那么在隊列中的動畫其余被刪除并永遠不會運行
.stop(true,true); 當前動畫將停止，但該元素上的 CSS 屬性會被立刻修改成動畫的目標值
簡單的說：參考下面代碼、
$("#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)?
查看全部 -
.animate(?properties,?options?)
options參數(shù)
duration?- 設置動畫執(zhí)行的時間
easing - 規(guī)定要使用的 easing 函數(shù)，過渡使用哪種緩動函數(shù)
step：規(guī)定每個動畫的每一步完成之后要執(zhí)行的函數(shù)
progress：每一次動畫調用的時候會執(zhí)行這個回調，就是一個進度的概念
complete：動畫完成回調
其中最關鍵的一點就是：
如果多個元素執(zhí)行動畫，回調將在每個匹配的元素上執(zhí)行一次，不是作為整個動畫執(zhí)行一次
列出常用的方式：
$('#elem').animate({ ????width:?'toggle',?? ????height:?'toggle' ??},?{ ????duration:?5000, ????specialEasing:?{ ??????width:?'linear', ??????height:?'easeOutBounce' ????}, ????complete:?function()?{ ??????$(this).after('<div>Animation?complete.</div>'); ????} ??});查看全部 -
.animate(?properties?,[?duration?],?[?easing?],?[?complete?]?) .animate(?properties,?options?)
.animate()方法允許我們在任意的數(shù)值的CSS屬性上創(chuàng)建動畫。2種語法使用，幾乎差不多了，唯一必要的屬性就是一組CSS屬性鍵值對。這組屬性和用于設置.css()方法的屬性鍵值對類似，除了屬性范圍做了更多限制。第二個參數(shù)開始可以單獨傳遞多個實參也可以合并成一個對象傳遞了
參數(shù)分解：
properties：一個或多個css屬性的鍵值對所構成的Object對象。要特別注意所有用于動畫的屬性必須是數(shù)字的，除非另有說明；這些屬性如果不是數(shù)字的將不能使用基本的jQuery功能。比如常見的，border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等這些都是能產生動畫效果的。background-color很明顯不可以，因為參數(shù)是red或者GBG這樣的值，非常用插件，否則正常情況下是不能只用動畫效果的。注意，CSS 樣式使用 DOM 名稱（比如 "fontSize"）來設置，而非 CSS 名稱（比如 "font-size"）。
特別注意單位，屬性值的單位像素（px）,除非另有說明。單位em 和 %需要指定使用
.animate({ ????left:?50,? ????width:?'50px'??? ????opacity:?'show',?? ????fontSize:?"10em", },?500);除了定義數(shù)值，每個屬性能使用'show', 'hide', 和 'toggle'。這些快捷方式允許定制隱藏和顯示動畫用來控制元素的顯示或隱藏
.animate({ ????width:?"toggle" });如果提供一個以+= 或 -=開始的值，那么目標值就是以這個屬性的當前值加上或者減去給定的數(shù)字來計算的
.animate({? ????left:?'+=50px' },?"slow");duration時間
動畫執(zhí)行的時間，持續(xù)時間是以毫秒為單位的；值越大表示動畫執(zhí)行的越慢，不是越快。還可以提供'fast' 和 'slow'字符串，分別表示持續(xù)時間為200 和 600毫秒。
easing動畫運動的算法
jQuery庫中默認調用 swing。如果需要其他的動畫算法，請查找相關的插件
complete回調
動畫完成時執(zhí)行的函數(shù)，這個可以保證當前動畫確定完成后發(fā)會觸發(fā)
查看全部 -
toggle、sildeToggle以及fadeToggle的區(qū)別：
toggle：切換顯示與隱藏效果
sildeToggle：切換上下拉卷滾效果
fadeToggle：切換淡入淡出效果
當然細節(jié)上還是有更多的不同點:
toggle與slideToggle細節(jié)區(qū)別：toggle：動態(tài)效果為從右至左。橫向動作，toggle通過display來判斷切換所有匹配元素的可見性
slideToggle：動態(tài)效果從下至上。豎向動作，slideToggle 通過高度變化來切換所有匹配元素的可見性
fadeToggle方法
fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之間切換。
元素是淡出顯示的，fadeToggle() 會使用淡入效果顯示它們。
元素是淡入顯示的，fadeToggle() 會使用淡出效果顯示它們。
注釋：隱藏的元素不會被完全顯示（不再影響頁面的布局）
查看全部
舉報