目标：
- 能够说出4种常见的注册事件
- 能够说出on绑定事件的优势
- 能够说出jQuery事件委派的优点以及方式
- 能够说出绑定事件写解绑事件
1. jQuery 事件
1.1 事件注册
语法：
element.事件(function () {})$('div').click(function () { 事件处理程序 })其他事件和原生基本一致。 比如 mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等
1. 2 事件处理
1.2.1 事件处理 on() 绑定事件
on() 方法在匹配元素上绑定一个或多个事件的事件处理函数。 语法：
element.on(events, [selector], fn)events：一个或多个用空格分隔的事件类型，如'click'或'keydown'。selector：元素的子元素选择器。fn：回调函数，即绑定在元素身上的侦听函数。
（1）优势1：on() 方法-绑定多个事件
可以绑定多个事件，多个处理事件处理程序。
$('div').on({
mouseover: function(){},
mouseout: function(){},
click: function(){}
});如果事件处理程序相同：
$('div').on('mouseover mouseout', function() {
$(this).toggleClass('current');
}); （2）优势2：on() 方法事件委派
可以事件委派操作 。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。这样就不要给多个子元素多次绑定事件了。
$('ul').on('click', 'li', function() {
alert('hello world!');
});在此之前有 bind()、 live()、delegate() 等方法来处理事件绑定或者事件委派，最新版本的请用 on 替代他们。
（3）优势3：on() 方法给动态元素绑定事件
动态创建的元素（暂时还没创建未来即将创建），click() 没有办法绑定事件， on() 可以给动态生成的元素绑定事件。
$('div').on('click', 'p', function(){
alert('俺可以给动态生成的元素绑定事件')
});$('div').append($('<p>我是动态创建的p</p>'));<script src="jQuery.main.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
.current {
background-color: purple;
}
</style>
</head>
<body>
<div></div>
<ul>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
</ul>
<ol>
</ol>
<script>
$(function () {
// 1. 单个事件注册 (注册一个事件时)
// $('div').click(function () {
// $(this).css('background', 'red')
// });
// $('div').mouseenter(function () {
// $(this).css('background', 'skyblue')
// })
// 2. 事件处理 on （绑定一个或多个事件时）
// （1） on 可以绑定一个或多个事件
// $('div').on({
// mouseenter: function () {
// $(this).css('background', 'skyblue')
// },
// click: function () {
// $(this).css('background', 'red')
// },
// mouseleave: function () {
// $(this).css('background', 'yellow')
// }
// })
// 事件程序一样时
$('div').on('mouseenter mouseleave', function () {
$(this).toggleClass('current');
})
// （2） on 可以实现事件委托（委派）
// $('ul li').click();
$('ul').on('click', 'li', function () {
alert(11); //click 是绑定在ul身上的，但触发的对象是ul里面的小li
});
// （2） on 可以给未来动态创建的元素绑定事件
// $('ol li').click(function () {
// alert(11); //无法实现给未来的li点击
// })
$('ol').on('click', 'li', function () {
alert(11);
})
var li = $('<li>我是后来创建的</li>')
$('ol').append(li)
})
</script>
</body>1.2.2 事件处理 off() 解绑事件
off() 方法可以移除通过 on() 方法添加的事件处理程序。
// 解绑p元素所有事件处理程序
$('p').off()
// 解绑p元素上面的点击事件
$('p').off( 'click')
// 解绑事件委托
$('ul').off('click', 'li')如果有的事件只想触发一次， 可以使用 one() 来绑定事件。
实例：
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<script src="jQuery.main.js"></script>
<script>
$(function () {
$('div').on({
click: function () {
console.log('我点击了');
},
mouseover: function () {
console.log('鼠标经过了');
}
})
$('ul').on('click', 'li', function () {
alert(11);
})
// 1. 事件解绑 off
// $('div').off(); // 这个是解除了div身上的所有事件
$('div').off('click'); // 这个是解除了div身上的点击事件
$('ul').off('click', 'li');
// 2. one() 但是它只能触发事件一次
$('p').one('click', function () {
alert(11)
})
})
</script>
</head>
<body>
<div></div>
<ul>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
</ul>
<p>我是屁</p>
</body>
1.2.3 自动触发事件 trigger()
有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。
-
简写形式
element.click() -
自动触发模式
element.trigger('type')举例：
$('p').on('click', function () { alert('hi~'); }); // 此时自动触发点击事件，不需要鼠标点击 $('p').trigger('click'); -
自动触发模式
triggerHandler模式 不会触发元素的默认行为，这是和前面两种的区别。element.triggerHandler('type')
实例：
<script>
$(function () {
$('div').on('click', function () {
alert(11);
})
// 1. 元素.事件
// $('div').click()
// 2. 元素.trigger("事件")
// $('div').trigger('click');
// 3. 元素.triggerHandler("事件") ,区别是不会触发元素的默认行为
$('div').triggerHandler('click');
$('input').on('focus', function () {
$(this).val('你好吗'); //有光标闪烁
});
$('input').triggerHandler('focus'); //没有光标闪烁
})
</script>
1.3 事件对象
事件被触发，就会有事件对象的产生。
element.on(events,[selector],function(event) {})阻止默认行为： event.preventDefault() 或者 return false
阻止冒泡： event.stopPropagation()
<script>
$(function () {
$(document).on('click', function () {
console.log('点击了document');
})
$('div').on('click', function (event) {
console.log('点击了div');
event.stopPropagation(); //阻止冒泡，执行“点击了div”，就不能执行“点击了document”
})
})
</script>2. jQuery 其他方法
2.1 jQuery 拷贝对象
如果想要把某个对象拷贝（合并）给另外一个对象使用，此时可以使用 $.extend() 方法
语法：
$.extend([deep], target, object1, [objectN])deep: 如果设为true为深拷贝，不写则为浅拷贝target：要拷贝的目标对象object1：待拷贝到第一个对象的对象。objectN：待拷贝到第N个对象的对象。- 浅拷贝是把被拷贝的 对象复杂数据类型 中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。
对于简单数据类型属性，则不会拷贝地址。 - 深拷贝，前面加
true， 完全克隆（拷贝的对象,而不是地址），修改目标对象不会影响被拷贝对象。
实例：
<script>
$(function () {
// 1.
// var targetObj = {}
// var obj = {
// id: 1,
// name: 'andy'
// }
// // $.extend(targetObj,obj);
// $.extend(targetObj, obj);
// console.log(targetObj);
2.
// var targetObj = {
// id: 0
// }
// var obj = {
// id: 1,
// name: 'andy'
// }
// // $.extend(targetObj,obj);
// $.extend(targetObj, obj);
// console.log(targetObj); //会覆盖targetObj里面原来的数据
3.
var targetObj = {
id: 0,
msg: {
sex: '男'
}
}
var obj = {
id: 1,
name: 'andy',
msg: {
age: 18
}
}
// 1. 浅拷贝 把原来对象里面的复杂数据类型地址拷贝给目标对象
// $.extend(targetObj, obj);
// console.log(targetObj); //会覆盖targetObj里面原来的数据，msg里面的age也会把sex覆盖掉
// targetObj.msg.age = 20;
// console.log(obj); //浅拷贝之后修改的age值（20）会对原来的obj的age值有影响，为20
// 2. 深拷贝 把里面的数据完全复制一份给目标对象
$.extend(true, targetObj, obj);
console.log(targetObj); //不会覆盖targetObj里面原来的数据
targetObj.msg.age = 20;
console.log(obj); //深拷贝之后修改的age值（20）不会对原来的obj的age值有影响，obj的age仍然为18
})
</script>
2.2 多库共存
- 问题概述： jQuery 使用
$作为标示符，随着 jQuery 的流行,其他 js 库也会用这$作为标识符， 这样一起使用会引起冲突。 - 客观需求： 需要一个解决方案，让 jQuery 和其他的 js 库不存在冲突，可以同时存在，这就叫做多库共存。
- jQuery 解决方案：
- 把里面的
$符号 统一改为jQuery。比如jQuery('div') - jQuery 变量规定新的名称：
$.noConflict()var suibian = $.noConflict(); suibian('div');
- 把里面的
实例：
<script>
$(function () {
function $(ele) {
return document.querySelector(ele);
}
console.log($('div')); //<div></div>
// 1. 如果$ 符号有冲突，就使用jQuery
// $.each(); //会报错 有冲突
jQuery.each();
// 2. 让jQuery 释放对$ 的控制权
var suibian = jQuery.noConflict();
console.log(suibian('span'));
suibian.each();
})
</script>
2.3 jQuery 插件
2.3.1 jQuery 插件
jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。 注意: 这些插件也是依赖于 jQuery 来完成的，所以必须要先引入 jQuery 文件，因此也称为 jQuery 插件。
jQuery 插件常用的网站：
- jQuery 插件库 jQuery插件库-收集最全最新最好的jQuery插件
- jQuery 之家 jQuery之家-自由分享jQuery、html5、css3的插件库
jQuery 插件使用步骤：
- 引入相关文件。（jQuery 文件 和 插件文件）
- 复制相关 html、css、js (调用插件)。
jQuery 插件演示：
- 瀑布流
- 图片懒加载
图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载）
当我们页面滑动到可视区域，再显示图片。
我们使用jquery 插件库 EasyLazyload。 注意，此时的 js 引入文件和 js 调用必须写到 DOM 元素（图片）最后面 （ctr + h 是VS里面的替换快捷键） - 全屏滚动（fullpage.js）
图片懒加载：先下载好插件，把懒加载的JS插件复制到目标项目的JS文件中，再按懒加载插件的使用说明使用（‘’<img src= ‘’ 换成‘’ <img data-lazy-src=" ；引用的JS懒加载放在最后面）。
2.3.2 Bootstrap JS 插件
bootstrap JS 插件：bootstrap 框架也是依赖于 jQuery 开发的，因此里面的 js 插件使用 ，也必须引入 jQuery 文件。
相关网站：
- bootstrap 中文网：https://www.bootcss.com
- bootstrap JS 中文网：JavaScript 插件 · Bootstrap v3 中文文档 | Bootstrap 中文网
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css"> <script src="./bootstrap/js/jquery.min.js"></script> <script src="./bootstrap/js/bootstrap.min.js"></script>
详细使用方法多去看 pink 的JS基础的 P419-P423
2466
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
