最近中文字幕高清中文字幕无,亚洲欧美高清一区二区三区,一本色道无码道dvd在线观看 ,一个人看的www免费高清中文字幕

jq中顯示與隱藏切換toggle方法

show與hide是一對(duì)互斥的方法。需要對(duì)元素進(jìn)行顯示隱藏的互斥切換，通常情況是需要先判斷元素的display狀態(tài)，然后調(diào)用其對(duì)應(yīng)的處理方法。比如顯示的元素，那么就要調(diào)用hide，反之亦然。 對(duì)于這樣的操作行為，jQuery提供了一個(gè)便捷方法toggle用于切換顯示或隱藏匹配元素

基本操作：toggle()

這是最基本的操作，處理元素顯示或者隱藏，因?yàn)椴粠?shù)，所以沒有動(dòng)畫。

• 如果元素是最初顯示，它會(huì)被隱藏

• 如果隱藏的，它會(huì)顯示出來

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

直接定位：.toggle(display)：直接提供一個(gè)參數(shù)，指定要改變的元素的最終效果，其實(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秒的隱藏動(dòng)畫，然后執(zhí)行3秒的顯示動(dòng)畫

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

• toggle：切換顯示與隱藏效果

• sildeToggle：切換上下拉卷滾效果

• fadeToggle：切換淡入淡出效果

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

$elem.hide()

提供參數(shù)

.hide(options)

當(dāng)提供hide方法一個(gè)參數(shù)時(shí)，.hide()就會(huì)成為一個(gè)動(dòng)畫方法。.hide()方法將會(huì)匹配元素的寬度，高度，以及不透明度，同時(shí)進(jìn)行動(dòng)畫操作

下拉動(dòng)畫是從無到有，所以一開始元素是需要先隱藏起來的，可以設(shè)置display:none

• 如 果提供回調(diào)函數(shù)參數(shù)，callback會(huì)在動(dòng)畫完成的時(shí)候調(diào)用。將不同的動(dòng)畫串聯(lián)在一起按順序排列執(zhí)行是非常有用的。這個(gè)回調(diào)函數(shù)不設(shè)置任何參數(shù)，但是 this會(huì)設(shè)成將要執(zhí)行動(dòng)畫的那個(gè)DOM元素，如果多個(gè)元素一起做動(dòng)畫效果，那么要非常注意，回調(diào)函數(shù)會(huì)在每一個(gè)元素執(zhí)行完動(dòng)畫后都執(zhí)行一次，而不是這組 動(dòng)畫整體才執(zhí)行一次

.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

.get(?[index?]?)

注意2點(diǎn)

1. get方法是獲取的dom對(duì)象，也就是通過document.getElementById獲取的對(duì)象

2. get方法是從0開始索引

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

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

get方法還可以從后往前索引，傳遞一個(gè)負(fù)索引值，注意的負(fù)值的索引起始值是-1

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

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

這個(gè)函數(shù)很簡(jiǎn)單，沒有多余的參數(shù)用法

需要注意：

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

• 如果這些空白字符在字符串中間時(shí)，它們將被保留，不會(huì)被移除

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

這個(gè)函數(shù)很簡(jiǎn)單，沒有多余的參數(shù)用法

需要注意：

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

• 如果這些空白字符在字符串中間時(shí)，它們將被保留，不會(huì)被移除

• 
  

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

語(yǔ)法：

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

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

找到所有的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ù)組的遍歷

語(yǔ)法

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ù)組

.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)

1. stop()：只會(huì)停止第一個(gè)動(dòng)畫，第二個(gè)第三個(gè)繼續(xù)

2. stop(true)：停止第一個(gè)、第二個(gè)和第三個(gè)動(dòng)畫

3. stop(true ture)：停止動(dòng)畫，直接跳到第一個(gè)動(dòng)畫的最終狀態(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>');
????}
??});

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

.animate()方法允許我們?cè)谌我獾臄?shù)值的CSS屬性上創(chuàng)建動(dòng)畫。2種語(yǔ)法使用，幾乎差不多了，唯一必要的屬性就是一組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ā)

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ì)被完全顯示（不再影響頁(yè)面的布局）