`
BUYAOZAIBEIDAOLE
  • 浏览: 29092 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

经常被忽略jquery方法(1)

阅读更多
一.bind 方法
返回值:jQuerybind(type,[data],fn)
概述
为每个匹配元素的特定事件绑定事件处理函数。

参数
type,[data],function(eventObject)String,Object,FunctionV1.0type: 含有一个或多个事件类型的字符串,由空格分隔多个事件。比如"click"或"submit",还可以是自定义事件名。

data:作为event.data属性值传递给事件对象的额外数据对象

fn:绑定到每个匹配元素的事件上面的处理函数

type,[data],false String,Object,boolV1.4.3type:含有一个或多个事件类型的字符串,由空格分隔多个事件。比如"click"或"submit",还可以是自定义事件名。

data:作为event.data属性值传递给事件对象的额外数据对象

false: 将第三个参数设置为false会使默认的动作失效。

eventsStringV1.4一个或多个事件类型的字符串和函数的数据映射来执行他们。

示例
描述:
当每个段落被点击的时候,弹出其文本。

jQuery 代码:
$("p").bind("click", function(){
  alert( $(this).text() );
});描述:
同时绑定多个事件类型

jQuery 代码:
$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});描述:
同时绑定多个事件类型/处理程序

jQuery 代码:
$("button").bind({
  click:function(){$("p").slideToggle();},
  mouseover:function(){$("body").css("background-color","red");}, 
  mouseout:function(){$("body").css("background-color","#FFFFFF");} 
});描述:
你可以在事件处理之前传递一些附加的数据。

jQuery 代码:
function handler(event) {
  alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)描述:
通过返回false来取消默认的行为并阻止事件起泡。

jQuery 代码:
$("form").bind("submit", function() { return false; })描述:
通过使用 preventDefault() 方法只取消默认的行为。

jQuery 代码:
$("form").bind("submit", function(event){
  event.preventDefault();
});描述:
通过使用 stopPropagation() 方法只阻止一个事件起泡。

jQuery 代码:
$("form").bind("submit", function(event){
  event.stopPropagation();
});

作者在项目中应用:个人觉得用bind比click方法要好,我们经常会遇到因为某些操作要隐藏HTML元素,如果只是隐藏却没有去除元素绑定的事件,可能会不小心触发隐藏元素里面的事件,就好比你要隐藏一个form,隐藏后form中的input事件有一定可能会被触发。所以建议在显示元素的时候bind元素事件,不显示的时候先用unbind移除元素事件,在隐藏,这样可以减少BUG出现。


二.unbind 方法
返回值:jQuery,unbind(type,[data|fn]])
概述
bind()的反向操作,从每一个匹配的元素中删除绑定的事件。


参数
type,[fn]String,FunctionV1.0type:删除元素的一个或多个事件,由空格分隔多个事件值。

fn:要从每个匹配元素的事件中反绑定的事件处理函数

type,falseString,boolV1.4.3type:删除元素的一个或多个事件,由空格分隔多个事件值

false:设置为false会使默认的动作失效。

eventObjStringV1.0事件对象。这个 eventObj 参数来自事件绑定函数

示例
描述:
把所有段落的所有事件取消绑定

jQuery 代码:
$("p").unbind()描述:
将段落的click事件取消绑定

jQuery 代码:
$("p").unbind( "click" )描述:
删除特定函数的绑定,将函数作为第二个参数传入

jQuery 代码:
var foo = function () {
  // 处理某个事件的代码
};

$("p").bind("click", foo); // ... 当点击段落的时候会触发 foo

$("p").unbind("click", foo); // ... 再也不会被触发 foo速查表页顶↑

分享到:
评论

相关推荐

    jquery插件使用方法大全

    许多较少使用的方法被合并,减少了需要掌握和解释的方法数量。 jQuery 1.1.3(2007年7月):这次小版本变化包含了对jQuery选择符引擎执行速度的显著提升。从这个版本开始,jQuery的性能达到了Prototype、Mootools...

    jQuery-min-2.0 官方压缩版.rar

    如 果你想要同时兼容新旧版浏览器,你可以使用条件注释,让2.0在新浏览器上使用,而旧版本使用1.9,但是更简单的方法则是沿用 jQuery1.x版本。至少目前2.0的主要用例,对IE的支持是不再考虑范围内了,而是Chrome或者...

    jQuery-DropKick插件

    使用jQuery-DropKick插件美化select下拉框 DropKick 是一个下拉框美化插件,使用非常简单,...DropKick 暂时不支持 optgroup,会被忽略。如果你不需要考虑 IE6 和不需要使用 optgroup,那 DropKick 是一个很好的选择。

    JQuery相册源码201274

    所有的其他文件都是演示文件,可以忽略。 示例: <li><img src="images/galleryswstonehenge01_tn.jpg" /> <li><img src="images/galleryswstonehenge02_tn.jpg" /> <li><img src="images/galleryswstonehenge...

    jquery-1.1.3 效率提高800%

    We’ve supported selectors like :nth-child(1) and :nth-child(odd) since the beginning of jQuery, now we’ve added advanced :nth-child selectors, such as: <br>$("div:nth-child(2n)") $("div:nth-...

    jQuery 2.1.1 官方正式版

    如 果你想要同时兼容新旧版浏览器,你可以使用条件注释,让2.0在新浏览器上使用,而旧版本使用1.9,但是更简单的方法则是沿用 jQuery1.x版本。至少目前2.0的主要用例,对IE的支持是不再考虑范围内了,而是Chrome或者...

    jQuery实现contains方法不区分大小写的方法

    本文实例讲述了jQuery实现contains方法不区分大小写的方法。分享给大家供大家参考。具体实现方法如下: // NEW selector jQuery.expr[':'].Contains = function(a, i, m){ return jQuery(a).text().toUpperCase() ...

    jquery数组封装使用方法分享(jquery数组遍历)

    如果需要退出 each 循环可使回调函数返回 false, 其它返回值将被忽略. each遍历,相信都不陌生,在平常的事件处理中,是for循环的变体,但比for循环强大.在数组中,它可以轻松的攻取数组索引及对应的值.例: 使用...

    eslint-config-jquery:jQuery的eslint配置,强制执行jQuery样式指南

    jQuery eslint配置 用法 npm install --save-dev eslint-config-jquery 使用以下内容,使用.eslintrc文件配置ESLint: { " extends " : " jquery " } 地位 此配置遵循jQuery的精神,不会违反它并对其进行扩展。 ...

    jQuery.mouseDelay jQuery 延时器,防错误触发

    内容索引:脚本资源,jQuery,jQuery,mouseDelay,延时器 jQuery 延时器:jQuery.mouseDelay v1.2  作用:延时操作目的是为了防止用户误触发事件,一般情况下鼠标指针小于150毫秒的停留时间都可以被忽略。  演示:...

    jQuery.each使用详解

    如果需要退出 each 循环可使回调函数返回 false,其它返回值将被忽略。 例遍数组,同时使用元素索引和内容。举例如下: //例遍对象,同时使用成员名称和变量内容。 $.each( [0,1,2], function(i, n

    Jquery中ajax提交表单几种方法(get、post两种方法)

    在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的方法。$get方式提交表单get() 方法通过远程HTTP ,下面我...

    jQuery中on()方法用法实例

    本文实例讲述了jQuery中on()方法用法。分享给大家供大家参考。具体分析如下: 此方法可以在匹配元素上绑定一个或者多个事件处理函数。 使用off()方法可以删除on()方法绑定的事件。 语法结构一: 代码如下:$(selector...

    jQuery的系统性能指标和调优方法

    我可能像大多数人一样,仅看到用jQuery编写客户端代码的简易,而忽略了可能的性能问题。在我看来,在易用性和性能之间进行折衷是值得的。但是,存在这样一种折衷吗?jQuery是不是比“一般”的JavaScript慢?

    基于jquery的轻量级jquery数字加减输入框

    1.本插件基于jquery基础封装的轻量级插件,使用时只需导入num-alignment.js即可; 2.插件设置默认值:{"step" : 0.1, "min" : 0, "max" : 99, "digit" : 1}; 3.可以自定义设置类型 ——》 通过设置 num-alignment....

    jquery中event对象属性与方法小结

    JQuery读书笔记–Event属性说明 JQuery事件中的Event属性是经常性的被忽略的。大多数时间你的确不怎么用它,但有些时候它还是它还是有作用的。如获知触发时用户的环境(是否按了shift etc)。每个浏览器对event都有...

    jquery-safeform:防止多表单提交的jQuery插件

    jquery-safeform 防止多个表单提交的 jQuery ... 函数上下文将被设置为表单元素,如 jQuery.submit(...) 方法。 方法 $().safeform(选项) 将安全格式插件附加到元素集合。 $ ( '#example' ) . safeform ( { time

    基于jQuery的zTree v3系列树插件设计源码

    此外,还包括12个GIF动画文件,7个CSS样式文件,4个PHP源代码文件,2个LESS样式文件,以及1个Git忽略文件。这些文件详细展示了如何使用HTML、JavaScript、CSS、PHP和TypeScript构建一个zTree v3系列树插件,非常适合...

    基于jquery的轻量级jquery数字加减输入框 支持ie8

    1.本插件基于jquery基础封装的轻量级插件,使用时只需导入num-alignment.js即可; 2.插件设置默认值:{"step" : 0.1, "min" : 0, "max" : 99, "digit" : 1}; 3.可以自定义设置类型 ——》 通过设置 num-alignment....

    jQuery 图片浏览放大插件 ZoomImage V1.0.rar

    [removed][removed][removed][removed][removed][removed]调用代码 你所需要做的所有事就是使用jQuery的方式选择一个元素并且调用插件。 $('a.myLinks').zoomimage(options); 可选项 一个哈希参数。所有的参数都是可...

Global site tag (gtag.js) - Google Analytics