[jQuery] jQuery库学习完整笔记(三)

jQuery 03

目录

• 事件注册
• 事件处理
• 事件对象
• 其他方法
• 拷贝对象
• 多库共存
• 插件

1. 事件注册

单个事件注册

element.事件(function() {} )

$("div").click(function(){ 事件处理程序 })

• 其他事件和原生基本一致。
• 比如mouseover、mouseout blur focus change keydown resize scroll等

2. 事件处理

2.1 事件处理 on() 绑定事件

• on() 方法在匹配元素上绑定一个或多个事件的事件处理函数

element.on(event,[selector],fn)

1. events : 一个或多个用空格分隔的事件类型，如 click 或 keydown
2. selector : 元素的选择器
3. fn : 回调函数 即绑定在元素身上的侦听函数

$("div").on({
	mouseenter:function(){
		$(this).css("background","skyblue");
	},
	click:function(){
		$(this).css("background","purple");
	},
	mouseleave:function(){
		$(this).css("background","blue");
	}
})

• 优势1 可以绑定多个事件和多个事件处理程序

$("#root").on("mouseenter mouseleave", function(){
	$(this).toggleClass("active");
})

• 优势2 可以事件委派操作。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素

$("ul").on('click','li',function(){
	alert('hello world!');
})
// click是绑定在ul身上的，但是触发的对象是ul里面的li

• 在此之前有 bind() live() delegate() 等方法来处理时间内绑定或者事件委派，最新版本请使用 on 替代他们

• 优势3 动态创建的元素 click()没有办法绑定事件， on()可以给动态生成的元素绑定事件

// $("ol li").click(function(){
// 	alert(11);
// })
$("ol").on('click','li',function(){
	alert('hello world!');
})
let li = $("<li>333</li>")
$("ol").append(li);

2.2 事件处理 off() 解绑事件

• off() 方法可以移除通过 on() 方法添加的事件处理程序

// $("div").off();	// 解除所有事件
$("div").off("mouseover");	// 解除指定事件
$("ul").off("click","li");  // 解除事件委托				

• 如果有的事件只想触发一次，可以用 one() 来绑定事件

$("button").one("click",function(){
	$(this).html("已触发")	// 只会触发一次
})

2.3 自动触发事件 trigger()

• 有些事件希望自动触发，比如轮播图自动播放功能跟点击右侧按钮一致，可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发

element.click()		// 第一种简写形式

element.trigger("type")	 // 第二种自动触发模式

element.triggerHandler("type")	// 第三种自动触发模式(不会触发元素的默认行为)

3. 事件对象

• 事件被触发，就会有事件对象的产生

element.on(events,[selector],function(event){})

• 阻止默认行为 event.preventDefault() 或者 return false
• 阻止冒泡 event.stopPropagation()

4. jQuery 其他方法

4.1 jQuery 拷贝对象

• 如果想要把某个对象拷贝(合并)给另外一个对象用，此时可以使用 $.extend() 方法

$.extend([deep], target, object1, [objectN])

1. deep : true 为深拷贝 false浅拷贝(默认)
2. target : 要拷贝的目标对象
3. object1 : 待拷贝到第一个对象的对象
4. objectN : 待拷贝到第N个对象的对象
5. 浅拷贝是把被拷贝的对象 复杂数据类型中的地址 拷贝给目标对象，修改目标对象会影响被拷贝对象
6. 深拷贝，前面加true，完全克隆对象而不是地址，修改目标对象不会影响被拷贝对象

• 拷贝采用合并形式，同类数据覆盖，不同数据合并，复杂数据类型对象浅拷贝覆盖，深拷贝合并

4.2 多库共存

• 问题概述

• jQuery使用$作为标识符，随着jQuery的流行，其他js库也会使用$作为标识符，这样一起使用会引起冲突

• 客观需求

• 需要一个解决方案，让jQuery和其他的js库不存在冲突，可以同时存在，这就叫做多库共存

• jQuery解决方案

1. 把 $() 统一更换为 jQuery()
2. jQuery变量规定新的名称: $.noConflict() var xx = $.noConflict()

4.3 jQuery 插件

• jQuery 功能比较有限，想要更复杂的特效效果，可以借助jQuery插件完成
• 注意 : 这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为jQuery插件

jQuery 插件常用网站

• jQuery插件库
• jQuery之家

jQuery插件使用步骤

1. 引入相关文件(jQuery 和 插件文件)
2. 复制相关html css js 调用插件

jQuery插件演示

1. 瀑布流
2. 图片懒加载(图片使用延迟加载可提高网页的下载速度，能够减轻服务器负载)

• 当页面滑动到可视区域，再显示图片
• 使用jQuery插件库 EasyLazyLoad。注意，此时的js引入文件和js调用必须写到DOM元素最后面

3. 全屏滚动 fullpage.js

• gitHub
• 中文网站
• 中文网站2

bootstrap JS 插件

• bootstrap框架也是依赖于jQuery开发的，因此里面的js插件的使用，也必须引入jQuery文件

其他笔记详见我的博客

[jQuery] jQuery库学习完整笔记(一)

[jQuery] jQuery库学习完整笔记(二)

[jQuery] jQuery库学习完整笔记(三)