刚学习了jQuery中的事件,主要通过bind(),toggle(),hover()来主要实现,下面先说一说关于bind的想关要点。

1、bind方法。

bind方法的主要参数为bind(type,fn).自我感觉参数的传入形式有点像java的反射机制(自我感觉,不知道是否严谨)。

当然相关实现比较麻烦自我感觉。示例:

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>bind</title>
<meta name="author" content="Administrator" />
<script src="script/jquery-1.12.2.js"></script>
<style type="text/css">
.content {
display: none;
}
</style>
<!-- Date: 2016-03-25 -->
</head>
<body>
<div id="panel">
<h2 class="head">什么是jQuery?</h2>
<div class="content">
JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ,它兼容CSS3,
还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及
后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)
、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,
它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。
jQuery能够使用户的html页面保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,
只需要定义id即可。
</div>
</div>
<script type="text/javascript">
$(function() {
$("#panel h2.head").bind("mouseover",function() {
$(this).next().show();
}).bind("mouseout", function() {
$(this).next().hide();
});
});
</script>
</body>
</html>

这个例子主要是鼠标悬停和离开后不同的效果。

2、toggle方法

toggle方法的主要形式为toggle(fn1,fn2,fn3.....fnn);可以这么理解,这个方法是模拟鼠标的点击动作,当鼠标点一下,就会触发fn1函数的相关动作,当鼠标点第二下,就会触发fn2函数的x相关动作以此类推。如果参数列表中只有两个函数,那么当用户点击第三下时,这时还是会重新触发第一个动作(类似于循环来进行)。

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>bind</title>
<meta name="author" content="Administrator" />
<script src="script/jquery-1.12.2.js"></script>
<style type="text/css">
.content {
display: none;
}
</style>
<!-- Date: 2016-03-25 -->
</head>
<body>
<div id="panel">
<h2 class="head">什么是jQuery?</h2>
<div class="content">
JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ,它兼容CSS3,
还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及
后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)
、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,
它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。
jQuery能够使用户的html页面保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,
只需要定义id即可。
</div>
</div>
<script type="text/javascript">
$(function() {
$("#panel h2.head").click(function() {
$(this).toggle(function() {
$(this).next().show();
});
});
});
</script>
</body>
</html>

3、hover方法

hover方法的形式为hover(enter,leave);可以理解为当鼠标悬停时运行enter所在的函数,当鼠标离开时运行leave所在的函数。代码演示如下:

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>bind</title>
<meta name="author" content="Administrator" />
<script src="script/jquery-1.12.2.js"></script>
<style type="text/css">
.content {
display: none;
}
</style>
<!-- Date: 2016-03-25 -->
</head>
<body>
<div id="panel">
<h2 class="head">什么是jQuery?</h2>
<div class="content">
JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ,它兼容CSS3,
还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及
后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)
、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,
它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。
jQuery能够使用户的html页面保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,
只需要定义id即可。
</div>
</div>
<script type="text/javascript">
$(function() {
$("#panel h2.head").hover(function() {
$(this).next().show();
}, function() {
$(this).next().hide();
});
});
</script>
</body>
</html>

