jQuery 事件绑定
在文档装载完成后,如果打算为元素绑定事件来完成某些操作,则可以使用 bind() 方法来对匹配元素进行特定事件的绑定,bind() 方法的调用格式为:bind( type [, data] , fn );
bind() 方法有3个参数,说明如下。
第 1 个参数是事件类型,类型包括: blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、 mouseenter、mouseleave、change 、select、submit、keydown、keypress、keyup 和 error 等,当然也可以是自定义名称。
第2个参数为可选参数,作为 event.data 属性值传递给事件对象的额外数据对象。
第3个参数则是用来绑定的处理函数。
注意:可以发现,jQuery 中的事件绑定类型比普通的 JavaScript 事件绑定类型少了“on”。例如鼠标单击事件在 jQuery 中对应的是 click() 方法,而在 JavaScript 中对应的是 onclick()。
1. 基本效果
下面通过一个示例来了解 bind() 方法的用法。
假设网页中有一个 FAQ,单击“标题”链接将显示内容。
HTML 代码如下:
<div id="panel"> ,
<h5 class="head">什么是 jQuery</h5>
<div class="content">
jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由John Resig创建于2006年1月的开源项目。
jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了 JavaScript 开发人员遍历HTML文档、操作D0M、处理事件、执行动画和开发Ajax。
它独特而又优雅的代码风格改变了 JavaScript 程序员的设计思路和编写程序的方式。
</div>
</div>
我们可以轻易的写下如下代码:
$(function(){
$("#panel h5 .head").bind("click",function(){
$(this).next().show(); // $(this).next(); 获取”内容”元素
})
})
在上面的例子中,为"标题"绑定了一个click事件,单击标题链接后,显示“内容”。与 ready() 方法一样,bind() 方法也可以多次调用。上面 jQuery 代码中有一个关键字 this,与在 JavaScript 中的作用一样,this 引用的是携带相应行为的DOM元素。为了使该 DOM元素能够使用 jQuery 中的方法,可以使用 $(this) 将其转换为 jQuery 对象。
2.加强效果
在上面的例子中,单击“标题”显示出“内容”;再次单击“标题”,“内容”并没有任何反应。 现在需要加强效果:第2次单击“标题”,“内容”隐藏;再次单击“标题”,“内容”又显示,两个动作循环出现。
为了判断元素是否显示,可以使用jQuery中的 is() 方法来完成。jQuery代码如下:
$(function(){
$("#panel h5.head").bind("click",function(){
var $content = $(this).next();
if($content.is(":visible")){
$content.hide(); // 等同于 $(this).next().hide();
}else{
$content.show(); // 等同于 $(this).next().show();
}
})
})
注意:当发现相同的选择器在你的代码里出现多次时,请用变量把它缓存起来。在上面代码中,发现 $(this).next() 被多次使用,因此可以为它定义一个局部变量: var $content = $(this).next(); 然后把局部变量引入到代码中。
通过以上的修改,可以实现加强效果。当反复地单击“标题”链接时,“内容”会在隐藏和显示两种状态下切换。
3.改变绑定事件的类型
上面的例子中,给元素绑定的事件类型是click,当用户单击的时候会触发绑定的事件,然后执行事件的函数代码。现在把事件类型换成mouseover和mouseout,即当光标滑过的时候,就触发事件。需要进行以下几步操作。
写出如下jQuery代码:
$(function(){
$("#panel h5.head").bind("mouseover",function(){
$(this).next().show();
}).bind("mouseout",function(){
$(this).next().hide();
})
})
代码运行后,当光标滑过“标题”链接后,相应的“内容”将被显示。
在上面几个例子中,分别用bind() 方法给“标题”绑定了 click 事件、mouseover 事件和 mouseout 事件,绑定方法都一样。除此之外,bind() 方法还能绑定其他所有的 JavaScript 事件。
4.简写绑定事件
像 click、mouseover 和 mouseout 这类事件,在程序中经常会使用到,jQuery为此也提供了一 套简写的方法。简写方法和 bind() 方法的使用类似,实现的效果也相同,惟一的区别是能够减少代码量。
例如把上面的例子改写成使用简写绑定事件的方式,代码如下:
$(function(){
$("#panel h5.head").mouseover(function(){
$(this).next().show();
}).mouseout(function(){
$(this).next().hide();
})
})
jQuery 事件绑定的更多相关文章
- 深入学习jQuery事件绑定
× 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...
- jQuery事件绑定、解绑、命名空间
jQuery事件绑定.解绑.命名空间 <%@ page language="java" import="java.util.*" pageEncoding ...
- jQuery 事件绑定 和 JavaScript 原生事件绑定
总结一下:jQuery 事件绑定 和 JavaScript 原生事件绑定 及 区别 jQuery 事件绑定 jQuery 中提供了四种事件监听绑定方式,分别是 bind.live.delegate.o ...
- JQuery事件绑定,bind与on区别
jquery事件绑定bind:向匹配元素添加一个或多个事件处理器 $(selector).bind("click",data,function); live:向当前或未来的匹配元素 ...
- jQuery事件绑定和委托实例
本文实例讲述了jQuery事件绑定和委托.分享给大家供大家参考.具体方法如下: jQuery事件的绑定和委托可以用多种方法实现,on() . bind() . live() . delegate ...
- jQuery事件绑定.on()简要概述及应用
原文地址:http://www.jquerycn.cn/a_5346 前几天看到事件委托的时候,关于live()方法讲的不是很详细,就去搜了一下关于live()和delegate()的,最后看 ...
- jQuery事件绑定on()、bind()与delegate() 方法详解
jquery中有四种事件绑定函数,bind(),live(),on(),delegate(),由于live现在并不常用,因此不做过多解释. 1. bind()用法 $("div p" ...
- 关于jQuery事件绑定
转自:http://www.cnblogs.com/gaojun/p/3497582.html html: <a href="#" onclick="addBtn( ...
- jQuery事件绑定和委托
可以用多种方法实现,on() . bind() . live() . delegate() ,还有one(). 有时我们可能会像下面这样绑定一个事件: $("#div1"). ...
- jQuery事件绑定的最佳实践
如果你经常使用jQuery,那么你也许很熟悉事件绑定.这是很基本的东西,但是深入一点,你就能够找到机会让你事件驱动的代码变得不太零碎,并且更容易管理. 更好的选择器策略 让我们从基础的例子开始.下面的 ...
随机推荐
- dogse入门指南
dogse入门指南 Dogse作为游戏服务端引擎,目前只包含游戏服务端的核心部分,但这也是最核心的部分.它全部使用.net c#开发,充分兼顾了程序性能与代码编写的准确性与易用性,再加上以vs作为开发 ...
- vb.net連接SQL数据库
'導入命名空間Imports System.Data.SqlClient '定義變量 Dim Sql As String 'SQL字串 Dim Sqlado As SqlConnection '连接数 ...
- Maven(十四)Maven 继承
以Junit为例 由于junit的依赖的范围为test,所以在每一个项目中都必须配置一个junit. 为了统一管理方便,可以单独创建一个项目用来进行**统一管理**junit的版本 即在子项目中不设置 ...
- Java设计模式-单例模式详解(上)
单例模式整理 敲了多年代码后,回头来看会别有一番滋味在心头.. 概念 单例模式是为了保证在一个jvm环境下,一个类仅有一个对象. 代码中常见的懒汉式.饿汉式,这些实现方式可以通过代码的设计来强制保证的 ...
- pthread_exit在main线程中的用处
在main线程中调用pthread_exit会起到只让main线程退出,但是保留进程资源,供其他由main创建的线程使用,直至所有线程都结束,但在其他线程中不会有这种效果 https://stacko ...
- python告诉你ti8 dota2英雄bp
文章链接:https://mp.weixin.qq.com/s/phJzZEQojndY-iNe77RF_w 恭喜OG成为ti8冠军,很可惜这次偶数年ti8中国队LGD与冠军失之交臂. 上学那会儿还是 ...
- 商家APP店内点餐开启有桌台点餐模式
商家APP店内点餐开启有桌台点餐模式 步骤一:管理员后台-配置管理--店铺配置--简易付tab页--是否支持扫码下单-是 步骤二:管理员后台-配置管理--设备管理--选择对应的机器--配置--云POS ...
- bug管理工具之禅道的测试模块的使用
https://www.cnblogs.com/evablogs/p/6785017.html 角色:产品经理PO,项目经理PM,开发,测试 测试任务: bug: 1.维护bug视图模块:[测试]-[ ...
- Linux IO 模型
Linux 中主要有五种IO模式:阻塞IO, 非阻塞IO, IO 多路复用,信号驱动IO和异步IO; 如果从同步非同步,阻塞非阻塞角度来看,又可以分为:同步阻塞IO, 同步非阻塞IO,异步阻塞IO和异 ...
- Eclipse出错不断,注册表不能乱改
Eclipse打不开,始终报错,还能不能开心的敲代码了??? 首先说下造成我这个愚蠢错误的起源:电脑是win10系统,本来是可以正常使用的.某一天,我正在使用python,打开命令提示符,看见开头是中 ...