jQuery中的事件處理與影片效果
目錄
- jQuery中的事件處理與影片效果
- 一、jQuery的事件處理
- 二、jQuery的事件物件
- 三、jQuery其他方法
- 四、jQuery影片
一、jQuery的事件處理
事件處理：所謂事件處理，就是指在某一時刻頁面上的元素對某一種操作的回應處理
1、頁面載入事件
JavaScript的頁面載入事件：window.onload
//DOM加載完畢后添加元素
//傳統方法window.οnlοad= function() {
testDiv.innerHTML= "動態創建的div";
}
注：雖然能夠在DOM完整加載后, 在添加新的元素, 但是不幸的是瀏覽器執行window.onload函式不僅僅是在構建完DOM樹之后, 也是在所有影像和其他外部資源完整的加載并且在瀏覽器視窗顯示完畢之后. 所以如果某個圖片或者其他資源加載很長時間, 訪問者就會看到一個不完整的頁面, 甚至在圖片加載之前就執行了需要依賴動態添加的元素的腳本而導致腳本錯誤
解決辦法就是等DOM被決議后, 在影像和外部資源加載之前執行我們的函式.在jQuery中讓這一實作變得可行，在jQuery中，與此window.onload功能類似的函式是ready(fn)函式
jQuery的頁面載入事件(入口函式)：
$(function(){ js代碼 })
//jQuery 使用動態創建的$(document).ready(function)方法$(document).ready(function() { testDiv.innerHTML= "使用動態創建的$(document).ready(function)方法"; });
或者使用簡便語法:
//jQuery 使用$(function)方法$(function() {
testDiv.innerHTML+= "使用$(function)方法"; });
2、系結與反系結事件監聽器
- 一個事件的回應本身可能實作為一個函式，但是真正要使其得到執行，還需要將其與相應的元素動作系結到一起
- 系結就是將頁面元素的事件型別與其在收到該事件之后期望進行的操作聯系到一起，例如經常提到的“當我們單擊這個按鈕的時候，就會執行某些動作”，讓這里的“單擊”動作與“執行某些動作”連接到一起的操作就是系結了
（1）系結事件
通過事件方法系結事件：已經用過了單個事件的系結，是通過呼叫某個事件方法，傳入事件處理函式來實作的，如click()、change()等
實作代碼
$(selector).bind('事件型別',function(){
處理代碼
})
或
$(selector).事件名(function(){
處理代碼
})
jQuery常用事件方法
（2）反系結事件
在對一個元素系結了某種事件型別之后，可能在后來的某個時刻不再希望讓該元素監聽該型別的事件，此時就需要反系結，所謂反系結，就是解除與元素系結的某種事件型別及處理函式，jQuery中的反系結處理函式為unbind([type],[data])函式
$(selector).unbind() --> 取消元素上系結的所有事件
$(selector).unbind('事件名') --> 取消元素上系結的指定事件
（3）一次性系結事件
一次性的事件系結，是指與元素系結的事件只能被使用一次，也就是說在觸發一次之后即便再執行該型別的事件也不會去執行對應的處理函式，jQuery中用于一次性事件系結的函式是one(type,[data],fn)函式
$(selector).one('事件型別',function(){
處理代碼
})
示例
<body style="text-align: center;">
<div style="margin-top: 35px;">
<label>
用戶名：
<input type="text" id="username">
</label>
<br><br>
<label>
密碼：
<input type="password" id="pwd">
</label>
<br><br>
<button type="button" id="btn_submit">提交</button>
<button type="button" id="btn_reset">重置</button>
</div>
<script>
$(function(){
//給"重置"按鈕系結click事件
$('#btn_reset').bind('click',function(){
$('#username').val('')
$('#pwd').val('')
})
//給'提交'按鈕系結click事件
$('#btn_submit').bind('click',function(){
var n = $('#username').val()
var p = $('#pwd').val()
console.log("用戶名："+n)
console.log("密碼："+p)
})
//取消"重置"按鈕的click事件
$('#btn_reset').unbind('click')
//"重置"按鈕系結一次性事件
$('#btn_reset').one('click',function(){
$('#username').val('')
$('#pwd').val('')
})
})
</script>
</body>
3、事件委派：把原本要給子元素系結的事件系結到父元素上，這就表示把子元素的事件委派給父元素
<ul>
<li>我是第1個li</li><li>我是第2個li</li>
</ul>
<script>
$("ul").on("click", "li:first-child", function() {
alert("單擊了li"); // 單擊第1個li會觸發此事件
});
</script>
4、事件觸發器
- 當給一個頁面元素物件系結一個事件之后，這個事件對應的處理函式不會立即就被執行，需要有相應的動作來觸發其執行
- 例如，在上一節中多次用到的click事件型別，則是需要在用戶單擊滑鼠左鍵的時候才會執行回應函式
- jQuery還提供了一種模擬用戶動作的方式，這就是事件觸發器，所謂事件觸發器，簡單的說就是通過代碼來模擬用戶的操作動作來實作事件的觸發
事件方法觸發事件：jQuery中的事件方法在呼叫時如果傳引數，表示系結事件，如果不傳引數，表示觸發事件
// 系結事件
$("div").click(function() {
alert("hello");
});
// 觸發事件
$("div").click();
①trigger()方法觸發事件：使用trigger()方法可以觸發指定事件
// 系結事件
$("div").click(function() {
alert("hello");
});
// 觸發事件
$("div").trigger("click");
②triggerHandler()方法觸發事件：triggerHandler()方法在觸發事件時不會執行元素的默認行為
<input type="text">
<script>
$("input").on("focus", function() {
$(this).val("你好嗎");
});
$("input").triggerHandler("focus"); // 觸發事件
</script>
5、快捷事件Event Helpers
我們可以使用事件處理函式完成物件事件的幾乎所有操作, 但是jQuery提供了對常用事件的封裝. 比如單擊事件對應的兩個方法click()和click(fn)分別用來觸發單擊事件和設定單擊事件
設定單擊事件:
$("#testDiv").click(function(event) { alert("test div clicked ! "); });
等效于:
$("#testDiv").bind("click",function(event) { alert("test div clicked !"); });
觸發單擊事件:
$("#testDiv").click();
等效于
$("#testDiv").trigger("click");
6、事件的互動處理
事件的互動處理，是指根據用戶在瀏覽網頁時操作方式本身或者操作次數的不同，作出不同的事件回應，例如當滑鼠移入以及移出某個區域，或者單擊某個按鈕一次或者多次，可以分別給出回應的不同的顯示效果，事件的互動處理，是為了為用戶提供更好的互動體驗，使網站本身更加人性化，可操作性更強
7、模仿滑鼠懸停事件
$(selector).hover(over,out)
- over：回呼函式，表示滑鼠懸停時呼叫的函式
- out：回呼函式，表示滑鼠離開時呼叫的函式
二、jQuery的事件物件
（一）使用jQuery事件物件
jQuery中統一了事件物件, 當系結事件處理函式時, 會將jQuery格式化后的事件物件作為唯一引數傳入
注：不同瀏覽器之間事件物件的獲取, 以及事件物件的屬性都有差異, 導致我們很難跨瀏覽器使用事件物件
- IE中,事件物件是window物件的一個屬性.事件處理函式必須這樣訪問事件物件:
obj.onclick=function() {var oEvent = window.event; }
- 在DOM標準中,事件物件必須作為唯一引數傳給事件處理函式:
obj.onclick=function() { var oEvent =arguments[0]; }
- 除了使用argument[0]訪問此引數, 我們也可以指定引數名稱,上面的代碼等同于:
obj.οnclick=function(oEvent) { } - 目前兼容DOM的瀏覽器有Firefox,Safari,Opera,IE7等
例如：
$(selector).bind('click',function(event){ -->'event'代表jQuery的事件物件
處理代碼
})
- type：事件型別
- target：事件物件
- pageX、pageY：在滑鼠事件中滑鼠相對于頁面原點的x、y坐標
示例
<body>
<img src="../images/6.png" alt="" width="350" height="260">
<br><br>
<a href="http://www.baidu.com">百度</a>
<br><br>
<div style="width: 200px;height: 200px;background: red;"></div>
<script>
$(function(){
$('img').hover(function(event){
$('img').attr('src','../images/8.png')
console.log(event.type)
},function(event){
$('img').attr('src','../images/6.png')
console.log(event.type)
})
$('a').bind('click',function(event){
alert(event.target)
})
$('div').bind('click',function(event){
console.log(event.pageX+","+event.pageY)
})
})
</script>
</body>
（二）Javascript中事件物件操作
1.獲取事件型別
var eventType = oEvent.type
2.獲取鍵盤按鍵代碼:
需要在keydown和keyup事件中使用.
var eventKeyCode = oEvent.keyCode
3.檢測Shift,Alt,Ctrl鍵是否被按下:
var isShift = oEvent.shiftKey; var isAlt = oEvent.altKey; var isCtrl = oEvent.ctrlKey;
回傳的是boolean值.
4.獲取滑鼠指標坐標
var x = oEvent.clientX; var y = oEvent.clientY;
（三）jQuery中事件物件
jQuery中統一了事件物件, 當系結事件處理函式時, 會將jQuery格式化后的事件物件作為唯一引數傳入:
$("#testDiv").bind(“click”,function(event) { });
（四）JQuery中事件物件操作
三、jQuery其他方法
1、 $.extend()方法
基本語法
$.extend([deep], target, object1, [objectN])
-
target是要拷貝的目標物件，后面可以跟多個物件（object1~objectN）
-
當不同物件中存在相同的成員名時，后面物件成員會覆寫前面的物件成員
-
第1個引數deep是可選引數，如果設為true表示深拷貝，默認為false表示淺拷貝
淺拷貝：當一個物件中包含復雜資料型別（如物件）的成員時，淺拷貝會把這個成員的參考地址拷貝給目標物件，相當于“=”賦值
深拷貝：深拷貝把obj物件的成員完全復制一份，再添加給目標物件targetObj，如果物件的成員中包含物件，會遞回進行復制
2、 $.ajax()方法jQuery提供了$.ajax()方法，用來通過Ajax（Asynchronous JavaScript and XML，異步JavaScript和XML）技術請求服務器，獲取服務器的回應結果
注：需要注意的是，Ajax技術具有一定的學習門檻，需要結合服務器端才能實作，我們只有具備了服務器搭建、域名的配置、HTTP協議、服務器端應用開發、同源策略、資料互動格式（XML、JSON）等基礎知識，才能完全理解
3、jQuery中其他Ajax方法
4、jQuery中Ajax選項
jQuery中get()和post()的使用
// $.get()方法
$.get('server.html', function(data, status) {
console.log('服務器回傳結果：' + data + '\n請求狀態：' + status);
});
// $.post()方法（HBuilder內置Web服務器不支持POST方式）
$.post(‘server.html’, { id: 1 }, function(data,success) {
console.log('服務器回傳結果：' + data + '\n請求狀態：' + status);
});
四、jQuery影片
1、 顯示與隱藏效果
顯示與隱藏的方法：
2、滑動效果
3、停止影片：stop（）方法
$(selector).stop(stopAll, goToEnd);
4、淡入淡出
5、自定義影片
animate()方法：
$(selector).animate(params[, speed][, easing][, fn])
6、jQuery影片佇列
jQuery中針對一個頁面元素可以應用一個或者一個以上的影片，為了便于這一系列影片的管理，jQuery中引入了影片佇列的概念，顧名思義，所謂影片佇列就是把針對某個選定元素應用的多個影片操作放入一個佇列中進行管理
（1）影片佇列與非影片佇列效果比較
（2）jQuery中的queue()函式
示例
<body>
<button id="btn_show">顯示</button>
<button id="btn_hide">隱藏</button>
<button id="btn_toggle">交替</button>
<button id="slide_up">收縮</button>
<button id="slide_down">展開</button>
<button id="fade_in">淡入</button>
<button id="fade_out">淡出</button>
<button id="fade_toggle">交替淡入淡出</button>
<br><br>
<img src="../images/8.png" alt="">
<script>
$(function(){
$('#btn_show').click(function(){
$('img').show()
})
$('#btn_hide').click(function(){
$('img').hide()
})
$('#btn_toggle').click(function(){
$('img').toggle()
})
$('#slide_up').click(function(){
$('img').slideUp('slow')
})
$('#slide_down').click(function(){
$('img').slideDown('slow')
})
$('#fade_in').click(function(){
$('img').fadeIn('slow')
})
$('#fade_out').click(function(){
$('img').fadeOut('slow')
})
})
</script>
</body>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/290292.html
標籤：其他
上一篇：Easyui檔案上傳格式限制
下一篇：仿小米輪播