JQuery Tips相关(1)----关于$.Ready()


Posted in Javascript onAugust 14, 2014

 最近一直在研究JQuery,这个东西还是很博大精深的.下面分享一下我的学习总结.

$(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法

     接触JQuery一般最先学到的是何时启动事件。在曾经很长一段时间里,在页面载入后引发的事件都被加载在”Body”的Onload事件里.

     对于Body的Onload事件和JQuery的Ready方法相比,有很多弊端.比如:

1.加载多个函数的问题

<body onload="a();b();">

</body>

     在Onload事件中只能这样加载,很丑陋…而在JQuery中你可以利用多个JQuery.Ready()方法,它们会按次序依次执行

2.代码和内容不分离
    这个貌似不用说了,让人深恶痛绝-.-!!

3.执行先后顺序不同
    对于Body.Onload事件,是在加载完所有页面内容才会触发,我的意思是所有内容,包括图片,flash等.如果页面的这些内容很多会让用户等待很长时间.

    而对于$(document).ready()方法,这个方法只是在页面所有的DOM加载完毕后就会触发,无疑很大的加快了网页的速度.

    但是对于一些特殊应用,比如图片的放大缩小,图片的剪裁。需要网页所有的内容加载完毕后才执行的呢?我推荐使用$(window).load()方法,这个方法会等到页面所有内容加载完毕后才会触发,并且同时又没有OnLoad事件的弊端.

<script type="text/javascript">
    $(window).load(function() {
      alert("hello");
    });
    $(window).load(function() {
      alert("hello again");
    });
  </script>

    上面的代码会在页面所有内容加载完成后按先后顺序依次执行.

  当然不要忘了与之对应的Unload方法

$(window).unload(function() {
      alert("good bye");
    });

  上面代码会在页面关闭时引发.

在所有DOM加载之前引发JS代码
这个方法是我在调试的时候最喜欢的,有时候开发的时候也用这种方法

<body>
  <script type="text/javascript">
    (function() {
      alert("hi");
    })(jQuery)
  </script>
</body>

对,就是利用js闭包的形式将js代码嵌入body,这段代码会自动执行,当然也可以直接嵌入js代码,这种方式要注意顺序问题,如下:

<body>
<div id="test">this is the content</div>
  <script type="text/javascript">

    alert($("#test").html());//I Can display the content
    
  </script>
</body>
<body>

  <script type="text/javascript">

    alert($("#test").html());//I Can't display the content
    
  </script>
  <div id="test">this is the content</div>
</body>

上面两段代码,第二段代码当中因为只能解释到当前代码之前的DOM,而test并不存在于已经解析的DOM数.所以第二段代码无法正确显示.

Javascript 相关文章推荐
你的编程语言可以这样做吗?
Sep 07 Javascript
js随机颜色代码的多种实现方式
Apr 23 Javascript
jQuery :first选择器使用介绍
Aug 09 Javascript
extjs每个组件要设置唯一的ID否则会出错
Jun 15 Javascript
javascript随机显示背景图片的方法
Jun 18 Javascript
使用jquery插件qrcode生成二维码
Oct 22 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
May 10 Javascript
JavaScript_ECMA5数组新特性详解
Jun 12 Javascript
Vue AST源码解析第一篇
Jul 19 Javascript
深入浅析JavaScript中的RegExp对象
Sep 18 Javascript
vue微信分享的实现(在当前页面分享其他页面)
Apr 16 Javascript
Node.js API详解之 V8模块用法实例分析
Jun 05 Javascript
javascript实现获取cookie过期时间的变通方法
Aug 14 #Javascript
javascript检查浏览器是否支持flash的实现代码
Aug 14 #Javascript
用Jquery选择器计算table中的某一列某一行的合计
Aug 13 #Javascript
html文档中的location对象属性理解及常见的用法
Aug 13 #Javascript
js中string转int把String类型转化成int类型
Aug 13 #Javascript
JS 排序输出实现table行号自增前端动态生成的tr
Aug 13 #Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
Aug 12 #Javascript
You might like
php curl_init函数用法
2014/01/31 PHP
ThinkPHP3.1之D方法实例详解
2014/06/20 PHP
php json_encode与json_decode详解及实例
2016/12/13 PHP
form自动提交实例讲解
2017/07/10 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
学习ExtJS table布局
2009/10/08 Javascript
JavaScript splice()方法详解
2020/09/22 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
JS实现设置ff与ie元素绝对位置的方法
2016/03/08 Javascript
JavaScript的ExtJS框架中表格的编写教程
2016/05/21 Javascript
jquery+ajax+text文本框实现智能提示完整实例
2016/07/09 Javascript
Bootstrap基本组件学习笔记之列表组(11)
2016/12/07 Javascript
详解VueJS 数据驱动和依赖追踪分析
2017/07/26 Javascript
详解webpack3如何正确引用并使用jQuery库
2017/08/26 jQuery
JavaScript插件Tab选项卡效果
2017/11/14 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
2017/12/26 Javascript
vue源码学习之Object.defineProperty 对数组监听
2018/05/30 Javascript
深入浅析var,let,const的异同点
2018/08/07 Javascript
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
layui 实现表格某一列显示图标
2019/09/19 Javascript
Websocket 向指定用户发消息的方法
2020/01/09 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
2020/10/28 Javascript
如何在 Vue 中使用 JSX
2021/02/14 Vue.js
python中的多线程实例教程
2014/08/27 Python
使用Protocol Buffers的C语言拓展提速Python程序的示例
2015/04/16 Python
Python中使用asyncio 封装文件读写
2016/09/11 Python
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
浅谈Django学习migrate和makemigrations的差别
2018/01/18 Python
win10子系统python开发环境准备及kenlm和nltk的使用教程
2019/10/14 Python
html5.2 dialog简介详解
2018/02/27 HTML / CSS
学生励志演讲稿
2014/01/06 职场文书
幼儿园大班评语大全
2014/04/17 职场文书
小学三年级班主任工作经验交流材料
2015/11/02 职场文书
CSS实现章节添加自增序号的方法
2021/06/23 HTML / CSS