鍵盤事件
keydown([[data],fn])
描述: 為 “keydown” 鍵盤按下時觸發 事件系結一個處理函式，或者觸發元素上的 “keydown” 事件，
語法：
- .keydown( handler(eventObject) )
$('#target').keydown(function() {
alert('Handler for .keydown() called.');
});
- .keydown( [eventData ], handler(eventObject) ) 可以接受兩個引數：
- 引數一：一個包含鍵值對映射物件將被傳遞給事件處理程式，
- 引數二：每次事件觸發時會執行的函式，函式接受event事件物件作為引數，
$('#target').keydown({msg:'hello'},function(event) {
alert('Handler for .keydown() called.' + event.data.msg);
});
- .keydown() 這個方法不接受任何引數出發元素的"keydown"事件
$('#other').click(function() {
$('#outer').keydown();
});
keypress([[data],fn])
描述: 為 “keypress” 事件系結一個處理函式，或者觸發元素上的 “keypress” 事件，
注意：由于keypress事件沒有統一的官方規范說明，所以在不同的瀏覽器，不同的瀏覽器版本，和不同的平臺實際使用這個事件時可能遇到的問題，
當瀏覽器捕獲一個元素上鍵盤輸入時，keypress就會發送個元素，這是類似keydown事件，除了當按鍵被一直按下（即連續插入字符的場合）時的處理，如果用戶按下并按住這個鍵（不松開釋放）的時候，keydown事件只觸發一次，但是keypress會在每個字符插入的時候都會觸發事件，此外，組合鍵（如Shift）會觸發keydown事件，但不會觸發keypress事件，
keypress事件處理程式可以附加到任何元素，但該事件只是發送到具有焦點的元素上，不同的瀏覽器中，可獲得焦點的元素略有不同，但是表單元素總是能獲取焦點，所以對于此事件型別表單元素是最合適的，
值得注意的是keydown 和 keyup提供一個代碼，表示哪一個鍵被按下，而keypress表示被輸入哪個字符，例如，按下了小寫的 “a”，在 keydown和keyup 中，對應該鍵的代碼是 65，但是對于 keypress 而言，接收到的代碼是 97，如果是大寫 “A” 的話，則所有的相關事件接收到的代碼都是 65，由于這個區別，若想捕獲敲擊了哪個特殊鍵的話，例如，方向鍵，使用 .keydown()或.keyup() 更好，
語法：
- .keypress( handler(eventObject) )
$("#target").keypress(function() {
alert("Handler for .keypress() called.");
});
- .keypress( [eventData ], handler(eventObject) ) 可以接受兩個引數：
- 引數一：一個包含鍵值對映射物件將被傳遞給事件處理程式，
- 引數二：每次事件觸發時會執行的函式，函式接受event事件物件作為引數，
$('#target').keypress({msg:'hello'},function(event) {
alert('Handler for .keypress() called.' + event.data.msg);
});
- .keypress() 這個方法不接受任何引數出發元素的"keypress"事件
$('#other').click(function() {
$('#outer').keypress();
});
keyup([[data],fn]) 發
描述: 為 JavaScript 的"keyup" 事件系結一個處理器，或者觸發元素上的 “keyup” 事件，
語法：
- .keyup( handler(eventObject) )
$('#target').keyup(function() {
alert('Handler for .keyup() called.');
});
- .keyup( [eventData ], handler(eventObject) ) 可以接受兩個引數：
- 引數一：一個包含鍵值對映射物件將被傳遞給事件處理程式，
- 引數二：每次事件觸發時會執行的函式，函式接受event事件物件作為引數，
$('#target').keyup({msg:'hello'},function(event) {
alert('Handler for .keyup() called.' + event.data.msg);
});
- .keyup() 這個方法不接受任何引數出發元素的"keyup"事件
$('#other').click(function() {
$('#target').keyup();
});
「課堂練習」
使用jQuery實作聊天框功能
要求：
- 創建一個上圖所示的聊天框
- 實作點擊發送或按下快捷鍵
ctrl+enter將輸入框中的文本內容以聊天氣泡的形式添加到頁面上- 在發送訊息時，如果表單內容為空則不回應發送事件
表單事件
.blur([[data],fn])
描述: 為 “blur” 事件系結一個處理函式，或者觸發元素上的 “blur” 事件,此事件不支持冒泡，
語法：
- .blur( handler(eventObject) )
$('#target').blur(function() {
alert('Handler for .blur() called.');
});
- .blur( [eventData ], handler(eventObject) ) 可以接受兩個引數：
- 引數一：一個包含鍵值對映射物件將被傳遞給事件處理程式，
- 引數二：每次事件觸發時會執行的函式，函式接受event事件物件作為引數，
$('#target').blur({msg:'hello'},function(event) {
alert('Handler for .blur() called.' + event.data.msg);
});
- .blur() 這個方法不接受任何引數出發元素的"blur"事件
$('#other').click(function() {
$('#target').blur();
});
.focus([[data],fn])
描述: 為 JavaScript 的"focus" 事件系結一個處理器，或者觸發元素上的 “focus” 事件，
語法：
- .focus( handler(eventObject) )
$('#target').focus(function() {
alert('Handler for .focus() called.');
});
- .focus( [eventData ], handler(eventObject) ) 可以接受兩個引數：
- 引數一：一個包含鍵值對映射物件將被傳遞給事件處理程式，
- 引數二：每次事件觸發時會執行的函式，函式接受event事件物件作為引數，
$('#target').focus({msg:'hello'},function(event) {
alert('Handler for .focus() called.' + event.data.msg);
});
- .focus() 這個方法不接受任何引數出發元素的"focus"事件
$('#other').click(function() {
$('#outer').focus();
});
.change([[data],fn])
描述: 為 JavaScript 的"change" 事件系結一個處理器，或者觸發元素上的 “change” 事件，
一個元素的值改變的時候將觸發change事件，此事件僅限用于
<input>元素，<textarea>和<select>元素，對于下拉選擇框，復選框和單選按鈕，當用戶用滑鼠作出選擇，該事件立即觸發，但對于其他型別的input元素，該事件觸發將推遲，直到元素失去焦點才會觸點，
語法：
- .change( handler(eventObject) )
$('.target').change(function() {
alert('Handler for .change() called.');
});
- .change( [eventData ], handler(eventObject) ) 可以接受兩個引數：
- 引數一：一個包含鍵值對映射物件將被傳遞給事件處理程式，
- 引數二：每次事件觸發時會執行的函式，函式接受event事件物件作為引數，
$('#target').change({msg:'hello'},function(event) {
alert('Handler for .change() called.' + event.data.msg);
});
- .change() 這個方法不接受任何引數出發元素的"change"事件
$('#other').click(function() {
$('.target').change();
});
.submit([[data],fn])
描述: 為 JavaScript 的 “submit” 事件系結一個處理函式，或者觸發元素上的該事件，
它只能系結在
<form>元素上，以下幾種情況會導致表單被提交：用戶點擊了<input type="submit">,<input type="image">, 或者<button type="submit">，或者當某些表單元素獲取焦點時，都可以提交，
語法：
- .submit( handler(eventObject) )
$('#target').submit(function() {
alert('Handler for .submit() called.');
return false;
});
- .submit( [eventData ], handler(eventObject) ) 可以接受兩個引數：
- 引數一：一個包含鍵值對映射物件將被傳遞給事件處理程式，
- 引數二：每次事件觸發時會執行的函式，函式接受event事件物件作為引數，
$('#target').submit({msg:'hello'},function(event) {
alert('Handler for .submit() called.' + event.data.msg);
return false;
});
- .submit() 這個方法不接受任何引數出發元素的"submit"事件
$('#other').click(function() {
$('#target').submit();
});
其他事件
.resize([[data],fn])
描述: 為 JavaScript 的"resize" 事件系結一個處理器，或者觸發元素上的事件，當瀏覽器window的尺寸改變時，window元素上系結的resize事件將被觸發，
注意：resize 事件處理中的代碼，不應該依賴于事件被呼叫的次數，由于不同瀏覽器對該事件實作的方式不同，該事件被呼叫的時機也不同，例如，對于 Internet Explorer 或 基于 WebKit 的瀏覽器（例如，Safari 和 Chrome）而言，resize 事件在視窗改變的程序中，會被連續呼叫，在某些瀏覽器，如 Opera，該事件只在調整視窗大小操作結束時被呼叫，
語法：
- .resize( handler(eventObject) )
$(window).resize(function() {
$('#log').append('<div>Handler for .resize() called.</div>');
});
- .resize( [eventData ], handler(eventObject) ) 可以接受兩個引數：
- 引數一：一個包含鍵值對映射物件將被傳遞給事件處理程式，
- 引數二：每次事件觸發時會執行的函式，函式接受event事件物件作為引數，
$('window').resize({msg:'hello'},function(event) {
$('body').prepend('<div>' + event.data.msg + $(window).width() + '</div>');
});
- .resize() 這個方法不接受任何引數出發元素的"resize"事件
$('#other').click(function() {
$('window').resize();
});
.scroll([[data],fn])
描述: 為 JavaScript 的 “scroll” 事件系結一個處理函式，或者觸發元素上的該事件，
當用戶在元素內執行了滾動操作，就會在這個元素上觸發scroll事件，它適用于window物件，但也可以是可滾動frames與CSS overflow屬性設定為scroll的元素（或auto時，元素的顯示高度小于其內容高度），
語法：
- .scroll( handler(eventObject) )
$('#target').scroll(function() {
$('#log').append('<div>Handler for .scroll() called.</div>');
});
- .scroll( [eventData ], handler(eventObject) ) 可以接受兩個引數：
- 引數一：一個包含鍵值對映射物件將被傳遞給事件處理程式，
- 引數二：每次事件觸發時會執行的函式，函式接受event事件物件作為引數，
$('#target').scroll({msg:'hello'},function(event) {
$('#log').append('<div>' + event.data.msg + 'Handler for .scroll() called.</div>');
});
- .scroll() 這個方法不接受任何引數出發元素的"scroll"事件
$('#other').click(function() {
$('#outer').scroll();
});
「課堂練習」
使用jQuery實作滾動導航
要求：
- 創建一個上圖所示的滾動導航條
- 當滾動到一定距離時，顯示導航條
- 當滾動到樓層對應位置時，高亮顯示導航條對應樓層，并顯示樓層標題文字
- 點擊導航條，滾動到相應的樓層(使用jQuery的.scrollTop()API)
- 點擊導航條Top按鈕回傳頁面頂部
部分代碼：
<body>
<div id="listNav">
<ul>
<li class="hover">1F <span>服飾</span> </li>
<li>2F <span>美妝</span> </li>
<li>3F <span>手機</span> </li>
<li>4F <span>家電</span> </li>
<li>5F <span>數碼</span> </li>
<li>6F <span>運動</span> </li>
<li>7F <span>居家</span> </li>
<li>8F <span>母嬰</span> </li>
<li>9F <span>食品</span> </li>
<li>10F <span>圖書</span> </li>
<li>11F <span>服務</span> </li>
<li class="last">Top</li>
</ul>
</div>
<!--樓層內容開始-->
<div id="header">
推薦
</div>
<div id="main">
<div class="list" style="background: #cc0033;">
服飾
</div>
<div class="list" style="background: #999933;">
美妝
</div>
<div class="list" style="background: #ccff33;">
手機
</div>
<div class="list" style="background: #006633;">
家電
</div>
<div class="list" style="background: #6666cc;">
數碼
</div>
<div class="list" style="background: #ff6600;">
運動
</div>
<div class="list" style="background: #ffff00;">
居家
</div>
<div class="list" style="background: #3333ff;">
母嬰
</div>
<div class="list" style="background: #ff00cc;">
食品
</div>
<div class="list" style="background: #669900;">
圖書
</div>
<div class="list" style="background: #ff66cc;">
服務
</div>
</div>
<div id="footer">
</div>
</body>
jquery事件系結與移除
.on()
概念：在選定的元素上系結一個或多個事件處理函式，
語法：
-
.on( events [, selector ] [, data ], handler(eventObject) )
- events 一個或多個空格分隔的事件型別和可選的命名空間，或僅僅是命名空間，比如"click", “keydown.myPlugin”, 或者 “.myPlugin”，
- selector 一個選擇器字串，用于過濾出被選中的元素中能觸發事件的后代元素，如果選擇器是 null 或者忽略了該選擇器，那么被選中的元素總是能觸發事件，
- data 當事件被觸發時，傳遞給事件處理函式的event.data，
- handler(eventObject) 事件被觸發時，執行的函式，若該函式只是要執行return false的話，那么該引數位置可以直接簡寫成 false，
呼叫event.stopPropagation() (阻止冒泡)和 event.preventDefault() (阻止瀏覽器默認行為)會從一個事件處理程式會自動回傳false，也可以直接將 false 當作 handler 的引數，作為 function(){ return false; } (兩者一起阻止) 的簡寫形式，因此，下面的寫法
$("#dataTable tbody tr").on("click", function(event){
alert($(this).text());
});
// 阻止所有含有 "disabled" 樣式的鏈接的默認行為，并阻止該事件上的冒泡行為，
$("a.disabled").on("click", false);
$("#dataTable tbody").on("click", "tr", function(event){
alert($(this).text());
});
// 將資料傳遞到處理程式
function greet(event) { alert("Hello "+event.data.name); }
$("button").on("click", { name: "Karl" }, greet);
$("button").on("click", { name: "Addy" }, greet);
- .on( events [, selector ] [, data ] )
- events 一個物件，鍵是由一個或多個由空格分隔的事件型別及可選的名字空間，值是這些事件型別所對應的事件處理函式，
- selector 一個選擇器字串
- data 傳遞給事件處理函式的event.data
$("div.test").on({
click: function(){
$(this).toggleClass("active");
},
mouseenter: function(){
$(this).addClass("inside");
},
mouseleave: function(){
$(this).removeClass("inside");
}
});
.off()
概念：方法移除用.on()系結的事件處理程式，
語法：
- .off( events [, selector ] [, handler(eventObject) ] )
- events 一個或多個空格分隔的事件型別和可選的命名空間，或僅僅是命名空間，比如"click", “keydown.myPlugin”, 或者 “.myPlugin”，
- selector 一個選擇器，當系結事件處理程式時最初傳遞給 .on()的那個，
- handler(eventObject) 以前附加事件上的事件處理程式函式，或特殊值false.
// 移除所有段落上的事件：
$("p").off()
$("body").off("click", "#theone", aClick)
$("form").on("click.validator", "button", validate);
- .off( events [, selector ] )
- events 一個物件，鍵所代表事件型別和可選的命名空間，值表示先前事件系結的處理函式，
- selector 一個選擇器，當系結事件處理程式時，先前傳遞給 .on()的那個，
function toggleClass(){
$(this).toggleClass("active");
}
function addClass(){
$(this).addClass("inside");
}
function removeClass (){
$(this).removeClass("inside");
}
$("div.test").on({
click: toggleClass,
mouseenter: addClass,
mouseleave: removeClass
});
$("div.test").off({
click: toggleClass,
mouseenter: addClass,
mouseleave: removeClass
});
.trigger()
概念：觸發匹配元素上的給定的事件型別
語法：
- .trigger( eventType [, extraParameters ] )
- eventType 包含JavaScript事件型別的字串
- extraParameters 傳遞給事件處理程式的額外陣列引數，
$('#foo').on('click', function() {
alert($(this).text());
});
$('#foo').trigger('click');
// 支持觸發和監聽自定義事件
$('#foo').on('custom', function(event, param1, param2) {
alert(param1 + "\n" + param2);
});
$('#foo').trigger('custom', ['Custom', 'Event']);
- .trigger( event ) 接受jQuery事件物件
$("body").trigger({
type:"logged",
user:"foo",
pass:"bar"
});
注意：.trigger()事件會在DOM樹上冒泡;在事件處理程式中回傳false或呼叫事件物件中的.stopPropagation() 方法可以使事件停止冒泡，
.triggerHandler()
概念：這個方法會觸發指定的事件型別上所有系結的處理函式，
語法：
- .triggerHandler( eventType [, extraParameters ] )
- eventType JavaScript事件型別的字串，
- extraParameters 傳遞給事件處理程式的額外陣列引數，
$("input").triggerHandler("focus");
$("input").triggerHandler("focus", [1, 2]);
注意：.triggerHandler() 方法的行為與 .trigger() 相似，不同之處有如下幾點：
- .triggerHandler() 方法并不會觸發事件的默認行為，
- .trigger() 會影響所有與 jQuery 物件相匹配的元素，而 .triggerHandler() 僅影響第一個匹配到的元素，
- 使用 .triggerHandler() 創建的事件，并不會在 DOM 樹中向上冒泡，如果事件沒有被目標元素直接處理，那么它就不會進行任何處理，
- 與普通的方法回傳 jQuery 物件(這樣就能夠使用鏈式用法)相反，.triggerHandler() 回傳最后一個處理的事件的回傳值，如果沒有觸發任何事件，會回傳 undefined，
jQuery影片
顯示隱藏
概念：jQuery提供用來顯示/隱藏匹配元素的方法，
語法：
.show()/.hide()
$('.target').show();
$("p").hide();
注意：
- 如果沒有引數，匹配的元素將沒有影片的被立即顯示/隱藏，這大致相當于呼叫
.css('display', 'none')/.css('display', 'block')- display屬性值保存在jQuery的資料快取中，所以display可以方便以后可以恢復到其初始值，如果一個元素的display屬性值為inline，然后是隱藏和顯示，這個元素將再次顯示inline，
- .hide( [duration ] [, complete ] ) / .show( [duration ] [, complete ] )
- duration 一個字串或者數字決定影片將運行多久毫秒，默認 400, 字串 ‘fast’ 和 ‘slow’ 分別代表200和600毫秒的延時，
- complete 在影片完成時執行的函式，
$("span").show(2000);
$("div").first().show("fast", function showNext() {
$(this).next("div").show("fast", showNext);
});
- .hide( [duration ] [, easing ] [, complete ] ) / .show( [duration ] [, easing ] [, complete ] )
- easing 一個字串，表示過渡使用哪種緩動函式，jQuery自身提供"linear" 和 “swing”(默認)，
$("span").show(2000, 'linear', function() {
console.log('影片執行完畢')
});
- .hide( options ) / .show( options ) options是一組包含影片選項的值的集合，支持的選項:
- duration 一個字串或者數字決定影片將運行多久毫秒，默認 ‘normal’ (400毫秒), 字串 ‘normal’、‘fast’ 和 ‘slow’
- easing 一個字串表示過渡緩動函式"linear" 和 “swing”，默認 ‘swing’
- queue 一個布林值，指示是否將影片放置在效果佇列中，如果為false時，將立即開始影片，可以接受一個字串用作自定義佇列，影片被添加到由該字串表示的佇列中，默認 ‘true’
- complete 在影片完成時執行的函式，
$("span").show({
duration: 500,
easing: "linear"
complete: function() {
console.log('影片執行完畢')
}
})
注意：
- 當提供一個持續時間引數,顯示/隱藏影片方法將為匹配元素的寬度，高度，以及不透明度，同時進行影片操作直至元素顯示/隱藏，若是隱藏影片最終display樣式屬性將被設定為none，
滑動
概念：
- slideDown 用滑動影片顯示一個匹配元素，
- slideUp 用滑動影片隱藏一個匹配元素，
- slideToggle 用滑動影片顯示或隱藏一個匹配元素，
語法： - .滑動方法( [duration ] [, complete ] )
$("p").slideToggle("slow");
$('#book').slideDown('slow', function() {
console.log('影片執行完畢')
});
- .滑動方法( [duration ] [, easing ] [, complete ] )
$('#book').slideUp('slow', 'linear', function() {
console.log('影片執行完畢')
});
- .滑動方法( options )
$("span").slideToggle({
duration: 500,
easing: "linear"
complete: function() {
console.log('影片執行完畢')
}
})
注意：滑動方法將給匹配元素的高度設定影片，通過改變高度導致頁面中，在這個元素下面的內容往下或往上滑，并且display屬性值同樣保存在jQuery的資料快取中，
淡入淡出（通過改變不透明度）
fadeIn/fadeOut/fadeToggle
概念：
- fadeIn 通過匹配的元素的不透明度影片以淡入的方式顯示匹配元素，
- fadeOut 通過匹配的元素的不透明度影片以淡出的方式隱藏匹配元素，
- fadeToggle 通過匹配的元素的不透明度影片，來顯示或隱藏它們，
語法：
- .淡入淡出方法( [duration ] [, complete ] )
$("p").fadeOut("slow");
$("p:last").fadeToggle("slow");
$("p:last").fadeToggle("fast", function () {
$("#log").append("<div>finished</div>");
});
- .淡入淡出方法( [duration ] [, easing ] [, complete ] )
$("p:last").fadeToggle('slow', 'linear', function() {
console.log('影片執行完畢')
});
- .淡入淡出方法( options )
$("span").fadeToggle({
duration: 500,
easing: "linear"
complete: function() {
console.log('影片執行完畢')
}
})
注意：如果提供回呼函式，這個 callback 函式將在影片完成后被執行一次，這個能用來將不同的影片串聯起來組成一個事件序列，這個回呼函式不設定任何引數，但是this指向執行影片的DOM元素，如果多個元素一起做影片效果，值得注意的是這個回呼函式在每個匹配元素上執行一次，而不是作為一個整體，
fadeTo
概念：影片的調整匹配元素的透明度，
語法：
- .fadeTo( duration, opacity [, complete ] ) 其他引數與上面影片API相同 opacity 值為0和1之間的數字表示目標元素的不透明度，
$("p").fadeTo("slow", 0.5);
$("p:last").fadeTo("fast", 0.2, function () {
$("#log").append("<div>finished</div>");
});
- .fadeTo( duration, opacity [, easing ] [, complete ] )
$("p:last").fadeToggle('slow', 0.8, 'linear',
function() {
console.log('影片執行完畢')
});
注意：將duration設定為0，這個方法只是改變opacity CSS屬性，所以.fadeTo(0, opacity)和.css(‘opacity’, opacity)是一樣的效果，
自定義影片
概念：使用.animate()方法根據一組 CSS 屬性，執行自定義影片，
注意:
- 不同于影片的簡便方法，自定義影片不會影響隱藏元素的可見性部分的效果，例如，給定$(‘someElement’).hide().animate({height:‘20px’}, 500)，影片將執行，但該元素將保持隱藏，
- 所有用于影片的屬性必須是數字的，除非另有說明；這些屬性如果不是數字的將不能使用基本的jQuery功能，（例如，width, height或者left可以執行影片，但是background-color不能，）屬性值的單位像素（px）,除非另有說明，單位em 和 %需要指定使用，
- 除了樣式屬性，自定義影片的一些非樣式的屬性，如scrollTop 和 scrollLeft，以及自定義屬性，也可應用于影片，
- 判斷元素是否處于影片狀態，一般與is()方法配合使用:animated
- 影片屬性也可以是一個相對值，如果提供一個以+= 或 -=開始的值，那么目標值就是以這個屬性的當前值加上或者減去給定的數字來計算的，
語法：
- .animate( properties [, duration ] [, easing ] [, complete ] )
- properties 接受一個CSS屬性和值的物件,影片將根據這組物件移動，
- 其他引數與之前API相同
$("#block").animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function() {
// 影片執行完畢
});
- .animate( properties, options )
$('#book').animate({
width: 'toggle',
height: 'toggle'
}, {
duration: 5000,
specialEasing: {
width: 'linear',
height: 'easeOutBounce'
},
complete: function() {
$(this).after('<div>Animation complete.</div>');
}
});
「課堂練習」
練習一 多組影片輪播圖
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-iq93ZgN0-1629274094611)(http://edu.yueqian.com.cn/group1/M00/02/F1/wKgA3WA0p8uAHLQNACuDTUzktlY894.gif)]
要求：
使用自定義影片實作上圖所示的多個元素影片過渡效果
部分代碼：
<div id="box">
<div class="pic">
<ul>
<li>
<img class="img0" src="img/bg1.jpg"/>
<img class="img1" src="img/text1.png"/>
<img class="img2" src="img/con1.png"/>
</li>
<li>
<img class="img0" src="img/bg2.jpg"/>
<img class="img1" src="img/text2.png"/>
<img class="img2" src="img/con2.png"/>
</li>
<li>
<img class="img0" src="img/bg3.jpg"/>
<img class="img1" src="img/text3.png"/>
<img class="img2" src="img/con3.png"/>
</li>
<li>
<img class="img0" src="img/bg4.jpg"/>
<img class="img1" src="img/text4.png"/>
<img class="img2" src="img/con4.png"/>
</li>
<li>
<img class="img0" src="img/bg5.jpg"/>
<img class="img1" src="img/text5.png"/>
<img class="img2" src="img/con5.png"/>
</li>
</ul>
</div>
</div>
練習二 使用jQuery實作滾動導航影片效果
要求：
- 在昨天的滾動導航潭訓礎上添加影片效果
- 當滾動到一定距離時，用淡入淡出效果顯示導航條
- 點擊導航條，帶滾動影片的滾動到相應的樓層
- 點擊導航條Top按鈕帶滾動影片的回傳頁面頂部
影片佇列
介紹：每個元素可以通過jQuery，包含一個或多個函式佇列，在大多數應用中，只有一個列隊(訪問 fx)被使用，佇列允許一個元素來異步的訪問一連串的動作，而不終止程式執行，
例子：
$('#foo').slideUp().fadeIn();
當這個陳述句被執行，這個元素開始立即做滑動影片，
而漸入影片放置在 fx 列隊在，只有當滑動影片完成后才會被執行，
.queue()
概念：顯示或操作在匹配元素上執行的函式佇列
介紹：queue()方法允許我們直接操縱函式佇列，用一個回呼函式訪問queue()特別的有用；它讓我們把新函式置入到佇列的末端，為jQuery集合中的每個元素執行一次回呼函式，
語法：
- .queue( [queueName ] ) 顯示在匹配的元素上的已經執行的函式列隊，
- queueName 一個含有佇列名的字串，默認是 fx，標準的影片佇列，
<!-- 顯示列隊的長度 -->
<style>
div {
margin:3px;
width:40px;
height:40px;
position:absolute;
left:0px;
top:60px;
background:green;
display:none;
}
div.newcolor {
background:blue;
}
p {
color:red;
}
</style>
<p>The queue length is: <span></span></p>
<div></div>
<script>
var div = $("div");
function runIt() {
div.show("slow");
div.animate({left:'+=200'},2000);
div.slideToggle(1000);
div.slideToggle("fast");
div.animate({left:'-=200'},1500);
div.hide("slow");
div.show(1200);
div.slideUp("normal", runIt);
}
function showIt() {
var n = div.queue("fx");
$("span").text( n.length );
setTimeout(showIt, 100);
}
runIt();
showIt();
</script>
-
.queue( [queueName ], newQueue ) 在匹配元素上操作已經附加函式的串列，
- queueName 一個含有佇列名的字串，默認是 ‘fx’，標準的影片佇列，
- newQueue 一個替換當前列隊內容的函式陣列，
-
.queue( [queueName ], callback( next ) )在匹配元素上操作已經附加函式的串列，
- queueName 一個含有佇列名的字串，默認是 ‘fx’，標準的影片佇列，
- callback( next ) 將要添加到佇列中的新函式，佇列中的下一個函式會在當前函式被呼叫時作為引數傳入，
$("#test").queue(function(next) {
// next是佇列中下一個函式，呼叫該函式可以保證保證佇列中函式的繼續進行
next();
});
$('#foo').slideUp();
$('#foo').queue(function() {
alert('Animation complete.');
$(this).dequeue();
});
// 商民的代碼相當于：
$('#foo').slideUp(function() {
alert('Animation complete.');
})
注意：當使用.queue()添加一個函式的時候，我們應該保證在函式最后呼叫了 jQuery.dequeue()，這樣就能讓佇列中的其它函式按順序執行，
.dequeue()
概念：執行匹配元素佇列的下一個函式，
語法：
- .dequeue( [queueName ] )
- queueName 一個含有佇列名的字串，默認是fx，標準的效果佇列，
$("div").animate({left:'+=200px'}, 2000);
$("div").animate({top:'0px'}, 600);
$("div").queue(function () {
$(this).toggleClass("red");
$(this).dequeue();
});
$("div").animate({left:'10px', top:'30px'}, 700);
當.dequeue()被呼叫的時候，列隊中的下一個函式將從這個列隊中被移除，然后再執行，這個執行的函式中也應當直接或間接的包含 .dequeue()陳述句，這樣才能繼續執行佇列中的其它函式，所以,這個序列可以繼續，
.stop()
概念：停止匹配元素當前正在運行的影片，
語法：
- .stop( [queue ] [, clearQueue ] [, jumpToEnd ] )
- queue 停止影片佇列的名稱，
- clearQueue 一個布林值，指示是否取消佇列影片，默認 false.
- 一個布林值指示是否當前影片立即完成，跳到當前影片的最后一幀，默認false.
$('.hoverme').find('img').stop(true, true)
$('.hoverme').find('img').stop('fx', true, true)
當一個元素呼叫.stop()，當前正在運行的影片（如果有的話）立即停止，由于元素上的影片尚未執行完成，所以影片完成時執行的回呼函式是不會被呼叫的，
.clearQueue()
概念：從列隊中移除所有未執行的項，
語法：
- .clearQueue( [queueName ] )
- 一個含有佇列名的字串，默認是fx，標準的效果佇列，
$("div").clearQueue();
注意：當.clearQueue()方法被訪問的時候，所有在這個列隊中未執行的函式將被移除 ，當不使用引數的時候，.clearQueue()會從標準的影片佇列fx中移除剩下的函式，這個方法類似.stop(true)，然而.stop()方法只適用在影片中，.clearQueue()還可以用來移除用.queue()方法添加到普通jQuery串列的任何函式，
delay()
概念：設定一個延時來推遲執行佇列中后續的項，
語法：
- delay(duration,[queueName])
- duration 一個整數，指示的毫秒數，用于設定下個佇列推遲執行的時間，
- queueName 一個作為佇列名的字串，默認是影片佇列 fx，標準的效果佇列，
// .slideUp() 和 .fadeIn() 影片之間設定800毫秒的延時:
$('#foo').slideUp(300).delay(800).fadeIn(400);
注意：
- .delay()方法允許我們將佇列中的函式延時執行，它既可以推遲影片佇列中函式的執行，也可以用于自定義佇列，只有佇列中連續的事件會延遲; 例如，不帶引數的 .show() 或者 .hide()不會延遲，因為他們沒有使用效果佇列
- 無法取消延時 delay()，它不是JavaScript的原生 setTimeout函式的替代品，這可能是更適合某些使用情況，
「課堂練習」
使用jQuery實作手風琴效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-twntubQN-1629274094615)(http://edu.yueqian.com.cn/group1/M00/02/F1/wKgA3WA0rC6ACeQjAFRocxGxD1U238.gif)]
要求：
- 使用jQuery實作上面的手風琴影片效果
- 滑鼠移入指定元素，元素動態撐開文字隱藏，其他元素影片縮小
ript
$(“div”).clearQueue();
**注意**：當.clearQueue()方法被訪問的時候，所有在這個列隊中未執行的函式將被移除 ，當不使用引數的時候，.clearQueue()會從標準的影片佇列fx中移除剩下的函式，這個方法類似.stop(true)，然而.stop()方法只適用在影片中，.clearQueue()還可以用來移除用.queue()方法添加到普通jQuery串列的任何函式，
#### delay()
**概念**：設定一個延時來推遲執行佇列中后續的項，
**語法**：
- delay(duration,[queueName])
1. duration 一個整數，指示的毫秒數，用于設定下個佇列推遲執行的時間，
2. queueName 一個作為佇列名的字串，默認是影片佇列 fx，標準的效果佇列，
```javascript
// .slideUp() 和 .fadeIn() 影片之間設定800毫秒的延時:
$('#foo').slideUp(300).delay(800).fadeIn(400);
注意：
- .delay()方法允許我們將佇列中的函式延時執行，它既可以推遲影片佇列中函式的執行，也可以用于自定義佇列，只有佇列中連續的事件會延遲; 例如，不帶引數的 .show() 或者 .hide()不會延遲，因為他們沒有使用效果佇列
- 無法取消延時 delay()，它不是JavaScript的原生 setTimeout函式的替代品，這可能是更適合某些使用情況，
「課堂練習」
使用jQuery實作手風琴效果
[外鏈圖片轉存中…(img-twntubQN-1629274094615)]
要求：
- 使用jQuery實作上面的手風琴影片效果
- 滑鼠移入指定元素，元素動態撐開文字隱藏，其他元素影片縮小
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/295196.html
標籤：其他