jQuery中事件的学习的更多相关文章

  1. JQuery中事件冒泡

    JQuery中事件冒泡 定义 在一个对象上触发某类事件,就会执行此事件程序,如果没有处理事件就会向这个对象的父级对象传播 直至它被处理,最顶层老大为document对象. 作用 事件冒泡允许多个操作被 ...

  2. !!!jQuery中事件绑定 推荐使用.delegate()或者live()

    jQuery中的.bind()..live()和.delegate()之间区别分析 参考:http://www.jb51.net/article/27309.htm DOM树   首先,可视化一个HM ...

  3. jQuery 自定义事件的学习笔记

    jquery中提供了两种方法可以绑定自定义事件: bind()和one()而绑定的自定义事件的触发,必须得用jquery中的trigger()方法才能触发. 我们先来看on事件  代码如下 复制代码 ...

  4. jquery 中事件

    jQuery 事件 - submit() 方法 定义和用法 当提交表单时,会发生 submit 事件. 该事件只适用于表单元素. submit() 方法触发 submit 事件,或规定当发生 subm ...

  5. jQuery中事件绑定

    一.前言 最近在做项目中要用到jQuery来绑定事件,首先想到的是$(selector).事件名();这样绑定事件的方式,这种方式对事件进行绑定其实也就是bind()方法,但当选择器匹配的元素过多,$ ...

  6. jQuery中事件模块介绍

    事件模块 1.提供其他DOM方法 包括:next 和 nextAll方法 1.1 next方法实现 目标:扩展框架方法,获取当前元素的下一个元素 问题:如何获取下一个元素? 1.1.1 提供 next ...

  7. jQuery中事件与动画

    jQuery中的事件与动画   一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.windo ...

  8. jQuery中事件绑定到bind、live、delegate、on方法的探究

    1. 给页面上的某个元素绑定事件,最初采用下面的方式实现: $(‘selector’).click(function(){ //code }); 缺点: 不能同时绑定多个事件,不能绑定动态的元素. 后 ...

  9. 恶补jquery(四)jquery中事件--冒泡

    事件 当我们在打开一个页面的时候.浏览器会对页面进行解释运行,这实际上是通过运行事件来驱动的.在页面载入事件时,运行Load()事件,是这个事件实现浏览器解释运行代码的过程. 事件机制 事件中的冒泡现 ...

随机推荐

  1. redis数据过期策略【转】

    key的过期时间通常,Redis key被创建时不会自动关联过期时间,key将长久存在,除非通过DEL等命令显示的删除.EXPIRE命令簇可以为指定的key关联一个过期时间,代价是一点额外的内存开销. ...

  2. 【转】文件读写NDK(或Linux)

    原文网址:http://www.ithao123.cn/content-10709539.html 使用NDK进行文件读写,有利于保存数据的安全性,项目需要,要文件读写从Java中处理搬到Linux平 ...

  3. 字符串(后缀数组||SAM):NOI2015 品酒大会

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAByIAAALuCAIAAABtq0bwAAAgAElEQVR4nOy9f2wb150vev4boESeln ...

  4. 数据结构(二维线段树,差分): NOI2012 魔幻棋盘

    貌似想复杂了…… #include <iostream> #include <cstring> #include <cstdio> #define mid ((l+ ...

  5. HDOJ(HDU) 2137 circumgyrate the string(此题用Java-AC不过!坑)

    此题如果有用JavaACDSee,请评论,谢谢了. Problem Description Give you a string, just circumgyrate. The number N mea ...

  6. QQ空间自动发广告解决方法

    最近空间好多人QQ都中了毒.每天我都有几十个好友刷空间话费.流量广告! QQ空间自动发广告的原因: 最近使用了刷赞或者其他QQ外挂软件(有些开发者或破解者会在这样的软件上留后门,请自己判断). 或者最 ...

  7. 关于STM32 定时器 PWM 实时调节占空比时,预装载特性

    最近在调试项目的时候遇到一个奇怪的现象:在调试状态下,给定时器捕获比较寄存器赋不同值,能产生不同占空比的波形(图1).反映到器件上也有不同的电压显示,但是在设备运行的时候,就不行了(图2). 图1 图 ...

  8. hdu 4619 二分图最大匹配 ——最大独立集

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4619 #include <cstdio> #include <cmath> # ...

  9. PHP学习之[第11讲]新浪微博开放平台 PHP 与 OAuth 接口(1)

    我是下载的微博最新的API练习了一下认证过程.

  10. java随机数与数组的使用。

    java随机数与数组的使用.    一:题目 二 代码:  public class Students {    int number;  // 学号    int State ;   // 年级   ...