我们知道JavaScript和HTML之间的交互是通过用户操作和浏览器成生成事件来完成的，比如当浏览钱加载完一个HTML文档或用户点击一个按钮都会生成一个事件，虽然利用传统的JavaScript事件可以完成这些交互行为。但JQuery扩展了这些事件处理机制，不但语法更简单且极大的增强了事件的处理能力！

window.onload和$(document).ready的区别

window.onload的执行时机为。当页面的所有元素（包括图片、音乐等）都执行完毕后再执行。也就是说在页面的所用元素加载完成之前在其内无法获取任何页面元素。并且在一个页面中指定使用一次该方法

$(document).ready()则是当页面中的标签元素加载完毕或就会被执行而不必等图片等关联的元素都加载完但是在未加载玩的那一部分则无法或去。不如说一章图片没有加载完则它的宽和高就没办法获取到。且可以在一个页面中多次使用发方法。

JQuery中可以使用load（）来解决页面元素为加载完整的问题其和window.onload一样也就是说

$(window).load(function(){})完全可以替代Window.onload=”function(){}”

事件绑定

在JQuery中可以使用bind方法绑定事件

其调用格式为：

Bind（type 【，data】，fn）

Type：要绑定的事件类型（如click、mouseover等也可以是自定义事件类型）

【data】：可选参数，作为event.data属性值传递额外的对象数据

fn：要绑定的处理函数

dome：
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script src="jquery-1.12.4.js"></script>

   <script type="text/javascript">

       $(function(){

    //给ul下的li绑定mouseover事件当鼠标移到li上方是给变其背景颜色为red

           $("ul li").bind("mouseover", function () {

               $(this).css("background", "red");

           });

       });

   </script>

</head>

<body>

    <ul>

        <li>首页</li>

        <li>简介</li>

        <li>人才计划</li>

    </ul>

</body>

</html>

合成事件

JQuery中有两个合成事件Hover和toggle

hover只是光标的悬停事件其整合了mouseover和mouseout其调用格式如下：

hover（fu1，fn2）；

当鼠标选定在某一元素是执行第一个参数指定的事件处理函数当鼠标移出该元素时执行第二个参数指定的事件处理函数。

dome：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script src="jquery-1.12.4.js"></script>

   <script type="text/javascript">

       $(function(){

           $("ul li").hover(

                    function () {

                        //光标悬停时执行

                        $(this).css("background", "red");

                                 },

                    function () {

                        //光标离开时执行

                        $(this).css("background", "");

                                }

                           );

                    }

       );

   </script>

</head>

<body>

    <ul>

        <li>首页</li>

        <li>简介</li>

        <li>人才计划</li>

    </ul>

</body>

</html>

toggle（）用于模拟鼠标连续单击是的事件。其参数可变当第一次单价是执行第一个参数指定的函数第二次单价是执行第二个参数指定的函数，一次类推。循环执行当没由参数是控制其显示或隐藏

其调用格式为：toggle（fn1，fn2，……fnN）；

dome：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <style type="text/css">

        .selected {

            background:red;

        }

    </style>

    <script src="jquery-1.8.3.min.js"></script>

    <!--<script src="jquery-1.12.4.js"></script>  不支持-->

    <!--<script src="jQuery1.11.1.js"></script> 不支持-->

   <script type="text/javascript">

       $(function () {

           $("li").toggle(

                    function () {

                        $(this).css("color", "red");

                                 },

                    function () {

                        $(this).css("color", "");

                                }

                           );

                    }

       );

   </script>

</head>

<body>

    <ul>

        <li id="li" >首页</li>

        <li class="li">简介</li>

        <li class="li">人才计划</li>

    </ul>

</body>

</html>

移除事件unbind（）

unbind函数用于移出已绑定的函数如果没有参数则移出所有一绑定的事件

其调用格式：

undind（【type】【，data】）

type：要移除的绑定类型

data：要移除的处理函数

动画

JQuery中的时间和动画的更多相关文章

