jQuery 事件: jQuery 事件注册、 jQuery 事件处理、jQuery 事件对象、 jQuery 拷贝对象、jQuery 多库共存、 jQuery 插件

最新推荐文章于 2024-05-25 13:36:04 发布

_Tough_Girl

最新推荐文章于 2024-05-25 13:36:04 发布

阅读量284

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/icemwj/article/details/120646229

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、jQuery 事件注册

单个事件注册

语法：

element.事件(function(){})

例如：

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

其他事件和原生基本一致。

比如：mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等

2、jQuery 事件处理

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

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

语法：

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

events：一个或多个用空格分隔的事件类型，如 “click” 或 “keydown” 。
selector：元素的子元素选择器。
fn：回调函数，即绑定在元素身上的侦听函数。

（1）on() 方法优势1：

可以绑定多个事件，多个处理事件处理程序。

$(“div”).on({
	mouseover: function(){},
	mouseout: function(){},
	click: function(){}
});

如果事件处理程序相同

$(“div”).on(“mouseover mouseout”, function() {
	$(this).toggleClass(“current”);
});

（2）on() 方法优势2：

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

$('ul').on('click', 'li', function() {
	alert('hello world!');
});

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

（3）on() 方法优势3：

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

$("div").on("click", "p", function(){
	alert("俺可以给动态生成的元素绑定事件")
});

$("div").append($("<p>我是动态创建的p</p>"));

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

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

$("p").off() // 解绑p元素所有事件处理程序
$("p").off( "click") // 解绑p元素上面的点击事件 后面的 foo 是侦听函数名
$("ul").off("click", "li"); // 解绑事件委托

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

2.3 自动触发事件 trigger()

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

element.click() // 第一种简写形式
element.trigger("type") // 第二种自动触发模式
element.triggerHandler(type) // 第三种自动触发模式

triggerHandler 模式不会触发元素的默认行为，这是和前面两种的区别。

$("p").on("click", function () {
	alert("hi~");
});
$("p").trigger("click"); // 此时自动触发点击事件，不需要鼠标点击

3、jQuery 事件对象

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

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

阻止默认行为：event.preventDefault() 或者 return false

阻止冒泡： event.stopPropagation()

4、 jQuery 拷贝对象

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

语法：

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

deep：如果设为 true 为深拷贝，默认为 false 浅拷贝
target：要拷贝的目标对象。
object1：待拷贝到第一个对象的对象。
objectN：待拷贝到第N个对象的对象。
浅拷贝目标对象引用的被拷贝的对象地址，修改目标对象会影响被拷贝对象。
深拷贝，前面加 true，完全克隆，修改目标对象不会影响被拷贝对象。

5、jQuery 多库共存

问题概述：

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

客观需求：

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

jQuery 解决方案：

把里面的 $ 符号统一改为 jQuery。比如 jQuery(’‘div’’)
jQuery 变量规定新的名称：$.noConflict() var xx = $.noConflict();

6、 jQuery 插件

jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。

注意：这些插件也是依赖于 jQuery 来完成的，所以必须要先引入 jQuery 文件，因此也称为 jQuery 插件。

jQuery 插件常用的网站：

jQuery 插件库： https://www.jq22.com/
jQuery 之家： http://www.htmleaf.com/

jQuery 插件使用步骤：

引入相关文件。（jQuery 文件和插件文件）
复制相关 html、css、js (调用插件)。

jQuery 插件演示：

瀑布流
图片懒加载（图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载）
当我们页面滑动到可视区域，再显示图片。
我们使用jquery 插件库 EasyLazyload。注意，此时的js引入文件和js调用必须写到 DOM元素（图片）最后面
全屏滚动（fullpage.js）
gitHub： https://github.com/alvarotrigo/fullPage.js
中文翻译网站： http://www.dowebok.com/demo/2014/77/

bootstrap JS 插件：

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