jquery事件的发展史
名称 | 用法 | m描述 |
---|---|---|
click() | $('div').click(function(){}) | (1)不支持同时注册:不能一行代码同时注册两个事件,需要写两行 (2)不支持动态注册:如果是新创建的元素,没有事件。需要重新注册 |
bind() | $(‘div’).bind(‘click mouseover’,function(){}) | (1)支持同时注册 (2)不支持动态注册 |
delegate() | $(‘body’).bind(‘click mouseover’,‘div’,function(){}) | (1)支持同时注册 (2)支持动态注册 |
on() | $(‘body’).bind(‘click mouseover’,‘div’,function(){}) | (1)支持同时注册 (2)支持动态注册(给body注册 ) |
on() | $('div').bind('click mouseover',,function(){}) | (1)支持同时注册 (2)不支持动态注册(给元素注册 ) |
-
$().事件类型(事件处理函数) : $().click(function(){});
-
事件绑定: $().bind()
-
事件委托 : $().delegate()原理:
事件委托的原理是 : 事件冒泡
/* 使用原生DOM语法手动模拟事件委托原理 */
document.body.onclick = function (e) {
// 事件源 : this:这个事件给谁注册的,默认都是指向事件源
// 事件对象: e :存储事件触发的信息
// 事件触发源: e.target 触发这个事件真正的源头子元素
console.log(e.target);
//点击body任意区域都会触发这个事件,但是具体处理委托给.one处理
if (e.target.className == 'one') {
console.log('你点击我了');
}
};
- $().on(事件类型,事件处理函数)
(1)支持同时注册
(2)支持动态注册 : 由用户决定
a. 不注册委托事件 : 调用元素自己的 on()
b. 注册委托事件 : 调用父元素的 on()
jq事件解绑
-
原生DOM注册事件与解绑事件
- 事件源.事件类型 = 事件处理函数 box.onclick = function(){}
解绑: 事件源.事件类型 = nullbox.onclick = null
- 事件源.addEventListener()
解绑:事件源.removeEventListener()
- 事件源.事件类型 = 事件处理函数 box.onclick = function(){}
-
jq注册事件
注册: $().on(‘click’,function(){});
解绑: $().off(‘click’);(传参解绑单个,不传解绑所有)
jq事件触发
-
原生事件触发
- 注册事件: box.onclick = function(){}
- 触发事件: box.onclick();
-
jq事件触发
- 注册事件: $().on(‘click’,function(){})
- 触发事件: $().trigger(‘click’);
$().click() 等价于 $().trigger(‘click’) ;
jq的事件对象
- jq的事件对象和原生的事件对象是一样的,唯一的区别是jq事件对象内部处理了浏览器兼容性
- 阻止a标签默认跳转
return false
: 阻止默认跳转 + 阻止冒泡e.preventDefault();
阻止默认跳转e.stopPropagation();
阻止事件冒泡
链式编程
- 一个对象可以连续调用方法
- 底层原理:
在对象的方法中返回自己
- 底层原理:
- 链式编程注意点:
- 并不是所有的语法都支持链式
设置类
:支持链式
。 返回的都是jq对象获取类 :
不支持链式
。返回的是对象的属性值(字符串,数字)- 并不是所有的链式都会返回你想要的结果
end() :
返回链式上一个DOM状态
- 并不是所有的语法都支持链式
案例(五角星评分案例)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>五角星评分案例</title>
<style>
* {
padding: 0;
margin: 0;
}
.comment {
font-size: 40px;
color: red;
}
.comment li {
float: left;
cursor: pointer;
}
ul {
list-style: none;
}
</style>
</head>
<body>
<ul class="comment">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
/*需求
(1)鼠标移入每一个li元素: 当前移入和以前所有的兄弟变成实心五角心, 之后所有的兄弟变成空心五角心
(2)鼠标移出每一个li元素: 点击的li元素和以前的兄弟变成实心, 之后的兄弟变成空心
(3)鼠标单击每一个li元素: 记录当前点击的li元素
*/
let sx_wjx = '★';
let kx_wjx = '☆';
//给li元素注册三个事件,可以有好几种写法
//方式二: $().on() 支持同时注册
$('li').on({
mouseenter:function(){
/*
$().prev() : 获取上一个兄弟元素
$().prevAll() :获取以前所有的元素
*/
//当前移入和以前所有的兄弟变成实心五角心, 之后所有的兄弟变成空心五角心
//$(this).text(sx_wjx).prevAll().text(sx_wjx).end().nextAll().text(kx_wjx);
$(this).text(sx_wjx);
$(this).prevAll().text(sx_wjx);
$(this).nextAll().text(kx_wjx);
},
mouseleave:function(){
$('li[lv="current"]').text(sx_wjx).prevAll().text(sx_wjx).end().nextAll().text(kx_wjx);
},
click:function(){
//使用自定义属性:存储当前点击的元素
$(this).attr('lv','current').siblings().removeAttr('lv');
}
});
//方式三: 使用链式语法
// $('li').mouseenter(function(){})
// .mouseleave(function(){})
// .click(function(){});
//方式一:传统写法,逐一注册
// $('li').mouseenter(function(){});
// $('li').mouseleave(function(){});
// $('li').click(function(){});
</script>
</body>
</html>
显示迭代
-
隐式迭代
: jq默认的,偷偷的遍历每一个元素设置相同的值- 适用场景 : 设置
"相同"
的值
- 适用场景 : 设置
-
显式迭代
: 主动的遍历jq对象的每一个元素- 适用场景: 设置
"不同"
的值
案例
- 适用场景: 设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复制</title>
<style>
ul {
list-style: none;
}
li {
float: left;
width: 200px;
height: 200px;
background: pink;
text-align: center;
line-height: 200px;
margin: 0 20px 20px 0;
}
</style>
</head>
<body>
<ul id="ulList">
<li>透明度逐渐上升</li>
<li>透明度逐渐上升</li>
<li>透明度逐渐上升</li>
<li>透明度逐渐上升</li>
<li>透明度逐渐上升</li>
<li>透明度逐渐上升</li>
<li>透明度逐渐上升</li>
<li>透明度逐渐上升</li>
<li>透明度逐渐上升</li>
<li>透明度逐渐上升</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
/*
1.隐式迭代:jq默认的偷偷的遍历每一个元素设置相同的值
适用场景:设置 "相同" 的值
2.显示迭代:主动的遍历jq对象的每一个元素
适用场景:设置"不同"的值
*/
// 1.原生for语法
for (let i = 0; i < $('li').length; i++) {
let li = $('li')[i]; //取出来的值为DOM对象
$(li).css('opacity', i / 10 + 0.1).text('opacity:'+(i / 10 + 0.1));
};
// 2.使用jq的each()方法
$('li').each(function(index,ele){
console.log(index,ele);//下标 ele: DOM对象
$(ele).css('opacity',index/10+0.1);
})
</script>
</body>
</html>
多库共存
- 查看当前jq的版本号
- console.log($.prototype.jquery);
- console.log(jQuery.prototype.jquery);
console.log($.fn.jquery);
- 实现多库共存:
释放$控制权
$.noConflict()
// (1)默认由于是后导入的3.x,所以$表示3.x
// (2)$.noConflict() 释放3.x版本对$的控制权,转交给$3 . 原来的$就交给了1.x版本
// (3) $3 : 3.x $:1.x
let $3 = $.noConflict();
console.log($3.prototype.jquery); //3.0.0
console.log($.prototype.jquery); //1.12.4
- 需求: 就只希望使用一个$, 就可以代表两个版本
/*解决方案: 闭包实现沙箱模式 */
console.log( '沙箱外面$:' + $.prototype.jquery);//1.12.4
console.log( '沙箱外面$3:' + $3.prototype.jquery);//3.0.0
(function($){
// 沙箱内的局部变量:let $ = $3;
console.log('沙箱内部$:'+$.prototype.jquery);//3.0.0
})($3);
插件
- 插件:在原有的基础上新增的方法
- 插件的原理
- 就是给jQuery的
原型
添加自己封装的方法(所有$对象都可以调用)
- 就是给jQuery的
- 插件课外学习传送门
- 国内最好的jq插件库:http://www.jq22.com/
- UI相关的插件
- jq自己团队写的:http://jqueryui.com/
- 第三方团队写的:http://www.jeasyui.net/plugins/
- bootstrap:https://www.bootcss.com/
懒加载
- 为什么要有懒加载技术
- img标签默认会加载src属性对应的资源图片
- 如果一个网页有几百上千的img标签,需要加载上千个资源,影响网页加载时间
- 懒加载技术好处
- 提升网页加载速度(性能提升)
- 懒加载技术原理
- 将图片的资源路径放入自定义属性中 (不要放入src属性)
- 监听网页的滚动,当图片进入可视区域范围
- 取出图片自定义属性中的路径,赋值给src即可
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
width: 980px;
margin: 0 auto;
}
ul li {
width: 230px;
height: 230px;
float: left;
margin-right: 20px;
margin-bottom: 20px;
}
ul li.last {
margin-right: 0;
}
ul li img {
width: 100%;
height: 100%;
display: block;
}
</style>
</head>
<body>
<!-- 假设上面的内容高度1000px -->
<div style="margin-top: 1000px;"></div>
<ul>
<li><img data-original="http://img.daimg.com/uploads/allimg/160324/1-160324232117.jpg" alt=""></li>
<li><img data-original="http://img.daimg.com/uploads/allimg/160318/1-16031P01P0.jpg" alt=""></li>
<li><img data-original="http://img.daimg.com/uploads/allimg/160318/1-16031P01332.jpg" alt=""></li>
<li><img data-original="http://img.daimg.com/uploads/allimg/160318/1-16031P01332.jpg" alt=""></li>
</ul>
<script src="jquery-1.12.4.js"></script>
<!-- 懒加载插件 -->
<script src="./plugin/jquery.lazyload.js"></script>
<script>
/*懒加载技术作用和原理
1.为什么要有懒加载技术
1.1 img标签默认会加载src属性对应的资源图片
1.2 如果一个网页有几百上千的img标签,需要加载上千个资源,影响网页加载时间
2.懒加载技术好处
2.1 提升网页加载速度(性能提升)
3.懒加载技术原理
3.1 将图片的资源路径放入自定义属性中 (不要放入src属性)
3.2 监听网页的滚动,当图片进入可视区域范围
3.3 取出图片自定义属性中的路径,赋值给src即可
*/
//开始使用懒加载图片
$("li>img").lazyload({effect: "fadeIn"});
</script>
</body>
</html>
- 自定义插件封装
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>标题</title>
<script src="jquery-1.12.4.js"></script>
<script src="jquery-bgColor.js"></script>
<script>
$(function () {
//1.需求:给div设置宽高和背景色.
// $('div').width(100).height(100).css('backgroundColor','red')
//2.如果能有个插件这样写就好了
//可惜报错了:理想很美好,现实很骨感
// $('div').w(100).h(100).bgColor('red');
//3.自定义插件原理: 给jQuery对象的原型添加方法,封装一些自己的操作
//把这个函数放到单独的js文件中就完美了
jQuery.fn.w = function(width){
//this:指向调用这个方法的jquery对象
this.width(width);
//这个对象我用完了,返回出去给调用者继续用,这就是链式编程的原理
return this;
};
jQuery.fn.h = function(height){
//this:指向调用这个方法的jquery对象
this.height(height);
return this;
};
jQuery.fn.bgColor = function(color){
//this:指向调用这个方法的jquery对象
this.css('backgroundColor',color);
return this;
};
//4.试试自己的插件吧
$('div').w(100).h(100).bgColor('red');
});
</script>
</head>
<body>
<div></div>
<p></p>
</body>
</html>