目录
【前文回顾】👉 jQuery操作之添加/删除/替换/克隆元素_04
❣️ 事件绑定
1. DOM中: 3种
(1). 在html中绑定:
a. js中: function 事件处理函数(){ ... }
b. html 中: <元素 on事件名="事件处理函数()">
(2). 在js中用赋值方式绑定:
a. 元素.on事件名=function(){ ... }
(3). 在js中用添加事件监听对象的方式: ——最灵活的
a. 添加事件监听: 元素.addEventListener("事件名",事件处理函数)
b. 移除事件监听: 元素.removeEventListener("事件名", 原事件处理函数)
2. jq中: 统一为一种
(1). 标准:
$元素.on("事件名", 事件处理函数)
😇 注意：on代替了addEventListener
$元素.off("事件名", 原事件处理函数)
😇 注意：off代替了removeEventListener
(2). 简写: (只有最常用的几种事件才能用.简写)
$元素.事件名(事件处理函数)
比如: $元素.click(function(){ ... })
常用事件列表: 只要属于这个列表的事件，都可以用简写。反之，万一遇到这个列表之外的稀有事件，就必须用.on()
blur 失去焦点
change 下拉列表选中项改变
click 单击
dblclick 双击
focus 获得焦点
keydown 键盘按键按下
keyup 键盘按键抬起
mousedown 鼠标按键按下
mouseenter 鼠标进入(jq)
mouseleave 鼠标移出(jq)
mousemove 鼠标移动
mouseout 鼠标移出(dom)
mouseover 鼠标进入(dom)
mouseup 鼠标按键抬起
resize 窗口大小改变
scroll 网页滚动
3. jQ较之DOM的改进
(1). DOM中，如果使用有名称的函数添加事件监听，则只能添加1个。
原因：因为事件监听队列里已经有名为shoot2的函数地址，DOM不允许再次创建同名函数 放进事件监听队列里
(2). jq中，即使使用有名称的函数添加事件监听，照样可以添加多个！移除时，只需要一次off，就可把所有同名的事件处理函数移除掉！
4. 示例: 点击按钮获得跟踪导弹，点击按钮失去跟踪导弹
12_bind_unbind.html
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta charset="utf-8">
</head>
<body>
<h1>事件绑定</h1>
<button id="btn1">发射子弹</button>
<button id="btn2">获得奖励</button>
<button id="btn3">失去奖励</button>
<script src="js/jquery-1.11.3.js"></script>
<script>
$("#btn1").click(function(){
console.log(`发射普通子弹......`)
})
function shoot2(){
alert(`发射跟踪导弹=>=>=>`)
}
$("#btn2").click(function(){
// .addEventListener();
$("#btn1").click(shoot2)
})
$("#btn3").click(function(){
$("#btn1").off("click",shoot2)
})
</script>
</body>
</html>运行结果:
5. 事件委托
(1). DOM中: 3步 ——标准的，且将来仍会使用的！——正宗主流
a. 事件只绑定在父元素上一份即可
b. 用e.target代替this
c. 判断e.target是否是想要的
(2). jq中: （仅jq中可用）——非主流
a. 事件也只绑定在父元素上一份即可
b. this又重新指向了目标元素，不用e.target
c. 不用自己写if判断，而是给.on()添加第二个选择器参数，作为判断条件，请.on()函数自动帮我们绑定当前元素是不是想要的
$父元素.on("事件名","选择器条件",function(){
this->e.target
})
d. 示例: 使用事件委托简写选飞机案例:
12_replace_clone2.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
text-align: center;
}
</style>
</head>
<body>
<h1>替换节点</h1>
<div id="chosen">
<img src="img/p0.png">
</div>
<hr />
<div id="list">
<img src="img/p3.png">
<img src="img/p4.png">
<img src="img/p5.png">
</div>
<script src="js/jquery-1.11.3.js"></script>
<script>
//DOM 4步
//1. 查找触发事件的元素
//本例中: 因为三个img都可点击，所以事件只绑定在父元素上一份即可——事件委托
$("#list")
//2. 绑定事件处理函数
// 只允许img元素触发事件
// ↓
.on("click","img",function(){
//this->e.target
//获得当前点击的飞机img
$(this)
//将当前飞机img克隆一个副本
.clone()
//用副本元素代替上方的img
.replaceAll("#chosen>img");
//自动查找
})
</script>
</body>
</html>运行结果：
回顾：jQuery事件绑定方法有哪些？⏬
在jQuery中，实现事件绑定有两种方式，一种是通过事件方法进行绑定(仅限常用事件)，另一种是通过on()方法进行绑定(标准)，下面我们重新回顾总结一下。
💥 jQuery事件绑定方法，其实是只有一种标准的方式，那就是on()方法——$元素.on("事件名", 事件处理函数) ，事件方法绑定事件的方式只是标准方式对常用事件的简写
1. 通过事件方法绑定事件 👇
在前面的学习中，我们已经用过了单个事件的绑定，是通过调用某个事件方法，传入事件处理函数来实现的，如click()、change()等。jQuery的事件和DOM中的事件相比，省略了开头的“on”，如jQuery中的click()对应DOM中的onclick。并且，jQuery的事件方法允许为一个事件绑定多个事件处理函数，只需多次调用事件方法，传入不同的函数即可。
接下来我们通过下面列举jQuery中的一些常用的事件方法。
| jQuery常用事件方法 | ||
| 分类 | 方法 | 说明 |
| 表单 | blur([[data],function]) | 当元素失去焦点时触发 |
| focus([[data],function]) | 当元素获得焦点时触发 | |
| change([[data],function]) | 当元素的值发生改变时触发 | |
| focusin([dta],function) | 在父元素上检测子元素获取焦点的情况 | |
| focusout([data],function) | 在父元素上检测子元素失去焦点的情况 | |
| select([[data],function]) | 当文本框（包括<input>和<textarea>)中 的文本被选择时触发 | |
| submit([[data],function]) | 当表单提交时触发 | |
| 键盘 | keydown([[data],function]) | 键盘按键按下时触发 |
| keypress([[data],function]) | 键盘按键（Shift、Fn、CapsLOck等非 字符键除外）按下时触发 | |
| keyup([[data],function) | 键盘按键弹起时触发 | |
| 鼠标 | mouseover([[data],function]) | 当鼠标指针移入对象时触发 |
| mouseout([[data],function]) | 当鼠标指针从元素上离开时触发 | |
| click([[data],function]) | 当单击时元素触发 | |
| dbclick([[data],function]) | 当双击元素时触发 | |
| mousedown([[data],function]) | 当鼠标指针移动到元素上方，并按下 鼠标按键时触发 | |
| mouseup([[data],function]) | 当在元素上放开鼠标按钮时，会被触发 | |
| 浏览器 | scroll([[data],function]) | 当滚动条发生变化触发 |
| resize([[data],function) | 当调整浏览器窗口的大小时会被触发 | |
在上表中，参数function表示触发事件时执行的处理函数，参数data表示函数传入的数据，可以使用“事件对象.data”获取。如果调用时省略参数，则表示手动触动事件。
下面我们通过代码演示事件方法的使用。
<div>绑定事件</div>
<script>
$("div").click(function(){
$(this).css("background", "purple");
});
$("div").mouseenter(function(){
$(this).css("background", "skyblue");
});
</script>上述代码中，第1行代码定义了div元素。第3～5行代码为div元素绑定单击事件，通过第4行代码修改当前元素背景色为紫色。第6～8行代码为div元素绑定鼠标指针移入事件，实现当鼠标指针移入div元素时，将背景色修改为天蓝色。
2.通过on()方法绑定事件 👇
on()方法在匹配元素上绑定一个或多个事件处理函数，语法如下所示。
element.on(events, [selector], fn)上述代码中，events表示一个或多个用空格分隔的事件类型，如click;selector表示子元素选择器;fn表示回调函数，即绑定在元素身上的侦听函数。
下面我们通过代码演示on()方法的使用。
//一次绑定一个事件
$("div").on("click", function(){
$(this).css("background","yellow")
});
//一次绑定多个事件
$("div").on({
mouseenter: function(){
$(this).css("background", "skyblue");
},
click: function(){
$(this).css("background", "purple");
},
mouseleave: function(){
$(this).css("background", "blue");
}
});
// 为不同事件绑定相同的事件处理函数
$("div").on("mouseenter mouseleave", function(){
$(this).toggleClass("current");
});上述代码演示了on()方法的3种用法。第1种用法非常简单，和事件方法的方式类似；第2种用法是为on()方法传入了一个对象，对象的属性名表示事件类型，属性值表示对应的事件处理函数；第3种用法是同时为mouseenter、mouseleave事件绑定相同的事件处理函数，实现div元素的current类的切换效果。
❣️ 总结：jQuery简化版函数3大特点
1. 自带for循环
2. 一个函数两用
3. 绝大多数函数都会自动返回正在操作的.前的主语jq对象。如果后一句话所需的.前的主语，刚好和前一句话返回的主语相同，则可以直接用.继续操作，不用把.前主语反复写2遍！——链式操作。👉 链式操作具体示例——参看按节点间关系查找之示例7_tabs.html⏫
❣️ 总结：$()共有4种
1. $("选择器") 查找DOM元素，并包装进jQuery对象中
2. $(DOM元素对象) 不用查找，直接将DOM元素包装进jQuery对象中
3. $(`HTML片段`) 创建新元素
4. $(function(){ ... }) 绑定DOMContentLoaded事件处理函数，在DOM内容加载后就自动提前执行！
❣️ 总结：知识点提炼
1. 引入jQuery.js: 2种
(1). 引入项目本地jquery.js文件:
<script src="js/jquery-1.11.3.js">
(2). 引入CDN网络中共享的jquery.js文件:
<script src="官方提供的CDN上jquery.js文件地址">
2. 创建jQuery类型子对象: 2种
(1). 只有jQuery类型子对象才能使用jQuery家简化版函数。
DOM家元素对象无权直接使用jQuery家简化版函数。
所以只要使用jQuery家简化版函数，都要先创建jQuery家子对象，其中保存一个要操作的DOM元素对象。
(2). 如何:2种:
a. 查找DOM元素对象，并保存进新创建的jQuery对象中:
var $jq子对象=$("选择器")
b. 不查找，直接将DOM元素对象保存进新创建的jQuery对象中:
var $jq子对象=$(DOM元素对象)
3. 原理:
(1). $=jQuery=new jQuery
(2). jq子对象其实是一个类数组对象，可保存找到的多个DOM元素对象
(3). 对jq子对象调用简化版函数，会被自动翻译为对应的原生DOM的方法和属性。
所以jQuery中的所有简化版函数效果和DOM中原生方法和属性效果一样。
jQuery中的this、e、e.target等，和DOM中的完全一样！
4. jQuery简化版函数3大特点:
(1). 自带for循环: 对整个jquery子对象调用一次简化版函数，等效于对jQuery子对象中保存的每个DOM元素对象分别调用一次对等的DOM原生方法或属性——不用自己写for循环
(2). 一个函数两用: 调用函数时:
a. 没给新值作为参数，默认执行获取旧值的操作
b. 给了新值作为参数，自动切换为执行修改操作
(3). 多数函数都会返回正在操作的.前的主语jq对象——链式操作。
5. 查找元素:
(1). jQuery支持用所以CSS3选择器查找
(2). jQuery新增选择器: (css中不能用)
a. 基本过滤: (下标从0开始)
:first :last :eq(i) :lt(i) :gt(i) :even :odd
b. 内容过滤:
:contains(文本) :has(选择器) :parent :empty
c. 可见性过滤:
:visible :hidden(只能选择display:none和input type="hidden")
d. 表单元素过滤:
:input :text :password :radio :checkbox ... ...
(3).用节点间关系查找: 2大类关系, 8个函数
a. 父子关系：3个函数:
$元素.parent()
$元素.children("选择器")
$元素.find("选择器")
b. 兄弟关系：5个
$元素.prev()
$元素.prevAll("选择器")
$元素.next()
$元素.nextAll("选择器")
$元素.siblings("选择器")
6. 修改元素: 3种:
修改中的所有函数，都是一个函数两用！
(1). 内容: 3种:
a. 原始HTML内容:
$元素.html("新HTML内容") 代替.innerHTML
b. 纯文本内容:
$元素.text("纯文本内容") 代替.textContent
c. 表单元素的值:
$元素.val("新值") 代替.value
(2). 属性: 3种:
a. 字符串类型的HTML标准属性:2种:
1). $元素.attr("属性名","新属性值")
代替 元素.getAttribute()和setAttribute()
2). $元素.prop("属性名", bool值)
代替 元素.属性名=bool值
b. bool类型的HTML标准属性: 只有1种
$元素.prop("属性名", bool值)
代替 元素.属性名=bool值
c. 自定义扩展属性:只有一种:
$元素.attr("属性名","新属性值")
代替 元素.getAttribute()和setAttribute()
反过来总结:
$元素.attr()可修改一切字符串类型的属性(字符串类型HTML标准属性+自定义扩展属性)
$元素.prop()可修改一切可用.访问的属性(所有HTML标准属性)
(3). 样式:
a. 获取或修改单个css属性: 只有1种
$元素.css("css属性名", "属性值")
获取属性值时被翻译为getComputedStyle(元素)
修改属性值时被翻译为.style.css属性=属性值
b. 使用class批量修改样式:
$元素.addClass("class名")
$元素.removeClass("class名")
$元素.hasClass("class名")
$元素.toggleClass("class名")
| 修改相关的函数都可同时修改多个属性值: $元素.attr或prop或css({ 属性名:"属性值", ... : ... }) |
7. 添加删除替换克隆元素:
(1). 添加新元素: 2步
a. 使用HTML片段批量创建新元素:
$(`HTML片段`)
b. 将新元素添加到DOM树: 5种方式，10个函数
1). 末尾追加:
$父元素.append($新元素)
$新元素.appendTo($父元素)
2). 开头插入: 新增:
$父元素.prepend($新元素)
$新元素.prependTo($父元素)
3). 插入到一个现有元素之前:
$现有元素.before($新元素)
$新元素.insertBefore($现有元素)
4). 插入到一个现有元素之后:
$现有元素.after($新元素)
$新元素.insertAfter($现有元素)
5). 替换现有元素:
$现有元素.replaceWith($新元素)
$新元素.replaceAll($现有元素)
(2). 删除元素: $元素.remove()
(3). 克隆元素: $元素.clone()
(4). 判断一个元素是否具有什么特征: $元素.is("选择器")
8. 事件绑定: ⏬ 👇
(1). 标准写法:
$元素.on("事件名", 事件处理函数)
$元素.off("事件名", 原事件处理函数)
(2). 简写: $元素.事件名(事件处理函数)
(3). 事件委托:
$父元素.on("事件名","选择器",function(){
...this指向e.target...
})
🆕【后文传送】👉 jQuery中的事件全解析_06
如果这篇【文章】有帮助到你，希望可以给【青春木鱼】点个赞👍，创作不易，相比官方的陈述，我更喜欢用【通俗易懂】的文笔去讲解每一个知识点，如果有对【前端技术】感兴趣的小可爱，也欢迎关注❤️❤️❤️【青春木鱼】❤️❤️❤️，我将会给你带来巨大的【收获与惊喜】💕💕！
5829
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
