jQuery的事件-动画-AJAX和插件
一、jQuery事件处理
1.认识事件（Event）
Web页面经常需要和用户之间进行交互，而交互的过程中我们可能想要捕捉这个交互的过程：
- 比如用户点击了某个按钮、用户在输入框里面输入了某个文本、用户鼠标经过了某个位置；
- 浏览器需要搭建一条JavaScript代码和事件之间的桥梁；
- 当某个事件发生时，让JavaScript执行某个函数，所以我们需要针对事件编写处理程序（handler）；
原生事件监听方法：
- 事件监听方式一：在script中直接监听（很少使用）。
- 事件监听方式二：DOM属性，通过元素的on来监听事件。
- 事件监听方式三：通过EventTarget中的addEventListener来监听。
jQuery事件监听方法：
- 事件监听方式一：直接调用jQuery对象中的事件处理函数来监听，例如：click，mouseenter…。
- 事件监听方式二：调用jQuery对象中的on函数来监听，使用off函数来取消监听。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<ul id="list" class="panel">
<li class="li-1">li-1li>
<li class="li-2">li-2li>
<li class="li-3">li-3li>
<li class="li-4">li-4li>
<li class="li-5">li-5li>
ul>
<button class="cancel">取消事件的监听button>
<script src="../libs/jquery-3.6.0.js">script>
<script>
// 1.监听文档完全解析完成
$(function() {
// 监听事件
// 1.使用on来监听事件
$('ul').on('click', function() {
console.log('click1')
})
// 2.使用click来监听事件
$('ul').click(function() {
console.log('click2')
})
// 3.使用mouseenter来监听事件
$('ul').mouseenter(function() {
console.log('mouseenter')
})
// 取消监听事件
$('.cancel').click(function() {
// $('ul').off() // 取消ul元素上所有的事件
// $('ul').off('mouseenter')
$('ul').off('click')
})
// 使用程序-自动触发事件
// $('ul').trigger('click') // 模拟用户点击了ul元素
$('ul').trigger('mouseenter')
})
script>
body>
html>
2.click和on的区别
click和on的区别：
- click是on的简写。它们重复监听，不会出现覆盖情况，都支持事件委托，底层用的是addEventListener。
- 如果 on 没有使用 selector 的话，那么和使用click是一样的。
- on 函数可以接受一个 selector 参数，用于筛选 可触发事件 的后代元素。
- on 函数支持给事件添加命名空间。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<ul id="list" class="panel">
<li class="li-1">li-1li>
<li class="li-2">li-2li>
<li class="li-3">li-3li>
<li class="li-4">li-4li>
<li class="li-5">li-5li>
ul>
<button class="cancel">取消事件的监听button>
<script src="../libs/jquery-3.6.0.js">script>
<script>
// 1.监听文档完全解析完成
$(function() {
// 监听事件
// 1.使用on来监听事件 ( 支持给事件添加命名空间: liujun )
$('ul').on('click.liujun', function() {
console.log('click1')
})
// 2.使用click来监听事件
$('ul').click(function() {
console.log('click2')
})
// 取消监听事件
$('.cancel').click(function() {
$('ul').off('click.liujun')
})
/*
1.on 监听的事件支持使用 命名空间
2.on 函数支持一个 selector 的参数
*/
// $('ul').on('click', '字符串类型的选择器', function() {
// })
})
script>
body>
html>
3.click和on中this指向
click和on的this指向：
- this都是指向原生的DOM Element
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<ul id="list" class="panel">
<li class="li-1">li-1li>
<li class="li-2">li-2li>
<li class="li-3">li-3li>
<li class="li-4">li-4li>
<li class="li-5">li-5li>
ul>
<script src="../libs/jquery-3.6.0.js">script>
<script>
// 1.监听文档完全解析完成
$(function() {
// $('ul').click(function() {
// console.log("%O", this) // DOM Element -> UL
// })
// $('ul').on('click', function() {
// console.log(this) // DOM Element -> UL
// })
// $('ul li').click(function() {
// console.log(this) // DOM Element -> UL
// })
// 底层实现的原理
// var lisEl = $('ul li').get() // [li, li, li]
// for(var liEL of lisEl ){
// liEL.addEventListener('click', function() {
// console.log(this)
// })
// }
// $('ul li').click(function() {
// console.log( $(this) ) // DOM Element 转成 jQuery 对象
// })
$('ul li').click(() => {
console.log(this)
})
})
script>
body>
html>
4.jQuery的事件冒泡
我们会发现默认情况下事件是从最内层（如下图span）向外依次传递的顺序，这个顺序我们称之为事件冒泡（Event Bubble）;
事实上，还有另外一种监听事件流的方式就是从外层到内层（如：body -> span），这种称之为事件捕获（Event Capture）；
为什么会产生两种不同的处理流呢？
-
这是因为早期在浏览器开发时，不管是IE还是Netscape公司都发现了这个问题;
-
但是他们采用了完全相反的事件流来对事件进行了传递；
-
IE<9仅采用了事件冒泡的方式，Netscape采用了事件捕获的方式；
-
IE9+和现在所有主流浏览器都已支持这两种方式。
jQuery为了更好的兼容IE浏览器，底层并没有实现事件捕获。
5.jQuery的事件对象( Event Object)
jQuery事件系统的规范是根据W3C的标准来制定jQuery事件对象。原始事件对象的大多数属性都被复制到新的jQuery事件 对象上。如，以下原生的事件属性被复制到jQuery事件对象中： altKey, clientX, clientY, currentTarget, data, detail, key, keyCode, offsetX, offsetY, originalTarget, pageX, pageY, relatedTarget, screenX, screenY, target, …
jQuery事件对象通用的属性（以下属性已实现跨浏览器的兼容）：
- target、relatedTarget、pageX、pageY、which、metaKey
jQuery事件对象常用的方法：
preventDefault() : 取消事件的默认行为（例如，a标签、表单事件等）。stopPropagation() : 阻止事件的进一步传递（例如，事件冒泡）。
要访问其它事件的属性，可以使用 event.originalEvent 获取原生对象。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.box{
width: 200px;
height: 200px;
background-color: pink;
}
.content{
display: inline-block;
width: 50px;
height: 50px;
background-color: green;
}
style>
head>
<body>
<div class="box">
div
<span class="content">spanspan>
div>
<script src="../libs/jquery-3.6.0.js">script>
<script>
// 1.监听文档完全解析完成
$(function() {
// 1.获取原生的事件对象
// var divEl = document.querySelector('.box')
// divEl.addEventListener('click', function(event) {
// console.log(event)
// })
// 2.获取jQuery的事件对象
$('.box').click(function($event) {
console.log($event) // 是jQuery的事件对象
console.log($event.originalEvent) // 拿到原生的事件对象
})
})
script>
body>
html>
6.jQuery的事件委托（event delegation）
事件冒泡在某种情况下可以帮助我们实现强大的事件处理模式 – 事件委托模式（也是一种设计模式）
那么这个模式是怎么样的呢？
-
因为当子元素被点击时，父元素可以通过冒泡监听到子元素的点击；
-
并且可以通过event.target获取到当前监听事件的元素（event.currentTarget获取到的是处理事件的元素）；
案例：一个ul中存放多个li，使用事件委托的模式来监听li中子元素的点击事件。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
ul li.item {
width: 200px;
height: 80px;
margin-bottom: 10px;
background-color: #ccc;
}
style>
head>
<body>
<script src="./utils/jquery-3.7.1.min.js">script>
<script>
$(function () {
$('ul').on('click', 'li.item', function(event) {
console.log($(event.target).text()+"被点击了")
})
})
script>
<ul>
<li class="item">item1li>
<li class="item">item2li>
<li class="item">item3li>
<li class="item">item4li>
<li class="item">item5li>
ul>
body>
html>
7.jQuery常见的事件
鼠标事件（Mouse Events）
- .
click() 、.dblclick()、.hover()、.mousedown() 、.mouseup() - .
mouseenter()、.mouseleave()、.mousemove() - .mouseover()、.mouseout() 、.contextmenu()、.toggle()
键盘事件（Keyboard Events）
- .
keydown() 、.keypress()、.keyup()
文档事件（Document Loading Events）
- load、
ready()、.unload
表单事件（Form Events）
- .
blur() 、.focus()、.change()、.submit()、.select()
浏览器事件（Browser Events）
- .
resize()、.scroll()
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<ul id="list" class="panel">
<li class="li-1">li-1li>
<li class="li-2">li-2li>
<li class="li-3">li-3li>
<li class="li-4">li-4li>
<li class="li-5">li-5li>
ul>
<input type="text">
<script src="../libs/jquery-3.6.0.js">script>
<script>
// 1.监听文档完全解析完成
$(function() {
// on('hover', func)
// 1.hover 底层使用的是: mouseenter or mouseleaver
// $('ul').hover(function() {
// console.log('鼠标悬浮在ul')
// }, function() {
// console.log('鼠标离开在ul')
// })
// 2.监听浏览器resize事件 ( throttle 节流 )
// on('resize', func)
$(window).resize(function() {
console.log('resize')
})
// 3.表单事件
$('input').focus(function() {
console.log('input focus事件')
})
$('input').blur(function() {
console.log('input blur事件')
})
// input ( debounce 防抖操作 )
$('input').on('input', function() {
// console.log( $('input').val() )
console.log( $(this).val() )
})
})
script>
body>
html>
8.mouseover和mouseenter的区别
mouseenter()和mouseleave()
- 不支持冒泡
- 进入子元素依然属于在该元素内，没有任何反应
mouseover()和mouseout()
- 支持冒泡
- 进入元素的子元素时
- 先调用父元素的mouseout
- 再调用子元素的mouseover
- 因为支持冒泡，所以会将mouseover传递到父元素中；
9.jQuery的键盘事件
事件的执行顺序是 keydown()、keypress()、keyup()
- keydown事件先发生；
- keypress发生在文本被输入；
- keyup发生在文本输入完成（抬起、松开）；
我们可以通过key和code来区分按下的键：
- code：“按键代码”（“KeyA”，“ArrowLeft” 等），特定于键盘上按键的物理位置。
- key：字符（“A”，“a” 等），对于非字符（non-character）的按键，通常具有与 code 相同的值。）
10.jQuery的表单事件
表单事件（Form Events）
- .blur() - 元素失去焦点时触发
- .focus() - 元素获取焦点时触发
- change() - 该事件在表单元素的内容改变时触发( , , , 和 )
- .submit() - 表单提交时触发(