JavaScript程序設計20211課程導入2任務導入3知識講解4任務實施項目7-5jQuery事件和其他方法5任務總結知識回顧任務導入知識講解任務實施任務總結jQuery操作樣式的方法是什么？jQuery操作類的方法是什么？jQuery動畫方法有哪些？提問知識回顧任務導入知識講解任務實施任務總結任務重難點完成留言板案例重點：jQuery事件操作jQuery其他方法知識回顧任務導入知識講解任務實施任務總結jQuery事件1.jQuery事件通過事件方法綁定事件：已經用過了單個事件的綁定，是通過調用某個事件方法，傳入事件處理函數來實現的，如click()、change()等。

1.1

事件綁定知識回顧任務導入知識講解任務實施任務總結jQuery事件jQuery常用事件方法：分類方法說明表單事件blur([[data],function])當元素失去焦點時觸發focus([[data],function])當元素獲得焦點時觸發change([[data],function])當元素的值發生改變時觸發focusin([data],function)在父元素上檢測子元素獲取焦點的情況focusout([data],function)在父元素上檢測子元素失去焦點的情況知識回顧任務導入知識講解任務實施任務總結jQuery事件jQuery常用事件方法：分類方法說明表單事件select([[data],function])當文本框（包括<input>和<textarea>）中的文本被選中時觸發submit([[data],function])當表單提交時觸發鍵盤事件keydown([[data],function])鍵盤按鍵按下時觸發keypress([[data],function])鍵盤按鍵（Shift、Fn、CapsLock等非字符鍵除外）按下時觸發keyup([[data],function])鍵盤按鍵彈起時觸發知識回顧任務導入知識講解任務實施任務總結jQuery事件jQuery常用事件方法：分類方法說明鼠標事件mouseover([[data],function])當鼠標指針移入對象時觸發mouseout([[data],function])在鼠標指針從元素上離開時觸發click([[data],function])當單擊元素時觸發dblclick([[data],function])當雙擊元素時觸發mousedown([[data],function])當鼠標指針移動到元素上方，并按下鼠標按鍵時觸發鼠標事件mouseup([[data],function])當在元素上放松鼠標按鈕時，會被觸發瀏覽器事件scroll([[data],function])當滾動條發生變化時觸發resize([[data],function])當調整瀏覽器窗口的大小時會被觸發知識回顧任務導入知識講解任務實施任務總結jQuery事件案例演示：<div>綁定事件</div><script>

$("div").click(function()

{

$(this).css("background",

"purple");

});

$("div").mouseenter(function()

{

$(this).css("background",

"skyblue");

});</script>鼠標移入事件mouseenter知識回顧任務導入知識講解任務實施任務總結jQuery事件通過on()方法綁定事件：on()方法綁定單個事件//一次綁定一個事件$("div").on("click",function(){$(this).css("background","yellow")});on()方法綁定一個事件知識回顧任務導入知識講解任務實施任務總結jQuery事件通過on()方法綁定事件：on()方法綁定多個事件//一次綁定多個事件$("div").on({mouseenter:

function()

{$(this).css("background",

"skyblue");

},click:

function()

{$(this).css("background",

"purple");},mouseleave:

function()

{$(this).css("background",

"blue");}});on()方法綁定多個事件知識回顧任務導入知識講解任務實施任務總結jQuery事件通過on()方法綁定事件：on()方法綁定相同的事件處理函數//為不同事件綁定相同的事件處理函數$("div").on("mouseentermouseleave",function(){$(this).toggleClass("current");});on()方法綁定相同的事件處理函數知識回顧任務導入知識講解任務實施任務總結jQuery事件事件委派：把原本要給子元素綁定的事件綁定到父元素上，這就表示把子元素的事件委派給父元素。

1.2

