jQuery基础自学笔记DAY4
- jQuery事件注册
- jQuery事件处理
- jQuery事件对象
文章目录
一、jQuery事件注册
1.1 单个事件注册
语法:element.事件(function(){})
$(“div”).click(function() {事件处理程序})
其他事件和原生基本一致。mouseover,mouseout,blur,focus,change,keydown,keyup,resize,scroll等
//1. 单个事件注册
$("div").click(function() {
$(this).css("background", "purple");
});
$("div").mouseenter(function() {
$(this).css("background", "skyblue");
});
1.2 事件处理on()绑定事件
on()方法在匹配元素上绑定一个或多个事件的事件处理函数
语法:element.on(events,[selector],fn)
- events:一个或多个用空格分隔的事件类型,如‘click’或‘keydown’。
- selector:元素的子元素选择器。
- fn:回调函数,即绑定在元素身上的侦听函数。
优势1:
可以绑定多个事件,多个处理事件处理程序。
//2. 事件处理on
//(1) on可以绑定1个或者多个事件处理程序
$("div").on({
mouseenter: function() {
$(this).css("background", "skyblue");
},
click: function() {
$(this).css("background", "purple");
},
mouseleave: function() {
$(this).css("background", "blue");
}
});
如果事件处理程序相同
$("div").on("mouseenter mouseleave", function() {
$(this).toggleClass("current");
});
优势2:
可以事件委派操作,事件委派的定义就是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素。
// (2) on可以实现事件委托(委派)
$("ul").on("click", "li", function() {
alert(11);
});
//click 是绑定在ul 身上的,但是 触发的对象是 ul 里面的小li
bind(),live()delegate()等方法处理事件绑定或事件委派,最新版本用on替代他们。
优势3:
动态创建的元素,click()没有办法绑定事件,on()可以给动态生成的元素绑定事件。
on可以给未来动态创建的元素绑定事件。
// (3) on可以给未来动态创建的元素绑定事件
// $("ol li").click(function() {
// alert(11);
// })
$("ol").on("click", "li", function() {
alert(11);
})
var li = $("<li>我是后来创建的</li>");
$("ol").append(li);
1.3 事件处理off()解绑事件
off()方法可以移除通过on()方法添加的事件处理程序
$("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");//解除事件委托
1.4 事件处理one()
如果有的事件只想触发一次,可以使用one()来绑定事件。
语法与on()一致。
// 2. one() 但是它只能触发事件一次
$("p").one("click", function () {
alert(11);
})
二、jQuery事件处理
2.1 自动触发事件 trigger()
有些事件希望自动触发,比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发。
语法:
- 元素.事件() element.click()
- 元素.trigger(“事件”)
- 元素.triggerHandler(“事件”) 不会触发元素的默认行为
// 自动触发事件
// 1. 元素.事件()
// $("div").click();会触发元素的默认行为
// 2. 元素.trigger("事件")
// $("div").trigger("click");会触发元素的默认行为
$("input").trigger("focus");
// 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为
$("div").triggerHandler("click");
$("input").on("focus", function() {
$(this).val("你好吗");
});
三、jQuery事件对象
事件被触发,就会有事件对象的产生。
element.on(events,[selector],function(event){})
其中event就是事件对象
$(document).on("click", function() {
console.log("点击了document");
})
$("div").on("click", function(event) {
// console.log(event);
console.log("点击了div");
event.stopPropagation();//阻止冒泡
})
阻止默认行为:event.preventDefault() 或者 return false
阻止冒泡:event.stopPropagation()
其他的参考Web API
四、jQuery其他方法
4.1 jQuery 对象拷贝
如果想要把某个对象拷贝(合并)给另一个对象使用,可以使用$.extend()方法
语法:
$.extend([deep],target,object1,[objectN])
1.deep: true 深拷贝 ,false 浅拷贝,不写默认false。
2.target: 要拷贝的目标对象。
3.object1:待拷贝到第一个对象的对象。
4.objectN:待拷贝到第N个对象的对象。
5.浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象,修改目标对象会影响被拷贝对象。
var targetObj = {};
var obj = {
id: 1,
name: "andy"
};
// $.extend(target, obj); 语法
$.extend(targetObj, obj);
console.log(targetObj);
原来有数据会覆盖掉原来的数据
var targetObj = {
id: 0
};
var obj = {
id: 1,
name: "andy"
};
$.extend(targetObj, obj);
console.log(targetObj); // 会覆盖targetObj 里面原来的数据
4.2 jQuery 多库共存
- 如果$ 符号冲突 我们就使用 jQuery。
jQuery.each(); - 让jquery 释放对$ 控制权 让用自己决定 var xx = jQuery.noConflict();
就把$改为其他了。
var suibian = jQuery.noConflict();
console.log(suibian(“span”));
suibian.each();
4.3 jQuery 插件
4.3.1 推荐网站:
1.jQuery 插件库: www.jq22.com
2.jQuery 之家: www.htmleaf.com
4.3.2 图片懒加载插件:
图片使用延时加载可提高网页下载速度。它也能帮助减轻服务器负载
EasyLazyload.min.js插件
1.引入EasyLazyload.min.js,将图片src替换成data-lazy-src。
2.调用lazyLoadInit()这个js插件引入文件和js调用必须写到DOM元素最后面。
body里面,最下面
<!-- 必须在这里引入我们的懒加载插件 -->
<script src="js/EasyLazyload.min.js"></script>
<script>
lazyLoadInit({
showTime: 1100,
onLoadBackEnd: function(i, e) {
console.log("onLoadBackEnd:" + i);
},
onLoadBackStart: function(i, e) {
console.log("onLoadBackStart:" + i);
}
});
</script>