jQuery事件
- 单个事件注册
- 语法：
element.事件(function(){});例如：$("div").click(function(){事件处理程序}),其他事件与原生基本一致 - 比如：
mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等
- 语法：
事件绑定
- 事件处理
on()绑定事件-
on()方法在匹配元素上绑定一个或多个事件的事件处理函数 - 语法规范：
element.on(events,[selector],fn)-
events：一个或多个用空格分隔的事件类型，如：click或keydown -
selector:元素的子元素选择器 -
fn:回调函数 即绑定在元素身上的侦听函数
-
-
<style>
div{
width: 100px;
height: 100px;
background-color: #777;
}
</style>
<div></div>
<!-- 此处引入jQuery文件,你就当这个文件存在吧 -->
<script src="jquery.min.js"></script>
<script>
$(function() {
// 单个事件注册
$("div").click(function() {
$(this).css("background", "blue");
});
$("div").mouseenter(function() {
$(this).css("background", "red");
});
// 事件处理on()
$("div").on({
click: function() {
$(this).css("background", "blue");
},
mouseenter: function() {
$(this).css("background", "red");
}
mouseleave: function() {
$(this).css("background", "purple");
}
});
})
</script>
on()方法的优势:
- 可以绑定多个事件，多个事件处理程序
$("div").on({
mouseover: function(){},
mouseout: function(){},
click: function(){}
});
// 如果事件类型是相同的，可以使用下面这种方法
$("div").on("mouseover mouseout", function() {
$(this).toggleClass("current");
})
- 可以实现事件委派操作，事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素
$('ul').on('click','li',function() {
alert('hello world!');
});
在此之前有
bind()、live()、delegate()等方法来处理事件绑定或者事件委派，最新版本的请用on替代他们
解绑事件
off()方法可以移除通过on()方法添加的事件处理程序
$("p").off(); // 解绑p标签所有事件处理程序
$("p").off("click"); // 解绑p标签元素上面的点击事件
$("ul").off("click", "li"); // 解绑事件委托
如果有的事件只想触发一次，可以用
one()来绑定事件
$("p").one("click", function() {
alert(57); // 只触发一次
})
自动触发事件trigger()
元素.事件()第一种简写形式，会触发元素的默认行为元素.trigger("事件")第二种自动触发模式，会触发元素的默认行为
<style>
div{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
<div></div>
<script>
$(function() {
$("div").on("click",function() {
alert(5);
});
// 第一种 元素.事件()
$("div").click();
// 第二种 元素.trigger("事件")
$("div").trigger("click");
})
</script>
元素.triggerHandler("事件")第三种自动触发模式，这种方法不会触发元素的默认行为
jQuery事件对象
事件触发，就会有事件对象的产生
element.on(events, [selector],function(event) {})- 阻止默认行为：
event.preventDefault()或者return false- 阻止事件冒泡：
event.stopPropagation()
<!-- 阻止事件冒泡 -->
<style>
div{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
<div></div>
<script>
$(function() {
$(document).on("click",function() {
alert(7);
});
$("div").on("click",function() {
alert(5);
event.stopPropagation();
});
})
</script>
jQuery里面的一些常用方法
如果想要把某个对象拷贝(合并)给另外一个对象使用，此时可以用
$.extend()方法
- 语法：
$.extend([deep], target, object1, [objectN])
deep:如果设为true为深拷贝，默认为false浅拷贝target:要拷贝的目标对象object1:待拷贝到第一个对象的对象
$(function() {
/* let targetObj = {};
let obj = {
id: 1,
name: "andy"
};
$.extend(targetObj, obj);
console.log(targetObj); */
/* let targetObj = {
id: 0
};
let obj = {
id: 1,
name: "andy"
};
$.extend(targetObj, obj);
console.log(targetObj); // 会覆盖targetObj里面原来的数据 */
let targetObj = {
id: 0
};
let obj = {
id: 1,
name: "andy"
byc: {
age: 18
}
};
$.extend(targetObj, obj);
console.log(targetObj);
})
- 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象
- 深拷贝，前面加
true,完全克隆(拷贝的是对象，不是地址)，修改目标对象不会影响被拷贝对象
多库共存
- 问题概述：jQuery使用
$作为标识符，随着jQuery的流行，其它JS库也会用这种$作为标识符，这样一起使用会引起冲突
- 客观需求：需要一个解决方案，让jQuery和其他的JS库不存在冲突，可以同时存在，这就叫做多库共存
- jQuery解决方案
- 把里面的符号统一改为jQuery，例如：
jQuery("div")- 让jQuery释放对
$控制权，让用户自己决定(jQuery变量规定新的名称)：$noConflict()let xx = $noConflict();
jQuery插件
jQuery功能比较有限，想要更复杂的特效效果，可以借助于jQuery插件完成
- 注意：这些插件也是基于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为jQuery插件
- 推荐两个JS插件常用的网站
http://www.jq22.com/和http://www.htmleaf.com/
- jQuery插件使用步骤
- 引入相关文件(jQuery文件和插件文件)
- 复制相关html、css、js(调用插件)
推荐案例练习：瀑布流(图片懒加载)、轮播图(3D切换版)
- 图片懒加载：就是当我们页面滚动到可视区域在显示图片(图片使用延迟加载可提高网页下载速度，它也能帮助减轻服务器负载)
