一、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/

 

原文地址:http://www.cnblogs.com/hunanxyz/p/16797035.html

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长! 2. 分享目的仅供大家学习和交流,请务用于商业用途! 3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入! 4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解! 5. 如有链接无法下载、失效或广告,请联系管理员处理! 6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需! 7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员! 8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载 声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性