jQuery中事件的学习

时间：2022-10-16 15:32:28

刚学习了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. &excl;&excl;&excl;jQuery中事件绑定 推荐使用&period;delegate&lpar;&rpar;或者live&lpar;&rpar;

    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&lpar;四&rpar;jquery中事件--冒泡

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

随机推荐

  1. REST及RESTful的实现

    什么是REST? REST (REpresentation State Transfer) 描述了一个架构样式的网络系统,比如 web 应用程序.它首次出现在 2000 年 Roy Fielding ...

  2. 关于自己的ES6使用姿势

    ES6今年开始学的,从看文档到实践,以下是自己使用过的一些ES6的东西: 1:for-of 语法: 最喜欢的还是它支持了break/continue的语法,而且还修改了for-in的缺陷,简要写法: ...

  3. mongodb集群【】

    参考 http://www.jianshu.com/p/2825a66d6aed http://www.cnblogs.com/huangxincheng/archive/2012/03/07/238 ...

  4. python修炼第四天

    今天换了师傅.江湖人称景女神^o^. 女师傅讲的比较细,原理的比较多.初学者来说有些难.但是基本功是必须要打牢的.努力! 迭代器 迭代器,迭代的工具1 什么是迭代,指的是一个重复的过程,每一次重复称为 ...

  5. 51nod1222 最小公倍数计数

    题目来源: Project Euler 基准时间限制:6 秒 空间限制:131072 KB 分值: 640  定义F(n)表示最小公倍数为n的二元组的数量. 即:如果存在两个数(二元组)X,Y(X & ...

  6. ModuleNotFoundError&colon; No module named &&num;39&semi;&lowbar;tkinter&&num;39&semi;

    https://blog.csdn.net/blueheart20/article/details/78763208 apt search python3-tk apt install python3 ...

  7. oracle 与sql serve 获取随机行数的数据

    Oracle 随机获取N条数据    当我们获取数据时,可能会有这样的需求,即每次从表中获取数据时,是随机获取一定的记录,而不是每次都获取一样的数据,这时我们可以采取Oracle内部一些函数,来达到这 ...

  8. vmware esxi6&period;5安装使用教程（图文安装）

    准备工作: 下载ESXI5.5镜像和client客户端. 将ISO写入到U盘或是刻录光盘然后启动安装. 一.开始安装 欢迎界面 协议界面 安装在本地 键盘的键入方式 设置登录密码 开始安装 重启 安装 ...

  9. apicloud代码压缩和全局加密

    首先说代码压缩,因为没什么用,就先说它了.代码压缩后,apicloud里面的css和js文件里面的空格呀回车呀都去掉了,就是文件小了,所有代码显示为一行了.这些代码的变量没有重命名,我们知道jquer ...

  10. android&period;webkit&period;WebView&sol;WebViewClient&sol;WebChromeClient

    使用android.webkit.WebView控件 在xml布局文件中定义 <WebView   android:id="@+id/webkit01"   android: ...

相关文章