我们知道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中的时间和动画的更多相关文章

  1. jQuery中的事件与动画 (你的明天Via Via)

    众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...

  2. 第三章 jQuery中的事件与动画

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

  3. jQuery中的事件和动画——《锋利的jQuery》（第2版）读书笔记2

    第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){   // 编写代码... }); 可以简写成: $(function( ...

  4. jQuery中的事件与动画<思维导图>

    Javascript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的.当文档或者它的某些元素发生某些变化或操作时,浏览器会自动生成一个事件.例如当浏览器装载完一个文档后,会生成事件. ...

  5. jQuery中的事件和动画 以及视频展示效果实例

    经过这几天学习jQuery中的事件和动画,对jQuery更深的认识,接下来先把视频展示效果的代码贴出来,最后把我在学习jQuery事件和动画之后总结的思维导图 <!doctype html> ...

  6. 使用 jQuery 中的淡入淡出动画，实现图片的轮播效果，每隔 2 秒钟切换一张图片，共 6 张图片

    查看本章节 查看作业目录 需求说明: 使用 jQuery 中的淡入淡出动画,实现图片的轮播效果,每隔 2 秒钟切换一张图片,共 6 张图片,切换到第 6 张后从头开始切换,在图片的下方显示 6 个小圆 ...

  7. Jquery中的事件和动画

    在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以 ...

  8. JQuery制作网页—— 第七章 jQuery中的事件与动画

    1. jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件 ...

  9. 第4章 jQuery中的事件和动画

    4.1 jQuery中的事件 4.1.1 加载DOM jQuery就是用 `$(document).ready()方法来代替传统JavaScript的window.onload方法的. 1.执行时机 ...

随机推荐

  1. QEMU/KVM磁盘在线备份

    QEMU/KVM磁盘的在线完整及增量备份,是"打包"方案的一种具体实现,可实现基于时间点的备份,同时支持本地与远程2种备份方式,并可指定备份文件进行恢复. tag: qemu, k ...

  2. 16.unix网络编程一卷 unp.h

    unix网络编程 --ubuntu下建立编译环境 1.安装编译器,安装build-essential sudo apt-get install build-essential 2.下载本书的头文件 下 ...

  3. 33.Qt模型与视图

    #include "mainwindow.h" #include <QApplication> #include <QAbstractItemModel> ...

  4. <改变imageView的颜色和状态栏>

    1. import android.content.Context; import android.content.res.TypedArray; import android.support.ann ...

  5. DataTables入门

    转载 https://blog.csdn.net/gfd54gd5f46/article/details/65938189

  6. HDU 2150 Pipe（ 判断线段相交水 ）

    链接:传送门 题意:略 思路:数据量很小,直接暴力所有线段 /********************************************************************* ...

  7. bitset优化背包

    题目:https://agc020.contest.atcoder.jp/tasks/agc020_c 回忆下一题,是零一背包,主要的做法就是凑出最接近sum/2的价值,然后发现现在的背包的容量是20 ...

  8. 关于Vue实例的生命周期（2）

     关于Vue实例的生命周期(2) 创建(create)->挂载(mount)->更新(update)->销毁(destory) 钩子函数触发事件 beforeCreate 在实例初始 ...

  9. 微信小程序开发入门（一）

     小程序学习入门--(一) 最近自己学习微信小程序的过程当中自己总结出来的知识点,我会不断地更新和完善! 小程序的开发工具 一台电脑 熟悉HTML.CSS.JS基本语法 开发工具: 微信web开发者工 ...

  10. 【 【henuacm2016级暑期训练】动态规划专题 K】 Really Big Numbers

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 会发现如果x是reallynumber那么x+1也会是reallynumber.... (个位数+1,各位数的和+1了但是整个数也+ ...