2021.2.5
文章目录
jQuery学习笔记(三)
jQuery事件
jQuery事件注册
单个事件注册
语法:element.事件(function(){})
如:$('div').click(function(){事件处理程序})
其他事件和原生基本一致。
比如:mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等。
jQuery事件处理
事件处理on()绑定事件
on()方法在匹配元素上绑定一个或多个事件的事件处理函数。
语法:element.on(events,[selector],fn)
- events:一个或多个用空格分隔的事件类型,如’click’或’keydown’。
- selector:元素的子元素选择器。
- fn:回调函数,即绑定在元素身上的侦听函数。
on()方法优势1:
可以绑定多个事件,多个事件处理程序。
$('div').on({
mouseover:function(){},
mouseout:function(){},
click:function(){}
});//里面放一个对象{}对象里面有各种事件
如果事件处理程序相同,可以这样写
$('div').on('mouseover mouseout',function(){
$(this).toggleClass('current');
})
on()方法优势2:
可以事件委派操作。事件委派的定义就是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素。触发对象是孩子,利用事件冒泡冒到父亲身上。
$('ul').on('click','li',function(){
$(this).css('color', 'red');
})
在此之前有bind(),live(),delegate()等方法来处理事件绑定或者事件委派,最新版本用on代替他们。
on()方法优势3:
动态创建的元素,click()没有办法绑定事件,on()可以给动态生成的元素绑定事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jQuery.mini.js"></script>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
.current {
background-color: purple;
}
</style>
</head>
<body>
<div></div>
<ul>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
</ul>
<ol>
</ol>
<script>
$(function() {
//1.单个时间注册
/* $('div').click(function() {
$(this).css('background', 'purple');
});
$('div').mouseenter(function() {
$(this).css('background', 'skyblue');
}); */
//2.事件处理on
//2.1 on可以绑定1个或者多个事件处理程序
/* $('div').on({
mouseenter: function() {
$(this).css('background', 'skyblue');
},
click: function() {
$(this).css('background', 'purple');
},
mouseleave: function() {
$(this).css('background', 'sandybrown');
}
}); */
$('div').on('mouseenter mouseleave', function() {
$(this).toggleClass('current');
});
//2.2 on可以实现事件委托(委派)
// $('ul li').click();隐式迭代给每个小li都添加了一个事件,没必要
$('ul').on('click', 'li', function() {
//事件是绑定在ul身上的,只有一个ul,li是ul的孩子,触发对象是小li,事件冒泡会冒到父亲身上
$(this).css('color', 'red');
});
//2.3 on可以给未来动态创建的元素绑定事件
/* $('on li').click(function() {
alert(22);
}); */ //不会弹出,因为这个事件触发对象li是后来创建的
$('ol').on('click', 'li', function() {
alert(11);
})
var li = $('<li>我是后来创建的</li>');
$('ol').append(li);
})
</script>
</body>
</html>
事件处理 off()解绑事件
off()方法可以移除通过on()方法添加的事件处理程序。
$('p').off() //解绑p元素所有事件处理程序
$('p').off('click') //解绑p元素上面的点击事件
$('ul').off('click','li') //解绑事件委托
如果有的事件只想触发一次,可以使用one()来绑定事件。
<body>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
.current {
background-color: purple;
}
</style>
<div></div>
<ul>
<li>我们都是好孩子</li>
</ul>
<p>我是p</p>
<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'); //这样就把li身上的事件委托解除掉了
//2.one() 但是它只能触发一次
$('p').one('click', function() {
alert('我是p');
})
})
</script>
</body>
自动触发事件 trigger()
有些事件希望自动触发,比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发。
element.click() //第一种简写形式
element.trigger('type') //第二种自动触发模式
element.triggerHandler('type') //第三种自动触发模式 不会触发元素的默认行为
<body>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<div></div>
<input type="text" name="" id="">
<script>
$(function() {
$('div').on('click', function() {
alert(11);
});
//自动触发事件
//1.元素.事件()
$('div').click();
//2.元素.trigger('事件')
$('div').trigger('click');
//2.元素.triggerHandler('事件')第三种的区别:不会触发元素的默认行为
//默认行为比如表单获得焦点就会有条线一闪一闪
$('div').triggerHandler('click');
$('input').on('focus', function() {
$(this).val('您好吗');
});
$('input').triggerHandler('focus');
})
</script>
</body>
jQuery事件对象
事件被触发,就会有事件对象产生。
element.on(events,[selector],function(event){})
- 阻止默认行为:event.preventDefault() 或者 return false
- 阻止冒泡:event.stopPropagation()
<body>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<div></div>
<script>
$(document).on('click', function() {
console.log('点击了document');
})
$(function() {
$('div').on('click', function(event) {
//console.log(event);
console.log('点击了div'); //这里有事件冒泡
event.stopPropagation();
})
})
</script>
</body>
jQuery其他方法
jQuery对象拷贝
如果想要把某个对象拷贝(合并)给另外一个对象使用,此时可以使用 $.extend() 方法。
语法:$.extend([deep],target,object1,[objectN])
- deep:如果设为true为深拷贝,默认为false浅拷贝
- target:要拷贝到的目标对象
- object1:待拷贝到第一个对象的对象
- objectN:待拷贝的第N个对象
- 浅拷贝与深拷贝
- 浅拷贝:把被拷贝的对象复杂数据类型中的地址拷贝给目标对象,修改目标对象会影响被拷贝对象。
- 深拷贝:前面加true,完全克隆(拷贝的对象,而不是地址),修改目标对象不会影响被拷贝对象。
多库共存
一个问题:
jQuery使用
作
为
标
识
符
,
随
着
j
Q
u
e
r
y
的
流
行
,
其
他
j
s
库
也
会
用
作为标识符,随着jQuery的流行,其他js库也会用
作为标识符,随着jQuery的流行,其他js库也会用作为标识符,这样一起使用会引起冲突。
客观需求:
需要一个解决方案,让jQuery和其他的js库不存在冲突,可以同时存在,这就叫多库共存。
jQuery解决方案:
- 把里面的$符号 统一改为jQuery。比如jQuery(‘div’)
- jQuery变量规定新的名称:$.noConflict()
var xx = $.noConflict();
<body>
<div></div>
<span>我是span</span>
<script>
$(function() {
function $(ele) {
return document.querySelector(ele)
}
//1.如果$符号冲突,我们就使用jQuery
console.log($('div'));
//$.each();因为冲突报错
jQuery.each();
//2.让jQuery释放对$符号的控制权,让用户自己决定
var aa = jQuery.noConflict();
aa('span');
console.log(aa('span'));
})
</script>
</body>
jQuery插件
jQuery功能比较有限,想要更复杂的特效效果,可以借助jQuery插件完成。
注意:这些插件也是依赖于jQuery来完后的,所以必须要先引入jQuery文件,因此也称为jQuery插件。
jQuery插件常用的网站:
- jQuery插件库:http://www.jq22.com/
- jQuery之家:http://www.htmleaf.com/
jQuery插件使用步骤:
- 引入相关文件(jQuery文件和插件文件)
- 复制相关html、css、js(调用插件)
jQuery插件演示:
- 瀑布流
- 图片懒加载(图片使用延迟加载,可提高网页下载速度。它也能帮助减轻服务器负载)
当我们页面滑动到可视区域,再显示图片。(EasyLazyload) - 全屏滚动(fullpage.js)
- gitHub:https://github.com/alvarotrigo/fullPage.js
- 中文翻译网站:http://www.dowebok.com/demo/2014/77/
Note:
1.无意中发现的,vs code 按F11可进入/退出全屏。
2.vs code中按ctrl+H可以查找/替换。
bootstrap JS插件:
bootstrap框架也是依赖于jQuery开发的,因此里面的js插件使用,也必须引入jQuery文件。
【完】