`
BUYAOZAIBEIDAOLE
  • 浏览: 29878 次
  • 性别: 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-3.5.1

    1. **选择器**: jQuery 提供了类似 CSS 的选择器,用于快速选取页面上的元素。例如,`$("#myID")` 会选择 ID 为 "myID" 的元素,`$(".myClass")` 会选择所有 class 为 "myClass" 的元素。 2. **DOM 操作**: jQuery ...

    jquery.mark-强大的jQuery关键字文本高亮插件

    3. **参数配置**:`jquery.mark`提供了丰富的选项来定制高亮行为,如忽略大小写、设置忽略的元素等。 ```javascript $("#content").mark("关键字", { separateWordSearch: false, // 是否忽略单词边界 ...

    jqueryScript 特效 jqueryScript js

    2. **性能**: 原生JavaScript在某些情况下可能比jQuery更快,因为jQuery的封装引入了额外的开销,但对于大多数特效来说,这点差异可以忽略不计。 3. **社区支持**: jQuery拥有庞大的社区和丰富的插件库,许多常见的...

    jQuery formalize (jQuery 表单插件)

    1. **自动填充样式**:jQuery Formalize能够为表单元素添加统一的边框、背景和内阴影等视觉效果,使得在不同浏览器下表单元素看起来更加协调统一。 2. **表单元素聚焦和失去焦点的处理**:当用户点击输入框时,插件...

    jquery 封装select实现select自定义样式插件jquery.easydropdown.min.js

    `README.md`文件通常包含了项目的介绍、使用方法和开发者指南,对于理解和使用`jquery.easydropdown.min.js`非常有帮助。而`www.jq22.com.txt`可能是一个链接或引用,指向更多jQuery相关的资源和教程。 总结来说,`...

    jquery VS中提示插件

    由于此文件包含的是注释,浏览器会忽略它,只执行`jquery-1.4.2.js`中的实际JavaScript代码。 通过这种方式,开发人员在编写代码时,可以享受到VS2008提供的jQuery函数和方法的自动完成、参数信息以及代码导航等...

    jquery下利用jsonp跨域访问实现方法

    1. **创建回调函数**:首先,在客户端定义一个全局函数,这个函数会在接收到服务器返回的数据时被调用。例如: ```javascript function handleData(json) { console.log(json.data); } ``` 2. **发起请求**:...

    jquery性能优化高级技巧

    有时候我们在书写jquery的时候,为了书写代码方便,往往忽略了程序执行过程中,给客户端带来的压力。随之而来的就是在某些低端浏览器或者低端电脑上运行速度缓慢,甚至无法运行等问题。 因此我们有必要对我们自己...

    jquery.PrintArea.js-2.4.0-打印功能.rar

    1. **选择打印区域**:PrintArea.js允许开发者通过CSS选择器指定需要打印的元素,如`$("#printableArea")`,这样只会有选中的元素被打印,其余部分将被忽略。 2. **样式保持**:插件能够保留打印区域内的CSS样式,...

    jquery关键词组拆分工具插件

    1. 引入jQuery库:首先,确保网页中已经引入了jQuery库,可以使用CDN链接或者本地的jQuery.js文件。 ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ``` 2. 引入插件:将jQuery...

    jquery validation插件

    通常,我们需要引入jQuery库,接着引入validation插件的js文件,如`jquery.validate.js`,以及可选的本地化文件,如`jquery.validate.min.js`和`additional-methods.js`,用于支持更多验证方法。 **2. 基本用法** ...

    jquery 自动提示autocomplete

    本篇文章将深入探讨jQuery Autocomplete的基本原理、使用方法以及一些常见的应用场景。 ### 1. jQuery Autocomplete 基本原理 jQuery Autocomplete是jQuery UI库的一个组件,它通过监听用户在输入框中的输入事件,...

    JQuery打印插件jquery.PrintArea.js与实例

    在需要打印的元素上添加一个特殊的CSS类,例如"printable-area",然后通过调用jQuery的`.printArea()`方法来配置和触发打印。以下是一个简单的示例: ```javascript $(document).ready(function() { $("#print...

    jquery-validation-1.8.0.zip

    1. `jquery.validate.js`:这是核心验证库,包含了所有的验证规则和方法。开发者通常需要引入这个文件来启动验证功能。 2. `additional-methods.js`:这个文件包含了一些额外的验证方法,如`equalTo`(比较两个字段...

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

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

    jQuery富文本编辑器Notebook

    3. `.gitignore`:这是一个Git版本控制系统文件,指定哪些文件或目录应该被忽略,不在版本控制中进行跟踪。 4. `index.html`:这是项目的主要入口文件,包含了HTML结构,以及引用的JavaScript和CSS资源,用于展示...

    jQuery-DropKick插件

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

    jquery validate中文教程

    默认情况下,`type="submit"`和`type="reset"`的按钮会被忽略。 ```javascript $("#myform").validate({ ignore: ".ignore" }) ``` 5. **rules**:对象,定义表单元素的验证规则。键是表单元素的`name`属性,值...

    jQuery Autocomplete

    **jQuery Autocomplete** 是一个非常流行的JavaScript库,用于在用户输入时提供动态的下拉建议。这个功能在很多网站上都能看到,比如百度搜索框的提示效果,它极大地提升了用户体验,减少了用户输入的负担,提高了...

    jquery.serializeJSON插件

    1. **引入依赖**:首先,你需要在项目中引入jQuery库,然后引入`jquery.serializeJSON.js`插件文件。如果使用的是`jquery.serializeJSON-master`压缩包,这个文件通常位于根目录下。 2. **安装插件**:将插件文件...

Global site tag (gtag.js) - Google Analytics