1 jQuery 事件注册
jQuery 为我们提供了方便的事件注册机制，是开发人员抑郁操作优缺点如下：
- 优点: 操作简单，且不用担心事件覆盖等问题。
- 缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法
语法
register.png
2 jQuery 事件处理
- on(): 用于事件绑定，目前最好用的事件绑定方法
- off(): 事件解绑
- trigger() / triggerHandler(): 事件触发
语法
on1.png
on2.png
on3.png
3 事件处理 off() 解绑事件
当某个事件上面的逻辑，在特定需求下不需要的时候，可以把该事件上的逻辑移除，这个过程我们称为事件解绑。jQuery 为我们提供 了多种事件解绑方法：die() / undelegate() / off() 等，甚至还有只触发一次的事件绑定方法 one()
语法
off.png
4 事件处理 trigger() 自动触发事件
语法
t1.png
t2.png
5 jQuery 事件对象
jQuery 对DOM中的事件对象 event 进行了封装，兼容性更好，获取更方便，使用变化不大。事件被触发，就会有事件对象的产生。
event.png
演示代码
<body>
<div></div>
<script>
$(function() {
$(document).on("click", function() {
console.log("点击了document");
})
$("div").on("click", function(event) {
// console.log(event);
console.log("点击了div");
event.stopPropagation();
})
})
</script>
</body>
注意：jQuery中的 event 对象使用，可以借鉴 API 和 DOM 中的 event 。
6 jQuery 拷贝对象
语法
extend.png
<script>
$(function () {
var targetObj = {};
var obj = {
id: 1,
name: "andey"
}
$.extend(targetObj, obj);
console.log(targetObj);
var targetObj = {id: 100};
var obj = {
id: 1,
name: "andey"
}
$.extend(targetObj, obj);
console.log(targetObj); //会覆盖原来的数据
var targetObj = {
id: 100,
msg: {sex: '男'}
}
;
var obj = {
id: 1,
name: "andey",
msg: {age: 18}
}
$.extend(targetObj, obj);
// console.log(targetObj);// 会覆盖targetObj 里面原来的数据
// // 1. 浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象
targetObj.msg.age=20;
console.log(obj)
console.log(targetObj)
//2.深拷贝把里面的数据完全复制一份给目标对象 如果里面有不冲突的属性,会合并到一起
$.extend(true,targetObj,obj);
// console.log(targetObj);
targetObj.msg.age=20;
console.log(targetObj);
console.log(obj);
})
</script>
8 jQuery 多库共存
实际开发中，很多项目连续开发十多年，jQuery版本不断更新，最初的 jQuery 版本无法满足需求，这时就需要保证在旧有版本正常运行的情况下，新的功能使用新的jQuery版本实现，这种情况被称为，jQuery 多库共存。
语法
noconfig.png
演示代码
<script>
$(function () {
function $(ele) {
return document.querySelector(ele);
}
console.log($('div'));
// 1. 如果$ 符号冲突 我们就使用 jQuery
jQuery.each();
//2.让jquery 释放对$控制权，让自己决定
var meme=jQuery.noConflict();
console.log(meme('span'));
meme.each();
});
</script>
9 jQuery 插件
jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。 这些插件也是依赖于jQuery来完成的，所以必须要先引入
jQuery文件，因此也称为 jQuery 插件。
jQuery 插件常用的网站：
-
jQuery 插件库 http://www.jq22.com/
-
jQuery 之家 http://www.htmleaf.com/
jQuery 插件使用步骤：
-
引入相关文件。（jQuery 文件 和 插件文件）
-
复制相关html、css、js (调用插件)。
网友评论