-
因?yàn)閯?dòng)畫是異步的，所以要在動(dòng)畫之后執(zhí)行某些操作就必須要寫到回調(diào)函數(shù)里面，這里要特別注意
查看全部 -
get方法是通過已知的索引在合集中找到對(duì)應(yīng)的元素。如果反過來，已知元素如何在合集中找到對(duì)應(yīng)的索引呢？
.index()方法，從匹配的元素中搜索給定元素的索引值，從0開始計(jì)數(shù)。
語法：參數(shù)接受一個(gè)jQuery或者dom對(duì)象作為查找的條件
.index() .index(?selector?) .index(?element?)
如果不傳遞任何參數(shù)給 .index() 方法，則返回值就是jQuery對(duì)象中第一個(gè)元素相對(duì)于它同輩元素的位置
如果在一組元素上調(diào)用 .index() ，并且參數(shù)是一個(gè)DOM元素或jQuery對(duì)象， .index() 返回值就是傳入的元素相對(duì)于原先集合的位置
如果參數(shù)是一個(gè)選擇器， .index() 返回值就是原先元素相對(duì)于選擇器匹配元素的位置。如果找不到匹配的元素，則 .index() 返回 -1
簡(jiǎn)單來說：
<ul> ????<a></a> ????<li?id="test1">1</li> ????<li?id="test2">2</li> ????<li?id="test3">3</li> </ul>
$("li").index() 沒有傳遞參數(shù)，反正的結(jié)果是1，它的意思是返回同輩的排列循序，第一個(gè)li之前有a元素,同輩元素是a開始為0，所以li的開始索引是1
如果要快速找到第二個(gè)li在列表中的索引,可以通過如下2種方式處理
$("li").index(document.getElementById("test2"))?//結(jié)果：1 $("li").index($("#test2"))??//結(jié)果:1查看全部 -
jQuery是一個(gè)合集對(duì)象，如果需要單獨(dú)操作合集中的的某一個(gè)元素，可以通過.get()方法獲取到
以下有3個(gè)a元素結(jié)構(gòu)：
<a>1</a> <a>2</a> <a>3</a>
通過jQuery獲取所有的a元素合集$("a")，如果想進(jìn)一步在合集中找到第二2個(gè)dom元素單獨(dú)處理，可以通過get方法
語法：
.get(?[index?]?)
注意2點(diǎn)
get方法是獲取的dom對(duì)象，也就是通過document.getElementById獲取的對(duì)象
get方法是從0開始索引
所以第二個(gè)a元素的查找： $(a).get(1)
負(fù)索引值參數(shù)
get方法還可以從后往前索引，傳遞一個(gè)負(fù)索引值，注意的負(fù)值的索引起始值是-1
同樣是找到第二元素，可以傳遞?$(a).get(-2)?
查看全部 -
頁面中，通過input可以獲取用戶的輸入值，例如常見的登錄信息的提交處理。用戶的輸入不一定是標(biāo)準(zhǔn)的，輸入一段密碼：' ?1123456 ?"，注意了： 密碼的前后會(huì)留空，這可能是用戶的無心的行為，但是密碼確實(shí)又沒錯(cuò)，針對(duì)這樣的行為，開發(fā)者應(yīng)該要判斷輸入值的前后是否有空白符、換行符、制表符這樣明顯的無意義的輸入值。
jQuery.trim()函數(shù)用于去除字符串兩端的空白字符
這個(gè)函數(shù)很簡(jiǎn)單，沒有多余的參數(shù)用法
需要注意：
移除字符串開始和結(jié)尾處的所有換行符，空格(包括連續(xù)的空格)和制表符（tab）
如果這些空白字符在字符串中間時(shí)，它們將被保留，不會(huì)被移除
查看全部 -
在PHP有in_array()判斷某個(gè)元素是否存在數(shù)組中，JavaScript卻沒有，但是jQuery封裝了inArray()函數(shù)判斷元素是否存在數(shù)組中。注意了：在ECMAScript5已經(jīng)有數(shù)據(jù)的indexOf方法支持了，但是jQuery保持了版本向下兼容，所以封裝了一個(gè)inArray方法
jQuery.inArray()函數(shù)用于在數(shù)組中搜索指定的值，并返回其索引值。如果數(shù)組中不存在該值，則返回 -1。
語法：
jQuery.inArray(?value,?array?,[?fromIndex?]?)
用法非常簡(jiǎn)單，傳遞一個(gè)檢測(cè)的目標(biāo)值，然后傳遞原始的數(shù)組，可以通過fromIndex規(guī)定查找的起始值，默認(rèn)數(shù)組是0開始
例如：在數(shù)組中查找值是5的索引
$.inArray(5,[1,2,3,4,5,6,7])?//返回對(duì)應(yīng)的索引：4
注意：
如果要判斷數(shù)組中是否存在指定值，你需要通過該函數(shù)
的返回值不等于(或大于)-1來進(jìn)行判斷查看全部 -
jQuery中有個(gè)很重要的核心方法each，大部分jQuery方法在內(nèi)部都會(huì)調(diào)用each，其主要的原因的就是jQuery的實(shí)例是一個(gè)元素合集
如下：找到所有的div，并且都設(shè)置樣式，css只是一個(gè)方法，所以內(nèi)部會(huì)調(diào)用each處理這個(gè)div的合集，給每個(gè)div都設(shè)置style屬性
$('div').css(...)jQuery的大部分方法都是針元素合集的操作，所以jQuery會(huì)提供$(selector).each()來遍歷jQuery對(duì)象
.each只是處理jQuery對(duì)象的方法，jQuery還提供了一個(gè)通用的jQuery.each方法，用來處理對(duì)象和數(shù)組的遍歷
語法
jQuery.each(array,?callback?) jQuery.each(?object,?callback?)
第一個(gè)參數(shù)傳遞的就是一個(gè)對(duì)象或者數(shù)組，第二個(gè)是回調(diào)函數(shù)
$.each(["Aaron",?"慕課網(wǎng)"],?function(index,?value)?{ ???//index是索引,也就是數(shù)組的索引 ???//value就是數(shù)組中的值了 });each就是for循環(huán)方法的一個(gè)包裝，內(nèi)部就是通過for遍歷數(shù)組與對(duì)象，通過回調(diào)函數(shù)返回內(nèi)部迭代的一些參數(shù)，第一個(gè)參數(shù)是當(dāng)前迭代成員在對(duì)象或數(shù)組中的索引值(從0開始計(jì)數(shù))，第二個(gè)參數(shù)是當(dāng)前迭代成員(與this的引用相同
jQuery.each()函數(shù)還會(huì)根據(jù)每次調(diào)用函數(shù)callback的返回值來決定后續(xù)動(dòng)作。如果返回值為false，則停止循環(huán)(相當(dāng)于普通循環(huán)中的break)；如果返回其他任何值，均表示繼續(xù)執(zhí)行下一個(gè)循環(huán)。
$.each(["Aaron",?"慕課網(wǎng)"],?function(index,?value)?{ ????return?false;?//停止迭代 });jQuery方法可以很方便的遍歷一個(gè)數(shù)據(jù)，不需要考慮這個(gè)數(shù)據(jù)是對(duì)象還是數(shù)組
查看全部 -
動(dòng)畫在執(zhí)行過程中是允許被暫停的，當(dāng)一個(gè)元素調(diào)用.stop()方法，當(dāng)前正在運(yùn)行的動(dòng)畫（如果有的話）立即停止
語法：
.stop(?[clearQueue?],?[?jumpToEnd?]?) .stop(?[queue?],?[?clearQueue?]?,[?jumpToEnd?]?)
stop還有幾個(gè)可選的參數(shù)，簡(jiǎn)單來說可以這3種情況
.stop(); 停止當(dāng)前動(dòng)畫，點(diǎn)擊在暫停處繼續(xù)開始
.stop(true); 如果同一元素調(diào)用多個(gè)動(dòng)畫方法，尚未被執(zhí)行的動(dòng)畫被放置在元素的效果隊(duì)列中。這些動(dòng)畫不會(huì)開始，直到第一個(gè)完成。當(dāng)調(diào)用.stop()的時(shí)候，隊(duì)列中的下一個(gè)動(dòng)畫立即開始。如果clearQueue參數(shù)提供true值,那么在隊(duì)列中的動(dòng)畫其余被刪除并永遠(yuǎn)不會(huì)運(yùn)行
.stop(true,true); 當(dāng)前動(dòng)畫將停止，但該元素上的 CSS 屬性會(huì)被立刻修改成動(dòng)畫的目標(biāo)值
簡(jiǎn)單的說：參考下面代碼、
$("#aaron").animate({ ????height:?300 },?5000) $("#aaron").animate({ ????width:?300 },?5000) $("#aaron").animate({ ????opacity:?0.6 },?2000)stop()：只會(huì)停止第一個(gè)動(dòng)畫，第二個(gè)第三個(gè)繼續(xù)
stop(true)：停止第一個(gè)、第二個(gè)和第三個(gè)動(dòng)畫
stop(true ture)：停止動(dòng)畫，直接跳到第一個(gè)動(dòng)畫的最終狀態(tài)?
查看全部 -
animate在執(zhí)行動(dòng)畫中，如果需要觀察動(dòng)畫的一些執(zhí)行情況，或者在動(dòng)畫進(jìn)行中的某一時(shí)刻進(jìn)行一些其他處理，我們可以通過animate提供的第二種設(shè)置語法，傳遞一個(gè)對(duì)象參數(shù)，可以拿到動(dòng)畫執(zhí)行狀態(tài)一些通知
.animate(?properties,?options?)
options參數(shù)
duration?- 設(shè)置動(dòng)畫執(zhí)行的時(shí)間
easing - 規(guī)定要使用的 easing 函數(shù)，過渡使用哪種緩動(dòng)函數(shù)
step：規(guī)定每個(gè)動(dòng)畫的每一步完成之后要執(zhí)行的函數(shù)
progress：每一次動(dòng)畫調(diào)用的時(shí)候會(huì)執(zhí)行這個(gè)回調(diào)，就是一個(gè)進(jìn)度的概念
complete：動(dòng)畫完成回調(diào)
其中最關(guān)鍵的一點(diǎn)就是：
如果多個(gè)元素執(zhí)行動(dòng)畫，回調(diào)將在每個(gè)匹配的元素上執(zhí)行一次，不是作為整個(gè)動(dòng)畫執(zhí)行一次
列出常用的方式：
$('#elem').animate({ ????width:?'toggle',?? ????height:?'toggle' ??},?{ ????duration:?5000, ????specialEasing:?{ ??????width:?'linear', ??????height:?'easeOutBounce' ????}, ????complete:?function()?{ ??????$(this).after('<div>Animation?complete.</div>'); ????} ??});查看全部 -
有些復(fù)雜的動(dòng)畫通過之前學(xué)到的幾個(gè)動(dòng)畫函數(shù)是不能夠?qū)崿F(xiàn)，這時(shí)候就需要強(qiáng)大的animate方法了
操作一個(gè)元素執(zhí)行3秒的淡入動(dòng)畫，對(duì)比一下2組動(dòng)畫設(shè)置的區(qū)別
$(elem).fadeOut(3000)?? $(elem).animate({??? ????opacity:0 },3000)顯而易見，animate方法更加靈活了，可以精確的控制樣式屬性從而執(zhí)行動(dòng)畫
語法：
.animate(?properties?,[?duration?],?[?easing?],?[?complete?]?) .animate(?properties,?options?)
.animate()方法允許我們?cè)谌我獾臄?shù)值的CSS屬性上創(chuàng)建動(dòng)畫。2種語法使用，幾乎差不多了，唯一必要的屬性就是一組CSS屬性鍵值對(duì)。這組屬性和用于設(shè)置.css()方法的屬性鍵值對(duì)類似，除了屬性范圍做了更多限制。第二個(gè)參數(shù)開始可以單獨(dú)傳遞多個(gè)實(shí)參也可以合并成一個(gè)對(duì)象傳遞了
參數(shù)分解：
properties：一個(gè)或多個(gè)css屬性的鍵值對(duì)所構(gòu)成的Object對(duì)象。要特別注意所有用于動(dòng)畫的屬性必須是數(shù)字的，除非另有說明；這些屬性如果不是數(shù)字的將不能使用基本的jQuery功能。比如常見的，border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等這些都是能產(chǎn)生動(dòng)畫效果的。background-color很明顯不可以，因?yàn)閰?shù)是red或者GBG這樣的值，非常用插件，否則正常情況下是不能只用動(dòng)畫效果的。注意，CSS 樣式使用 DOM 名稱（比如 "fontSize"）來設(shè)置，而非 CSS 名稱（比如 "font-size"）。
特別注意單位，屬性值的單位像素（px）,除非另有說明。單位em 和 %需要指定使用
.animate({ ????left:?50,? ????width:?'50px'??? ????opacity:?'show',?? ????fontSize:?"10em", },?500);除了定義數(shù)值，每個(gè)屬性能使用'show', 'hide', 和 'toggle'。這些快捷方式允許定制隱藏和顯示動(dòng)畫用來控制元素的顯示或隱藏
.animate({ ????width:?"toggle" });如果提供一個(gè)以+= 或 -=開始的值，那么目標(biāo)值就是以這個(gè)屬性的當(dāng)前值加上或者減去給定的數(shù)字來計(jì)算的
.animate({? ????left:?'+=50px' },?"slow");duration時(shí)間
動(dòng)畫執(zhí)行的時(shí)間，持續(xù)時(shí)間是以毫秒為單位的；值越大表示動(dòng)畫執(zhí)行的越慢，不是越快。還可以提供'fast' 和 'slow'字符串，分別表示持續(xù)時(shí)間為200 和 600毫秒。
easing動(dòng)畫運(yùn)動(dòng)的算法
jQuery庫(kù)中默認(rèn)調(diào)用 swing。如果需要其他的動(dòng)畫算法，請(qǐng)查找相關(guān)的插件
complete回調(diào)
動(dòng)畫完成時(shí)執(zhí)行的函數(shù)，這個(gè)可以保證當(dāng)前動(dòng)畫確定完成后發(fā)會(huì)觸發(fā)
查看全部 -
操作元素的顯示和隱藏可以有幾種方法。
例如：改變樣式display為none
設(shè)置位置高度為0
設(shè)置透明度為0
都能達(dá)到這個(gè)目的，并且針對(duì)這樣的處理jQuery都提供了各自的方法。show/hide、sildeDown/sildeUp、fadeIn/fadeOut。除此之外，還引入了toggle、sildeToggle以及fadeToggle切換方法
toggle、sildeToggle以及fadeToggle的區(qū)別：
toggle：切換顯示與隱藏效果
sildeToggle：切換上下拉卷滾效果
fadeToggle：切換淡入淡出效果
當(dāng)然細(xì)節(jié)上還是有更多的不同點(diǎn):
toggle與slideToggle細(xì)節(jié)區(qū)別：toggle：動(dòng)態(tài)效果為從右至左。橫向動(dòng)作，toggle通過display來判斷切換所有匹配元素的可見性
slideToggle：動(dòng)態(tài)效果從下至上。豎向動(dòng)作，slideToggle 通過高度變化來切換所有匹配元素的可見性
fadeToggle方法
fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之間切換。
元素是淡出顯示的，fadeToggle() 會(huì)使用淡入效果顯示它們。
元素是淡入顯示的，fadeToggle() 會(huì)使用淡出效果顯示它們。
注釋：隱藏的元素不會(huì)被完全顯示（不再影響頁面的布局）
查看全部 -
淡入淡出fadeIn與fadeOut都是修改元素樣式的opacity屬性，但是他們都有個(gè)共同的特點(diǎn)，變化的區(qū)間要么是0，要么是1
fadeIn：淡入效果，內(nèi)容顯示，opacity是0到1 fadeOut：淡出效果，內(nèi)容隱藏，opacity是1到0
如果要讓元素保持動(dòng)畫效果，執(zhí)行opacity = 0.5的效果時(shí)，要如何處理？
如果不考慮CSS3，我們用JS實(shí)現(xiàn)的話，基本就是通過定時(shí)器，在設(shè)定的時(shí)間內(nèi)一點(diǎn)點(diǎn)的修改opacity的值，最終為0.5，原理雖說簡(jiǎn)單，但是總不如一鍵設(shè)置這么舒服，jQuery提供了fadeTo方法，可以讓改變透明度一步到位
語法
.fadeTo( duration, opacity ,callback)
必需的 duration參數(shù)規(guī)定效果的時(shí)長(zhǎng)。它可以取以下值："slow"、"fast" 或毫秒。fadeTo() 方法中必需的 opacity 參數(shù)將淡入淡出效果設(shè)置為給定的不透明度（值介于 0 與 1 之間）?？蛇x的 callback 參數(shù)是該函數(shù)完成后所執(zhí)行的函數(shù)名稱。
查看全部 -
fadeToggle()函數(shù)用于切換所有匹配的元素，并帶有淡入/淡出的過渡動(dòng)畫效果
fadeToggle切換fadeOut與fadeIn效果，所謂"切換"，即
如果元素當(dāng)前是可見的，則將其隱藏(淡出)；如果元素當(dāng)前
是隱藏的，則使其顯示(淡入)。常用語法：.fadeToggle( [duration ] ,[?complete ] )
可選的?duration?參數(shù)規(guī)定效果的時(shí)長(zhǎng)。它可以取以下值："slow"、"fast" 或毫秒。 可選的 callback 參數(shù)是 fadeToggle完成后所執(zhí)行的函數(shù)名稱。
fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進(jìn)行切換。如果元素已淡出，則 fadeToggle() 會(huì)向元素添加淡入效果。如果元素已淡入，則 fadeToggle() 會(huì)向元素添加淡出效果。
查看全部 -
淡入效果fadeIn
.fadeIn( [duration ], [ complete ] )
duration：指定過渡動(dòng)畫運(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ù)用于顯示所有匹配的元素，并帶有淡入的過渡動(dòng)畫效果。
注意：
淡入的動(dòng)畫原理：操作元素的不透明度從0%逐漸增加到100%
如果元素本身是可見的，不對(duì)其作任何改變。如果元素是隱藏的，則使其可見
查看全部 -
slideToggle用滑動(dòng)動(dòng)畫顯示或隱藏一個(gè)匹配元素
基本的操作：slideToggle();
這是最基本的操作，獲取元素的高度，使這個(gè)元素的高度發(fā)生改變，從而讓元素里的內(nèi)容往下或往上滑。
提供參數(shù)：.slideToggle( [duration ] ,[?complete ] )
同樣的提供了時(shí)間、還有動(dòng)畫結(jié)束的回調(diào)。在參數(shù)對(duì)應(yīng)的時(shí)間內(nèi)，元素會(huì)完成動(dòng)畫，然后出發(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)畫后，高度值達(dá)到0的時(shí)候，display 樣式屬性被設(shè)置為none，以確保該元素不再影響頁面布局
查看全部 -
顯示方法slideUp方法
最簡(jiǎn)單的使用：不帶參數(shù)
$("elem").slideUp();這個(gè)使用的含義就是：找到元素的高度，然后采用一個(gè)下滑動(dòng)畫讓元素一直滑到隱藏，當(dāng)高度為0的時(shí)候，也就是不可見的時(shí)，修改元素display 樣式屬性被設(shè)置為none。這樣就能確保這個(gè)元素不會(huì)影響頁面布局了
帶參數(shù)：
.slideUp( [duration ] [, easing ] [, complete
] )同樣可以提供一個(gè)時(shí)間，然后可以使用一種過渡使用哪種緩動(dòng)函數(shù)，jQuery默認(rèn)就2種，可以通過下載插件支持。最后一個(gè)動(dòng)畫結(jié)束的回調(diào)方法。
因?yàn)閯?dòng)畫是異步的，所以要在動(dòng)畫之后執(zhí)行某些操作就
必須要寫到回調(diào)函數(shù)里面，這里要特別注意查看全部
舉報(bào)