目录
❣️ 事件绑定
1. DOM中: 3种
2. jq中: 统一为一种
3. jQ较之DOM的改进
5. 事件委托
❣️ 总结：jQuery简化版函数3大特点
❣️ 总结：$()共有4种
❣️ 总结：知识点提炼
❣️ 事件绑定
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
scroll3. 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是否是想要的
——非主流
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名")
|
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
如果这篇【文章】有帮助到你，希望可以给【青春木鱼】点个赞👍，创作不易，相比官方的陈述，我更喜欢用【通俗易懂】的文笔去讲解每一个知识点，如果有对【前端技术】感兴趣的小可爱，也欢迎关注❤️❤️❤️【青春木鱼】❤️❤️❤️，我将会给你带来巨大的【收获与惊喜】💕💕！
