《JavaScript程序設(shè)計》課件-項目7-5 jQuery事件和其他方法

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

1.1

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

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

{

$(this).css("background",

"purple");

});

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

{

$(this).css("background",

"skyblue");

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

function()

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

"skyblue");

},click:

function()

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

"purple");},mouseleave:

function()

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

"blue");}});on()方法綁定多個事件知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)jQuery事件通過on()方法綁定事件：on()方法綁定相同的事件處理函數(shù)//為不同事件綁定相同的事件處理函數(shù)$("div").on("mouseentermouseleave",function(){$(this).toggleClass("current");});on()方法綁定相同的事件處理函數(shù)知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)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會觸發(fā)此事件});</script>on()方法實現(xiàn)事件委派知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)jQuery事件案例展示：

【案例】留言板

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

class="box"><span>發(fā)表留言</span><textarea

name=""

class="txt"

cols="30"

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

class="btn">發(fā)布</button><ul></ul></div>編寫簡單頁面結(jié)構(gòu)知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)jQuery事件案例實現(xiàn)：<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>功能代碼知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)jQuery事件案例實現(xiàn)：$("ul").on("click",

"a",

function()

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

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

1.3

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

function()

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

function()

{console.log(“鼠標(biāo)指針經(jīng)過我了");}});//

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

//

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

多學(xué)一招

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

function()

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

1.4

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

function()

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

1.5

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

function(event)

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

function()

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

function(event)

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

2.1

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

targetObj

=

{id:

0,msg:

{sex:

'男'}};var

obj

=

{id:

1,name:

"andy",msg:

{age:

18}};定義待操作對象知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)jQuery其他方法淺拷貝：當(dāng)一個對象中包含復(fù)雜數(shù)據(jù)類型（如對象）的成員時，淺拷貝會把這個成員的引用地址拷貝給目標(biāo)對象，相當(dāng)于“=”賦值。$.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); //輸出結(jié)果：20淺拷貝知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實施任務(wù)總結(jié)jQuery其他方法深拷貝：深拷貝把obj對象的成員完全復(fù)制一份，再添加給目標(biāo)對象targetObj，如果對象的成員中包含對象，會遞歸進行復(fù)制。$.extend(true,

targetObj,

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

=

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

2.2

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

targetObj,

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

=

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