在这看不见太阳的小黑屋里，苦逼的一天又开始了

好了闲话我也就不扯了，接下来我就来说说我对jQuery事件和动画的理解吧!!!

还是得再扯两句,我们敬爱的,Y老师讲完了,jQuery事件和动画,对着我们这听得一脸懵逼的人,说了一句不写完就别回家,心里咯噔一下,比被车撞都......

一.jQuery中事件

1.如何加载DOM呢?

　　在常规的JavaScript代码中,我们通常使用window.onload方法对吧,而在jQuery中,使用的是$(document).ready()方法.$(document).ready()方法可以极大的提高Web应用程序的响应速度.

2.执行的时机

　　window.onload方法和$(document).ready()方法有着相似的功能,但是在执行时机方面是有区别的.

window.onload方法是在网页中所有的元素完全加载到浏览器后才执行,而通过jQuery中的$(document).ready()方法注册的时间处理程序,在DOM就绪时就可以被调用.

　　简单的举一个例子,有一个大型的图库网站,为网页中虽有图片添加某些行为,例如单击图片后让他隐藏或显示.如果使用window.onload方法类来做处理,那么用户呢必须等到每一幅图片都加载完毕后,才可以进行小面的操作,但是如果使用jQuery中的$(document).ready()方法来进行设置,只要DOM就绪就可以进行操作了,不需要等待所有的图片下载完毕.

结果呢很显然,不用我说你也知道是用哪一种速度快了吧!!!

3.多次使用

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

$(function(){

            $(document).ready(function() {

                alert("one");

            })

            $(document).ready(function () {

                alert("two");

            })

        })
window.onload = one;

window.onload = two;

这两个执行的结果是,第一个,两个会依次弹出,而第二个呢只会显示two.

在悄悄的给你说个秘密,一般人不不告诉他

第一种:

$(document).ready(function () {

            //编写代码

});

第二种:

$(function () {

    //编写代码

});

第三种:

$().ready(function () {

    //编写代码

});

第二种是第一种的简写,不要崇拜我呦!!!

可已根据自己的习惯书写

4.事件如何绑定

如果你打算为元素绑定事件来完成某些操作,那么你就可以用bind()方法来匹配元素进行特定的事件绑定.

bind()方法的调用格式:

bind(type[,data],fn);

$("li").bind({

                    mouseover: function() {

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

                    },

                    mouseout: function() {

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

                    }

                });

//标签

<body>

        <ul>

            <li>首页</li>

            <li>公司信息</li>

            <li>人才计划</li>

        </ul>

</body>

这个例子充分的说明了如何使用bind()方法绑定事件

好了,这次就讲这么多,有什么讲的不好的,请多多指点,谢谢观看

不写完不让回家的JQuery的事件与动画的更多相关文章

  1. Jquery绑定事件及动画效果

    Jquery绑定事件及动画效果 本文转载于:https://blog.csdn.net/Day_and_Night_2017/article/details/85799522 绑定事件 bind(ty ...

  2. 第4章 jQuery的事件和动画(1)——事件篇

    jQuery扩展了JavaScript的基本事件处理机制,极大增强了事件处理能力 一. jQuery的事件 1. $(document).ready(function(){})加载方式 再次回到win ...

  3. jQuery中事件与动画

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

  4. 第4章 jQuery的事件和动画（二）

    二. jQuery中的动画 动画在前面几章案例中是回避不了的问题.此处结合一些简便的写法稍作系统的分析. 1. show()和hide()(1)介绍——不用过多的介绍了jQuery最基本的方法.本质是 ...

  5. jQuery之事件和动画

    1.加载DOM $(document).ready(function(){ }) 简写形式: $(function(){ }) 事件绑定: 合成事件 事件冒泡 移除事件 JQuery中的动画 show ...

  6. jQuery的事件与 动画

    什么是事件: 事件的本质是委托. Jquery的 方法: $().css(); $().click(); 等等. 鼠标的事件: 区别在于:mouseover与mouseout再进入或离开后会执行这两个 ...

  7. jQuery中事件与动画的总结

       1.加载DOM     1.1.window事件 window.onload=function(){}.... 时机:其他资源都加载完毕后,再执行   $(function(){}) ……:只是 ...

  8. jQuery的事件和动画

    1.animate的应用 animate(params,[duration],[easing],[callback]) 参数实例: params:     {width:"20%" ...

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

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

随机推荐

  1. IntelliJ Idea 常用快捷键列表

    Alt+回车 导入包,自动修正 sout+Tab Syso快捷键 Ctrl+Alt+F 局部变量变为全局变量 Ctrl+Alt+V 类似于eclipse中Ctrl+2+L的快捷键 Ctrl+Alt+T ...

  2. WINDOWS下PhoneGap(Cordova)安装笔记

    1.首先下载Node.js  安装nodejs很简单直接点击安装文件下一步直至成功即可,安装notejs的同时npm也会同时安装 成功后打开notejs的命令行工具 输入“node -v”," ...

  3. 尝试自己翻译了FreeCodeCamp的文章，技术方面多认识了几种技术，文章标题：Transparency in Action Free Code Camp is Now Open Source

    这是FreeCodeCamp其中一篇文章,趁着学习英文的时间,翻译这篇文章,其中讲到作者创建FCC过程,本文属于原创,第一次翻译,翻译还有诸多不足之处,请大家包含. 原文地址:https://medi ...

  4. 动画黄金搭档:CADisplayLink&CAShapeLayer

    我们在开发中有时会遇到一些看似非常复杂的动画,不知该如何下手,今天的这篇文章中我会讲到如何利用CADisplayLink和CAShapeLayer来构建一些复杂的动画,希望能在你下次构建动画中,给你一 ...

  5. 本机，同机房，同城，异地，不同城，腾讯云ping延时值

    本机,同机房,同城,异地,不同城,腾讯云ping延时值 ping本机: 0.01ms ping同机房机器: 0.1ms ping同城机器: 1ms ping不同城机器: 20ms 北(南)方ping南 ...

  6. 三、oracle数据库成功安装步骤 Oracle数据源配置

      安装完Oracle驱动后,如需连接远程Oracle数据库,还需进行数据源配置,类似Windows下的ODBC数据源配置. 运行"开始菜单\Oracle - OraDb11g_home1\ ...

  7. VS2015 + Cordova Html5开发使用Crosswalk Web引擎

    CrossWalk引擎的好处是统一不同android设备的Html5的差异性,据说速度很快. Vs2015中使用非常简单,作为一个Apache Cordova的插件安装即可: Installing t ...

  8. git用.gitignore忽略指定文件

    .gitignore 配置文件用于配置不需要加入版本管理的文件,配置好该文件可以为我们的版本管理带来很大的便利,以下是个人对于配置 .gitignore 的一些心得. 1.配置语法: 以斜杠“/”开头 ...

  9. git pull 冲突解决

    这个意思是说更新下来的内容和本地修改的内容有冲突,先提交你的改变或者先将本地修改暂时存储起来. 处理的方式非常简单,主要是使用git stash命令进行处理,分成以下几个步骤进行处理. 1.先将本地修 ...

  10. 深入了解DSP与ARM的区别与联系

    http://www.eeboard.com/bbs/thread-25219-1-1.html ARM微处理器的体系结构 了解DSP的体系结构 深入了解DSP与ARM的区别与联系 2011-09-3 ...