目录
事件
素材自取：jQueryStudy: jQuery学习仓库 - Gitee.com
一、jQuery 事件注册
单个事件注册
$(“div”).click(function(){ 事件处理程序 })
1.1 事件处理 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() {
alert('hello world!');
});
on() 方法优势3：
动态创建的元素，click() 没有办法绑定事件， on() 可以给动态生成的元素绑定事件
$(“div").on("click",”p”, function(){
alert("俺可以给动态生成的元素绑定事件")
});
$("div").append($("<p>我是动态创建的p</p>"));
// 1. 单个事件注册
$("div").click(function () {
$(this).css("background", "purple")
})
$("div").mouseenter(function () {
$(this).css("background", "blue")
})
// jquery 事件绑定处理 事件处理 on 一次性搞定多个事件
$("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. on可以实现 事件委托
// on(事件方法, "子元素", 函数)
$("ul").on("click", "li", function () {
alert(11)
})
// click是绑定在ul身上的 但是 触发对象是ul里面的小li
// (3) on 可以给动态创建的元素绑定事件
// 这里普通办法是不可以为未来创建的动态元素进行事件委托的
// $("ol li").click(function () {
// alert(11)
// })
// 但是on就可以
$("ol").on("click", "li", function () {
alert(11)
})
// 动态创建一个li
let li = $("<li>我是后来创建的一个li</li>")
$("ol").append(li)
案例：发布微博案例
点击发布按钮， 动态创建一个小li，放入文本框的内容和删除按钮， 并且添加到ul 中。 点击的删除按钮，可以删除当前的微博留言。
// 1. 点击发布按钮, 动态创建一个li 放入文本框的内容和删除按钮 并且添加到ul中
$(".btn").on("click", function () {
let li = $("<li></li>")
li.html($(".txt").val() + " <a href='javascript:;'>删除</a>")
$("ul").prepend(li)
li.slideDown()
$(".txt").val("")
})
// 2. 点击删除按钮 可以删除当前的微博留言
// $("ul a").click(function () { // 此时的 click 不能给动态创建的a添加事件
// alert(11)
// })
// on 可以给动态创建的元素进行事件绑定
$("ul").on("click", "a", function () {
// alert(11)
// console.log(11)
$(this).parent().slideUp(function () {
$(this).remove()
})
})
})二、jQuery 事件处理
1.2 事件处理 off() 解绑事件
off() 方法可以移除通过 on() 方法添加的事件处理程序。
- $("p").off() // 解绑p元素所有事件处理程序
- $("p").off( "click") // 解绑p元素上面的点击事件 后面的 foo 是侦听函数名
- $("ul").off("click", "li"); // 解绑事件委托
如果有的事件只想触发一次， 可以使用 one() 来绑定事件。
$(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")
// 2. one() 但是它只能触发事件一次
$("p").one("click", function () {
alert(11)
})
})
1.3 自动触发事件 trigger()
有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。
- element.click() // 第一种简写形式
- element.trigger("type") // 第二种自动触发模式
$("p").on("click", function () { alert("hi~"); });
$("p").trigger("click"); // 此时自动触发点击事件，不需要鼠标点击- element.triggerHandler(type) // 第三种自动触发模式
triggerHandler模式不会触发元素的默认行为，这是和前面两种的区别。
$(function () {
$("div").on("click", function () {
alert(11);
});
// 自动触发事件
// 1. 元素.事件()
// $("div").click()
// 2. 元素.trigger("事件") 会触发元素的默认行为
// $("div").trigger("click")
// 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为
$("div").triggerHandler("click")
$("input").on("focus", function () {
$(this).val("你好吗")
})
$("input").triggerHandler("focus")
});三、jQuery 事件对象
事件被触发，就会有事件对象的产生。
element.on(events,[selector],function(event) {})
阻止默认行为：event.preventDefault() 或者 return false 阻止冒泡： event.stopPropagation()
$(function () {
$(document).on("click", function () {
console.log("点击document")
})
$("div").on("click", function (e) {
console.log("点击div")
e.stopPropagation() // 阻止事件冒泡
// e.preventDefault() // 阻止默认行为
})
})四、jQuery 拷贝对象
如果想要把某个对象拷贝（合并） 给另外一个对象使用，此时可以使用 $.extend() 方法
$.extend([deep], target, object1, [objectN])
- deep: 如果设为true 为深拷贝， 默认为false 浅拷贝
- target: 要拷贝的目标对象
- object1:待拷贝到第一个对象的对象。
- objectN:待拷贝到第N个对象的对象。
- 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。
- 深拷贝，前面加true， 完全克隆(拷贝的对象,而不是地址)，修改目标对象不会影响被拷贝对象。
$(function () {
let targetObj = {}
let obj = {
id: 1,
name: 'andy'
};
// $.extend(target, obj)
$.extend(targetObj, obj)
console.log(targetObj)
let targetObj = {
id: 0
}
let obj = {
id: 1,
name: 'andy'
};
// $.extend(target, obj)
$.extend(targetObj, obj) // 会对以前的数据进行覆盖
console.log(targetObj)
let targetObj = {
id: 0,
age: 18
}
let obj = {
id: 1,
name: 'andy',
msg: {
age: 18
}
};
// $.extend(target, obj)
// $.extend(targetObj, obj) // 会对以前的数据进行覆盖 和 合并
// console.log(targetObj)
// // extend 只有复杂数据类型(msg) 是属于浅拷贝
// targetObj.msg.age = 20
// console.log(targetObj)
// console.log(obj)
// 2. 深拷贝把里面的数据完全复制一份给目标文件 如果里面有不冲突的属性 会合并到一起
$.extend(true, targetObj, obj) // 会对以前的数据进行覆盖 和 合并
console.log(targetObj)
// extend 当地一个参数被设置成true时 就执行全部数据类型的深拷贝
targetObj.msg.age = 20
console.log(targetObj)
console.log(obj)
})五、多库共存
问题概述：
jQuery使用$作为标示符，随着jQuery的流行,其他 js 库也会用这$作为标识符， 这样一起使用会引起冲突。
客观需求：
需要一个解决方案，让jQuery 和其他的js库不存在冲突，可以同时存在，这就叫做多库共存。
jQuery 解决方案：
- 把里面的 $ 符号 统一改为 jQuery。 比如 jQuery(''div'')
- jQuery 变量规定新的名称：$.noConflict() var xx = $.noConflict();
$(function () {
function $(ele) {
return document.querySelector(ele)
}
console.log($("div"))
jQuery.each()
// 实现多库共存
let suibian = jQuery.noConflict() // 自己进行定义命名$
console.log(suibian("span"))
})
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
