我们知道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. java生成6位随机数的5种方法

    转自:https://blog.csdn.net/u012491783/article/details/76862526/

  2. C# 实现透明可移动窗体

    1.设置窗体属性 this.BackColor this.TransparencyKey = this.BackColor; 2.窗体加载图片 this.BackgroundImage = globa ...

  3. [转]数据库事务中的隔离级别和锁+spring Transactional注解

    数据库事务中的隔离级别和锁 数据库事务在后端开发中占非常重要的地位,如何确保数据读取的正确性.安全性也是我们需要研究的问题.ACID首先总结一下数据库事务正确执行的四个要素(ACID): 原子性(At ...

  4. 互联网智能门锁，手机蓝牙APP成为首选

    随着互联网门锁在行业中的普及,大家越加关注到门锁的实施和维护成本.我们在互联网智能门锁的调研中发现,网关联网的智能门锁,使用时需要依赖房间内的宽带上网线路,而断线后客户反馈问题较多.据某家分散式公寓的 ...

  5. Photoshop把图片调成固定的像素。

    1.用PhotoShop打开需要修改的图片. 2.点击“窗口”菜单的“图层”子菜单,打开图层控制面板(快捷键F7).3.用鼠标左键双击“图层”面板的“背景”图层.在弹出窗口中点击“确定”按钮,解锁背景 ...

  6. Unity 移动键Q的三种用法 For Mac，Windows类同

    拖动整个场景:三指 (任何模式下)ALT+三指:旋转当前镜头 (任何模式下)双指前后滑动:缩放镜头 ps1:Q键移动的游戏场景,W移动的是游戏对象 ps2:三指 = 左键拖动

  7. 使用easyui combobox初始化+在input中触发下拉框+获取值

    效果图: 1.html <input id="alarmLeve" class="easyui-combobox" name="alarmLev ...

  8. d3代码如何改造成update结构（恰当处理enter和exit）

    d3的enter和exit 网上有很多blog讲解.说的还凑合的见:https://blog.csdn.net/nicolecc/article/details/50786661 如何把自己的rude ...

  9. C++函数传递数组的两种方式

    数组与指针. 传首地址过去,然后通过地址输出数组元素. 1.一维数组 #include<iostream> using namespace std; #include <cstrin ...

  10. js获得 json对象的个数(长度)

    function getJsonObjLength(jsonObj) { var Length = 0; for (var item in jsonObj) { Length++; } return ...