刚学习了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. Qt入门（20）——Qt模块简介

    当你安装Qt时,这些模块会被构建到库中.在Qt企业版.Qt评估版和Qt自由版中,包含所有的模块.对于Qt专业版,提供基本的模块--工具.核心.窗口部件.对话框.图标视图和工作区模块.画布模块画布模块提 ...

  2. （转载）Linux定时任务cron配置

    (转载)http://blog.csdn.net/jbgtwang/article/details/7995801 实现linux定时任务有:cron.anacron.at等,这里主要介绍cron服务 ...

  3. 数学(GCD,计数原理)HDU 5656 CA Loves GCD

    CA Loves GCD Accepts: 135 Submissions: 586 Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 2621 ...

  4. HDU 5875 Function 【倍增】 (2016 ACM/ICPC Asia Regional Dalian Online)

    Function Time Limit: 7000/3500 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)Total ...

  5. 洛谷2583 地铁间谍 (UVa1025A Spy in the Metro)

    洛谷2583 地铁间谍(UVa1025A Spy in the Metro) 本题地址:http://www.luogu.org/problem/show?pid=2583 题目描述 特工玛利亚被送到 ...

  6. Java多线程Thread.yield()，thread.join()， Thread.sleep(200），Object.wait(),Object.notify(),Object.notifyAll()的区别

    Thread.yield(),在某个线程里调用Thread.yield(),会使这个线程由正在运行的running状态转变为等待cpu时间片的runable状态.join()是Thread类的一个非s ...

  7. enigma机的原理

    注:本文修改自三思科学<ENIGMA的兴亡>            ENIGMA ENIGMA看起来是一个装满了复杂而精致的元件的盒子.不过要是我们把它打开来,就可以看到它可以被分解成相当 ...

  8. MVC 文件上传

    项目需要,做一个图片上传的功能,本来是很简单,但是需要同时上传多个文件,并分条带一些额外的信息,听上去很复杂,通过下面图就可以一目了然: 网上找过一些方法,但多为不支持图片与其他信息关联,或者分两次上 ...

  9. 【wpf基础】wpf MediaElement全屏播放视频功能

    最近在研究如何将视频全屏播放,一开始思路A:弹窗将MediaElement对象add到一个新的全屏窗体,报错 指定的元素已经是另一个元素的逻辑子元素.请先将其断开连接. 后续转换思路B:将本窗体其他控 ...

  10. POJ1184-------操作分离的BFS

    题目地址:http://poj.org/problem?id=1184 题目意思: 给你两个6位数,一个是起始值,一个最终值 初始光标在最左边 你可以左移或者右移光变 在光标处+1或者-1 在光标处和 ...