jQuery中的事件与动画 (你的明天Via Via)
众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...
第三章 jQuery中的事件与动画
第三章jQuery中的事件与动画一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件在javaScript中,常用的基础事件有鼠标事件.键盘事件.wind ...
jQuery中的事件和动画——《锋利的jQuery》（第2版）读书笔记2
第4章 jQuery中的事件和动画 jQuery中的事件加载DOM $(document).ready(function(){ // 编写代码... }); 可以简写成: $(function( ...
jQuery中的事件与动画<思维导图>
Javascript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的.当文档或者它的某些元素发生某些变化或操作时,浏览器会自动生成一个事件.例如当浏览器装载完一个文档后,会生成事件. ...
jQuery中的事件和动画以及视频展示效果实例
经过这几天学习jQuery中的事件和动画,对jQuery更深的认识,接下来先把视频展示效果的代码贴出来,最后把我在学习jQuery事件和动画之后总结的思维导图 <!doctype html> ...
使用 jQuery 中的淡入淡出动画，实现图片的轮播效果，每隔 2 秒钟切换一张图片，共 6 张图片
查看本章节查看作业目录需求说明: 使用 jQuery 中的淡入淡出动画,实现图片的轮播效果,每隔 2 秒钟切换一张图片,共 6 张图片,切换到第 6 张后从头开始切换,在图片的下方显示 6 个小圆 ...
Jquery中的事件和动画
在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以 ...
JQuery制作网页—— 第七章 jQuery中的事件与动画
1. jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件 ...
第4章 jQuery中的事件和动画
4.1 jQuery中的事件 4.1.1 加载DOM jQuery就是用 `$(document).ready()方法来代替传统JavaScript的window.onload方法的. 1.执行时机 ...

随机推荐

不使用Store安装WSL
Windows Store经常会因为各种原因打不开, 这时候我们可以尝试直接下载安装WSL 1. PowerShell里运行下载: PS C:\WINDOWS\system32> Inv ...
继承TabActivity后不执行onBackPressed()里的方法
// 用下面这个函数拦截子Activity的返回操作 @Override public boolean dispatchKeyEvent(KeyEvent event) { ...
Java标识符规范
1.标识符用来定义包名,类名,方法名,变量名,常量名. 2.标识符必须由字母.下划线.$符号组成,不能以数字开头.不能是Java中的保留关键字.
Golden Gate 检查点
检查点是记录读写位置信息,在恢复时候要用到,保证事务的完整性. 两种存储方式: 存放在dirchk下存放在指定的checkpoint table Replicat: nodbcheckpoint: ...
What is the difference between arguments and parameters?
What is the difference between arguments and parameters? Parameters are defined by the names that ap ...
C#中方向键与回车键切换控件焦点
环境:界面上有TextBox,ComboBox等控件. 不建议把左右方向键都用来切换焦点,否则你在TextBox里面改变光标所在字符位置就不方便了. 方法一:笨方法,需为每个控件单独注册事件处理以T ...
Powerpivot PowerBI相关组件下载安装（附操作截图）
加载方式:com加载项加载方法: 点击Excel界面[文件]→[选项]→[加载项]→[COM加载项]→[转到] Excel2013加载PowerView Excel216PowerQuery不需要加载 ...
Java 实现简单的RPC框架
0 引言 RPC,全称为Remote Procedure Call,即远程过程调用,它是一个计算机通信协议.它允许像调用本地服务一样调用远程服务.它可以有不同的实现方式.如RMI(远程方法调用).He ...
node——Commonjs
ECMA只规范了js最近的一些能力,并没有规范当要用js写一个庞大的项目如果使用模块化开发. CommonJS规范了当我们想开发大型程序的时候如何模块化来开发,以及模块化的时候,不同文件的通讯. Co ...
win10x64位系统中nodejs的安装和配置
官网http://nodejs.cn/download/ 2.下载完成后点击安装包下一步,安装过的,这里根据自己的需求选择.选择第直接正常安装. 这一步是安装的内容,第一个是安装所有的模块,建议全部 ...

JQuery中的时间和动画