jQuery事件

一、jQuery事件注册

1、单个事件注册

(1)语法:

element.事件(function(){})

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

(2)其他事件和原生基本一致:

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

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

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

1、语法:

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

(1)events:一个或多个用空格分隔的事件类型,如"click"或"keydown";

(2)selector:元素的子元素选择器。

2、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(11);
});

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

3、on() 方法优势3:

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

二、jQuery事件处理

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

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

$("p").off()  // 解绑p元素所有事件处理程序

$("p").off("click")  // 解绑p元素上面的点击事件 后面的 foo是侦听函数名

$("ul").off("click","li")  // 解绑事件委托

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

(二)自动触发事件 trigger()

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

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

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

三、jQuery事件对象

1、事件被触发,就会有事件对象的产生。

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

2、阻止默认行为:event.preventDefault() 或者 return false

3、阻止冒泡:event.stopPropagation()

四、jQuery其他方法

(一)jQuery拷贝对象

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

2、语法:

$.extend([deep],target,objject1,[objectN]);

(1)deep:如果设为true为深拷贝,默认为false 浅拷贝;

(2)target:要拷贝的目标对象;

(3)object1:待拷贝到第一个对象的对象;

(4)objectN:待拷贝到第N个对象的对象;

(5)浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝1给目标对象,修改目标对象会影响被拷贝对象;

(6)深拷贝,前面加true,完全克隆(拷贝的对象,而不是地址),修改目标对象不会影响被拷贝对象。

(二)jQuery多库共存

1、问题概述:

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

2、客户需求:

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

3、jQuery解决方案:

(1)把里面的$符号统一改为jQuery,比如jQuery("div");

(2)jQuery变量规定新的名称:$.noConflict()  var xx = $.noConflict();

(三)jQuery插件

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

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

1、jQuery插件常用的网站:

(1)jQuery插件库:http://www.jq22.com/

(2)jQuery之家:http://www.htmleaf.com/

2、jQuery插件使用步骤:

(1)引入相关文件(jQuery文件和插件文件)

(2)复制相关html、css、js(调用插件)。

3、jQuery插件演示:

(1)瀑布流

(2)图片懒加载(图片使用延迟加载可提高网页下载速度,它也能帮忙减轻服务器负载)

●当我们页面滑动到可视区域,再显示图片;

●我们使用jquery插件库 EasyLazyload。注意,此时的js引入文件和js调用必须写到DOM元素(图片)最后面。

(3)全屏滚动(fullpage.js)

gitHub: https//github.com/alvarotrigo/fullPage.js

中文翻译网站:http://www.dowebok.com/demo/2014/77/

 

posted @   燕归楼  阅读(37)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示