事件委派<ul><li>我是第1個li</li><li>我是第2個li</li></ul><script>$("ul").on("click",

"li:first-child",

function()

{alert("單擊了li"); //單擊第1個li會觸發此事件});</script>on()方法實現事件委派知識回顧任務導入知識講解任務實施任務總結jQuery事件案例展示：

【案例】留言板

案例分析：編寫一個簡單的留言板頁面單擊“發布”按鈕，顯示用戶發布的留言在每個留言的右邊提供一個“刪除”鏈接，用來刪除留言知識回顧任務導入知識講解任務實施任務總結jQuery事件案例實現：<div

class="box"><span>發表留言</span><textarea

name=""

class="txt"

cols="30"

rows="10"></textarea><button

class="btn">發布</button><ul></ul></div>編寫簡單頁面結構知識回顧任務導入知識講解任務實施任務總結jQuery事件案例實現：<script>$(".btn").on("click",

function()

{var

li

=

$("<li></li>");li.html($(".txt").val()+

"<a

href='javascript:;'>

刪除</a>");$("ul").prepend(li);li.slideDown();$(".txt").val("");});</script>功能代碼知識回顧任務導入知識講解任務實施任務總結jQuery事件案例實現：$("ul").on("click",

"a",

function()

{$(this).parent().slideUp(function()

{$(this).remove();});});刪除微博知識回顧任務導入知識講解任務實施任務總結jQuery事件off()方法：該方法可以移除通過on()方法添加的事件處理程序

1.3

事件解綁$('p').off();//解除p元素上的所有事件處理程序$('p').off('click');//解綁p元素上的單擊事件$('ul').off('click','li');//解綁事件委派off()方法基本語法知識回顧任務導入知識講解任務實施任務總結jQuery事件案例演示：<div>我是div</div><script>$("div").on({click:

function()

{console.log("我被單擊了");},mouseover:

function()

{console.log(“鼠標指針經過我了");}});//

事件解綁$("div").off();

//

解除div元素的所有事件</script>解除div上的click事件知識回顧任務導入知識講解任務實施任務總結jQuery事件one()方法：如果想要讓一個元素的事件只觸發一次，為元素綁定事件后再解綁會比較麻煩，因此，可以使用one()方法，直接綁定一次性事件。

多學一招

$("p").one("click",

function()

{alert("被單擊了");});one()方法綁定一次性事件知識回顧任務導入知識講解任務實施任務總結jQuery事件事件方法觸發事件：jQuery中的事件方法在調用時如果傳參數，表示綁定事件，如果不傳參數，表示觸發事件。

1.4

觸發事件//綁定事件$("div").click(function(){alert("hello");});//觸發事件$("div").click();事件方法觸發知識回顧任務導入知識講解任務實施任務總結jQuery事件trigger()方法觸發事件：使用trigger()方法可以觸發指定事件。//綁定事件$("div").click(function(){alert("hello");});//觸發事件$("div").trigger("click");trigger()方法知識回顧任務導入知識講解任務實施任務總結jQuery事件triggerHandler()方法觸發事件：triggerHandler()方法在觸發事件時不會執行元素的默認行為。<inputtype="text"><script>$("input").on("focus",

function()

{$(this).val("你好嗎");});$("input").triggerHandler("focus"); //觸發事件</script>triggerHandler()方法知識回顧任務導入知識講解任務實施任務總結jQuery事件事件對象：當事件被觸發時，就會有事件對象的產生，在事件處理函數中可以使用參數來接收事件對象。

1.5

事件對象<div>點我</div><script>$("div").on("click",

function(event)

{console.log(event);});</script>事件對象知識回顧任務導入知識講解任務實施任務總結jQuery事件事件對象：在瀏覽器控制臺打印事件對象。知識回顧任務導入知識講解任務實施任務總結jQuery事件事件對象：通過事件對象阻止默認事件行為。<ahref="1.html">點我</a>$(document).on("click",

function()

{console.log("單擊了document");});$("a").on("click",

function(event)

{event.preventDefault(); //阻止事件默認行為console.log("單擊了a");});preventDefault()知識回顧任務導入知識講解任務實施任務總結jQuery事件事件對象：通過事件對象阻止事件冒泡行為。event.stopPropagation(); //阻止事件冒泡stopPropagation()知識回顧任務導入知識講解任務實施任務總結jQuery其他方法2.jQuery其他方法$.extend()方法：基本語法$.extend([deep],target,object1,[objectN])。target是要拷貝的目標對象，后面可以跟多個對象（object1~objectN）當不同對象中存在相同的成員名時，后面對象成員會覆蓋前面的對象成員第1個參數deep是可選參數，如果設為true表示深拷貝，默認為false表示淺拷貝。

2.1

$.extend()方法知識回顧任務導入知識講解任務實施任務總結jQuery其他方法案例演示：定義兩個待操作的對象var

targetObj

=

{id:

0,msg:

{sex:

'男'}};var

obj

=

{id:

1,name:

"andy",msg:

{age:

18}};定義待操作對象知識回顧任務導入知識講解任務實施任務總結jQuery其他方法淺拷貝：當一個對象中包含復雜數據類型（如對象）的成員時，淺拷貝會把這個成員的引用地址拷貝給目標對象，相當于“=”賦值。$.extend(targetObj,

obj);//淺拷貝console.log(targetObj);//

{id:1,msg:{age:18},name:"andy"}targetObj.msg.age

=

20;//targetObj.msg和obj.msg是同一個對象console.log(obj.msg.age); //輸出結果：20淺拷貝知識回顧任務導入知識講解任務實施任務總結jQuery其他方法深拷貝：深拷貝把obj對象的成員完全復制一份，再添加給目標對象targetObj，如果對象的成員中包含對象，會遞歸進行復制。$.extend(true,

targetObj,

obj);//深拷貝結果：{id:1,msg:{sex:"男",age:18},name:"andy"}console.log(targetObj);targetObj.msg.age

=

20;//targetObj.msg和obj.msg是不同的對象console.log(obj.msg.age); //輸出結果：18淺拷貝知識回顧任務導入知識講解任務實施任務總結jQuery其他方法$.ajax()方法：jQuery提供了$.ajax()方法，用來通過Ajax（AsynchronousJavaScriptandXML，異步JavaScript和XML）技術請求服務器，獲取服務器的響應結果。

2.2

$.ajax()方法$.extend(true,

targetObj,

obj);//深拷貝結果：{id:1,msg:{sex:"男",age:18},name:"andy"}console.log(targetObj);targetObj.msg.age

=

20;//targetObj.msg和obj.msg是不同的對象console.log(obj.msg.age); //輸出結果：18淺拷貝知識回顧任務導入知識講解任務實施任務總結jQuery其他方法注意需要注意的是，Ajax技術具有一定的學習門檻，需要結合服務器端才能實現，讀者只有具備了服務器搭建、域名的配置、HTTP協議、服務器端應用開發、同源策略、數據交互格式（XML、JSON）等基礎知識，才能完全理解。知識回顧任務導入知識講解任務實施任務總結jQuery其他方法如何發送Ajax請求：在HBuilder中執行“工具”–“選項”，找到Web服務器設置。知識回顧任務導入知識講解任務實施任務總結jQuery其他方法在HBuilder中創建新項目：創建ajax.html和server.html。<scriptsrc="jquery-3.3.1.min.js"></script><script>$.ajax({type:'GET',//請求方式url:'server.html',//請求地址data:{id:2,name:'Hello'},//發送的數據success:function(msg){console.log(msg);}});</script>ajax.html知識回顧任務導入知識講解任務實施任務總結jQuery其他方法在瀏覽器中打開ajax.html：知識回顧任務導入知識講解任務實施任務總結jQuery其他方法jQuery中其他Ajax方法：分類方法說明高級應用$.get(url[,data][,fn][,type])通過遠程HTTPGET請求載入信息$.post(url[,data][,fn][,type])通過遠程HTTPPOST請求載入信息$.getJSON(url[,data][,fn])通過HTTPGET請求載入JSON數據$.getScript(url[,fn])通過HTTPGET請求載入并執行一個JavaScript文件對象.load(url[,data][,fn])載入遠程HTML文件代碼并插入至DOM中底層應用$.ajax(url[,options])通過HTTP請求加載遠程數據$.ajaxSetup(options)設置全局Ajax默認選項知識回顧任務導入知識講解任務實施任務總結jQuery其他方法jQuery中Ajax選項：選項名稱說明url處理Ajax請求的服務器地址data發送Ajax請求時傳遞的參數，字符串類型successAja