jquery中on事件
多个事件处理
语法
element.on(events,[selector],fn)
1、events：一个或多个用空格分隔的事件类型，如“click”或“keydown”。
2、selector：元素的子元素选择器
3、fn：回调函数 绑定在元素身上的侦听函数
第二种方法
把原来给子元素身上的事件绑定在父元素身
ul父元素
li子元素
触发的对象是ul里面的小li，绑定事件是给ul绑定的
$("ul").on("click","li",function(){
alert("hhhhhhhh");
})
阻止默认行为：event,preventDefault()或者return false
阻止冒泡：event.stopPropagation()
例子：
$("div").on("click", function(event) {
// console.log(event);
console.log("点击了div");
event.stopPropagation();
})
优势
事件委托
on可以给未来动态创建元素绑定事件
例子：
// 2、一个 事件处理on
$("div").on({
mouseenter: function() {
$(this).css("background", "skyblue");
},
click: function() {
$(this).css("background", "purple");
}
});
两个事件共用(中间用逗号隔开)
$("div").on("mouseenter mouseleave", function() {
$(this).toggleClass("current");
})
off解绑事件
$(“div”).off(); // 这个是解除了div身上的所有事件
$(“div”).off(“click”);这个是解除了div身上的点击事件
只能点击一次
2. one() 但是它只能触发事件一次
$("p").one("click", function() {
alert(11);
})
自动触发事件
trigger()自动触发事件
1. 元素.事件()
$(“div”).click();会触发元素的默认行为
2. 元素.trigger(“事件”)
$(“div”).trigger(“click”);会触发元素的默认行为
$(“div”).trigger(“click”);会触发元素的默认行为
$(“input”).trigger(“focus”);
3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为
$("div").triggerHandler("click");
$("input").on("focus", function() {
$(this).val("你好吗");
});
对象拷贝
$.extend()方法
语法
$.extend([deep],target,object1,[objectN])
1、deep如果设为true为深拷贝，默认设为flase浅拷贝
2、target：要拷贝的目标对象
3、object1：带拷贝到第一个对象的对象
5、浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象影响被拷贝对象
屏幕剪辑的捕获时间: 2020/8/23 下午 1:28
6、深拷贝对象前面加true，完全克隆（拷贝的对象，而不是地址，修改目标对象不会影响拷贝对象）不会覆盖原有的对象
深拷贝把里面的数据完全复制一份给目标对象 如果里面有不冲突的属性，会合并到一起
浅拷贝例子：
$(function() {
var targetObj = {};
var obj = {
id: 1,
name: "andy"
}
// $.extend(target,obj);
$.extend(targetObj, obj);
console.log(targetObj); //如果要拷贝到的目标对象有数据会覆盖原来的数据
})
深拷贝例子：
// 2、深拷贝把里面的数据完全复制一份给目标对象 如果里面有不冲突的属性，会合并到一起
$.extend(true, targetObj, obj);
console.log(targetObj); //会覆盖原来的数据
targetObj.msg.age = 20;
console.log(targetObj);
console.log(obj);
多库共存
jQuery使用
作为标识符，这样会起冲突
让jQuery和其他js库不存在冲突可以同时存在，这就叫多库共存
jQUery解决方案：
如果
符号统一改为jQuery。比如jQUery(“div”)
2、自己定义
控制权让用户自己决定）
var= 自己命名=$.noConflict();
例子：
var suibian = jQuery.noConflict();
suibian("span");