我们知道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.执行时机 ...

随机推荐

Core Bluetooth的基本常识
每个蓝牙4.0设备都是通过服务(Service)和特征(Characteristic)来展示自己的一个设备必然包含一个或多个服务,每个服务下面又包含若干个特征特征是与外界交互的最小单位比如说,一 ...
KCP kcptun
简介 KCP是一个快速可靠协议,能以比 TCP浪费10%-20%的带宽的代价,换取平均延迟降低 30%-40%,且最大延迟降低三倍的传输效果.纯算法实现,并不负责底层协议(如UDP)的收发,需要使用者 ...
Android Studio 插件 GsonFormat ：你还在烦恼为 Json格式生成 JavaBean实体类吗？
在网络层,互联网提供所有应用程序都要使用的两种类型的服务,尽管目前理解这些服务的细节并不重要,但在所有TCP/IP概述中,都不能忽略他们: 无连接分组交付服务(Connectionless Packe ...
Vue中问题总结与未解决问题总结
问题一: Error in render: "TypeError: Cannot read property 'matched' of undefined" 使用路由之后报错,路由 ...
node.js连接数据库登录注册，修改用户（页面的ajax请求）
首先给大家看一下目录结构,结构如下: index.html 首页(显示所有的用户信息) login.html 登录页 register.html 注册页 db.js 配置链接数据库参数 dbhelpe ...
iOS11访问相册权限变更问题
手机升到iOS 11后发现之前正常的图片保存功能无法正常使用会闪退经测试发现应该是权限没有开启的原因但是NSPhotoLibraryUsageDescription已经写入plist ...
Linux网络配置、文件及命令
Linux的网络配置是曾一直是我学习Linux的埋骨之地,投入了大量的精力和心神但是自己的虚拟机就是联不了网.原来一个大意,我一躺就是一年半.在这里简单的谈谈我对网络的微微认识. VMware的联网模 ...
react-redux源码解析(资料)
资料:https://www.cnblogs.com/hhhyaaon/p/5863408.html 感觉很棒,记录一下
BZOJ 1856 [SCOI2010]生成字符串 (组合数)
题目大意:给你n个1和m个0,你要用这些数字组成一个长度为n+m的串,对于任意一个位置k,要保证前k个数字中1的数量大于等于0的数量,求所有合法的串的数量答案转化为所有方案数-不合法方案数所有方案 ...
BZOJ 2754 [SCOI2012]喵星球上的点名 (AC自动机+map维护Trie树)
题目大意:略由于字符集大,要用map维护Trie树并不能用AC自动机的Trie图优化,不然内存会炸所以我用AC自动机暴跳fail水过的显然根据喵星人建AC自动机是不行的,所以要根据问题建然而 ...

JQuery中的时间和动画