jQuery事件绑定用法详解

本文实例讲述了jQuery事件绑定。分享给大家供大家参考,具体如下:

style.css

*{margin:0;padding:0;}
body { font-size: 13px; line-height: 130%; padding: 60px }
#panel { width: 300px; border: 1px solid #0050D0 }
.head { padding: 5px; background: #96E555; cursor: pointer }
.content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block;display:none; }

demo1.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(function(){
  $("#panel h5.head").bind("click",function(){
    $(this).next("div.content").show();
  })
})
</script>
</head>
<body>
<div id="panel">
  <h5 class="head">什么是jQuery?</h5>
  <div class="content">
    jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006年1月的开源项目。
    jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、
    操作DOM、处理事件、执行动画和开发Ajax。
    它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
  </div>
</div>
</body>
</html>

demo2.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(function(){
  $("#panel h5.head").bind("click",function(){
    var $content = $(this).next("div.content");
    if($content.is(":visible")){
      $content.hide();
    }else{
      $content.show();
    }
  })
})
</script>
</head>
<body>
<div id="panel">
  <h5 class="head">什么是jQuery?</h5>
  <div class="content">
    jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006年1月的开源项目。
    jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、
    操作DOM、处理事件、执行动画和开发Ajax。
    它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
  </div>
</div>
</body>
</html>

demo3.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(function(){
  $("#panel h5.head").bind("mouseover",function(){
    $(this).next("div.content").show();
  });
   $("#panel h5.head").bind("mouseout",function(){
     $(this).next("div.content").hide();
  })
})
</script>
</head>
<body>
<div id="panel">
  <h5 class="head">什么是jQuery?</h5>
  <div class="content">
    jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006年1月的开源项目。
    jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、
    操作DOM、处理事件、执行动画和开发Ajax。
    它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
  </div>
</div>
</body>
</html>

demo4.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(function(){
  $("#panel h5.head").mouseover(function(){
    $(this).next("div.content").show();
  });
  $("#panel h5.head").mouseout(function(){
     $(this).next("div.content").hide();
  })
})
</script>
</head>
<body>
<div id="panel">
  <h5 class="head">什么是jQuery?</h5>
  <div class="content">
    jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006年1月的开源项目。
    jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、
    操作DOM、处理事件、执行动画和开发Ajax。
    它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
  </div>
</div>
</body>
</html>

效果图如下:

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

时间: 2016-09-05

jQuery事件绑定方法学习总结(推荐)

对于jQuery中的事件绑定方法,主要有on().bind().delegate().live()等这几个方法.之前都是之前拿过来用,也知道有这么几个方法,但是不清楚这几个事件绑定方法之间的区别.平时用的最多的是on方法,今天打算整理一下. bind方法 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatibl

jQuery绑定事件的四种方式介绍

jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码.下面我们来看下jQuery中绑定事件的方式都有哪些. jQuery中提供了四种事件监听方式,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undelegate.off.在开始看他们之前 一:bind(type,[data],function(eventObject)) bind是使用频率较高的一

jQuery 绑定事件的方式总结

  jQuery 绑定事件 jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码.下面我们来看下jQuery中绑定事件的方式都有哪些. jQuery中提供了四种事件监听方式,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undelegate.off.在开始看他们之前    一:bind(type,[data],function(eventObjec

关于Jquery中的事件绑定总结

前言 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能帮助到朋友,如有不妥之处,希望指出.交流. 一.bind() 简要描述 bind()向匹配元素添加一个或多个事件处理器. 使用方式 $(selector).bind(event,data,function) event:必需项:添加到元素的一个或多个事件,例如 click,dblclick等: 单事

JQuery中DOM事件绑定用法详解

本文实例讲述了JQuery中DOM事件绑定用法.分享给大家供大家参考.具体分析如下: 在文档加载完成后,如果打算为元素绑定事件来完成某些操作,则可以使用bind()方法来对匹配元素进行特定事件的绑定,bind()方法的调用格式为: bind( type [, data] , fn); bind()方法有3个参数,说明如下. 第1个参数是事件类型,类型包括:blur.focus.load.resize.scroll.unload.click.dblclick.mousedown.mouseup.m

浅谈jQuery中的事件

JQuery事件初见 1.JQuery中的事件绑定 其实呢,JQuery中标准的事件绑定是这样写下:(如下) 复制代码 代码如下: $("#btn").bind("click",function(){}): 但是每次这样写,太过麻烦,还怎么做到Write less,Do more? 所以我们习惯的简写成. $("#btn").click(function(){  })  这样就方便了好多 2.合成事件hover(enterfn,leavefn)

深入浅出 jQuery中的事件机制

首先呢,我们先来看一下,jQuery中的ready事件,它的作用有些类似于window中的onload事件,只不过二者的区别在于,onload事件是要等到网页中的dom节点加载完成,并且css进行样式渲染后,JavaScript中进行了预加载后再执行,而ready事件呢,是在网页中的标签被解析为DOM节点是就执行其中的函数,直白点说,ready执行的比onload早,那么我们在用jQuery的时候,需要做一个ready的执行定义: //ready的作用,是为具体加载的实现. $(document

jquery中取消和绑定hover事件的实现代码

在网页设计中,我们经常使用jquery去响应鼠标的hover事件,和mouseover和mouseout事件有相同的效果,但是这其中其中如何使用bind去绑定hover方法呢?如何用unbind取消绑定的事件呢? 一.如何绑定hover事件 先看以下代码,假设我们给a标签绑定一个click和hover事件: $(document).ready(function(){ $('a').bind({ hover: function(e) { // Hover event handler alert("

jQuery实现的事件绑定功能基本示例

本文实例讲述了jQuery实现的事件绑定功能.分享给大家供大家参考,具体如下: HTML正文: 用户名:<input type="text" value="邮箱/用户名/手机号" id="login"/><br> 密 码:<input type="password" id="passwd"><br> <input type="button&qu

浅谈jQuery 中的事件冒泡和阻止默认行为

1.事件冒泡 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+reque

浅谈jQuery中Ajax事件beforesend及各参数含义

Ajax会触发很多事件. 有两种事件,一种是局部事件,一种是全局事件: 局部事件:通过$.ajax来调用并且分配. $.ajax({ beforeSend: function(){ // Handle the beforeSend event }, complete: function(){ // Handle the complete event } // ... }); 全局事件,可以用bind来绑定,用unbind来取消绑定.这个跟click/mousedown/keyup等事件类似.但他

JQuery中Bind()事件用法分析

本文实例分析了JQuery中Bind()事件用法.分享给大家供大家参考.具体分析如下: 我们先看一下它的定义: .bind( eventType [, eventData], handler(eventObject)) .Bind()方法的主要功能是在向它绑定的对象上面提供一些事件方法的行为.期中它的三个参数的意义分别如下: eventType是一个字符串类型的事件类型,就是你所需要绑定的事件.这类类型可以包括如下:blur, focus, focusin, focusout, load, re

JQuery中DOM事件冒泡实例分析

本文实例分析了JQuery中DOM事件冒泡.分享给大家供大家参考.具体分析如下: 什么是冒泡 在页面上可以有多个事件,也可以多个元素响应同一个事件.假设网页上有两个元素,其中一个元素嵌套在另一个元素里,并且都被绑定了click事件,同时body元素上也绑定了click事件. <div id="content"> 外层div元素 <span>内层span元素</span> 外层div元素 </div> <script type=&qu