jQuery中事件的学习
刚学习了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中事件的学习的更多相关文章
- JQuery中事件冒泡
JQuery中事件冒泡 定义 在一个对象上触发某类事件,就会执行此事件程序,如果没有处理事件就会向这个对象的父级对象传播 直至它被处理,最顶层老大为document对象. 作用 事件冒泡允许多个操作被 ...
- !!!jQuery中事件绑定 推荐使用.delegate()或者live()
jQuery中的.bind()..live()和.delegate()之间区别分析 参考:http://www.jb51.net/article/27309.htm DOM树 首先,可视化一个HM ...
- jQuery 自定义事件的学习笔记
jquery中提供了两种方法可以绑定自定义事件: bind()和one()而绑定的自定义事件的触发,必须得用jquery中的trigger()方法才能触发. 我们先来看on事件 代码如下 复制代码 ...
- jquery 中事件
jQuery 事件 - submit() 方法 定义和用法 当提交表单时,会发生 submit 事件. 该事件只适用于表单元素. submit() 方法触发 submit 事件,或规定当发生 subm ...
- jQuery中事件绑定
一.前言 最近在做项目中要用到jQuery来绑定事件,首先想到的是$(selector).事件名();这样绑定事件的方式,这种方式对事件进行绑定其实也就是bind()方法,但当选择器匹配的元素过多,$ ...
- jQuery中事件模块介绍
事件模块 1.提供其他DOM方法 包括:next 和 nextAll方法 1.1 next方法实现 目标:扩展框架方法,获取当前元素的下一个元素 问题:如何获取下一个元素? 1.1.1 提供 next ...
- jQuery中事件与动画
jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.windo ...
- jQuery中事件绑定到bind、live、delegate、on方法的探究
1. 给页面上的某个元素绑定事件,最初采用下面的方式实现: $(‘selector’).click(function(){ //code }); 缺点: 不能同时绑定多个事件,不能绑定动态的元素. 后 ...
- 恶补jquery(四)jquery中事件--冒泡
事件 当我们在打开一个页面的时候.浏览器会对页面进行解释运行,这实际上是通过运行事件来驱动的.在页面载入事件时,运行Load()事件,是这个事件实现浏览器解释运行代码的过程. 事件机制 事件中的冒泡现 ...
随机推荐
- 【Gzip】
为你的网站开启 gzip 压缩功能(nodejs.nginx) Do not forget to use Gzip for Express.js 网页GZIP压缩检测
- 使用yum快速升级CentOS 6.5内核到 3.10.28
网上有不少升级CentOS内核的文章,如<CentOS 6.5 升级内核到 3.10.28>,大部分都是下载源码编译,有点麻烦. 在yum的ELRepo源中,有mainline(3.13. ...
- FusionCharts(v3.6.0)使用（1）
前段时间做一个统计系统,需要画各种图表,于是找到了FusionCharts这个插件,功能甚是强大.在这个闲暇的春日午后,将这个插件的快速使用的方法写下来,方便懒得去官网看英文的朋友参考 安装 Fusi ...
- 【模拟赛】BYVoid魔兽世界模拟赛 解题报告
题目名称(点击进入相关题解) 血色先锋军 灵魂分流药剂 地铁重组 埃雷萨拉斯寻宝 源文件名(.c/.cpp/.pas) scarlet soultap subway eldrethalas 输入文件名 ...
- lightoj 1198 最大权重匹配
题目链接:http://lightoj.com/volume_showproblem.php?problem=1198 #include <cstdio> #include <cst ...
- Dolls - 4160（简单二分图匹配）
题意:有一些箱子,大箱子可以套小箱子,但是必须h>h,w>w,l>l,求出来最外面能剩下几个箱子无法被嵌套. 分析:思考每个箱子都只会被别的箱子套一次,所以构成一二分匹配模型,只 ...
- idea mac 快键键
alt + 花 + 左右 上一步下一步 shift + 花 + F 全文检索 花 + O 类查找 alt + 花 ...
- Android ViewPager FragmentPagerAdapter
ViewPager 里面放Fragment <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/and ...
- 开始我的 JNI 入门吧
JNI (java native interface) java本地开发接口(一句话 : 就是1个 adapter). JNI 是一个协议 - 是用来让 java代码和C,C++ 代码 ...
- Java串口通信具体解释
序言 说到开源,恐怕非常少有人不挑大指称赞.学生通过开源码学到了知识,程序猿通过开源类库获得了别人的成功经验及可以按时完毕手头的project,商家通过开源软件赚到了钱……,总之是皆大欢喜.然而开源软 ...