本文详细介绍了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>
扫一扫
1056
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
