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 相关文章推荐
你所要知道JS(DHTML)中的一些技巧
Jan 09 Javascript
了不起的node.js读书笔记之mongodb数据库交互
Dec 22 Javascript
SuperSlide标签切换、焦点图多种组合插件
Mar 14 Javascript
javascript比较两个日期相差天数的方法
Jul 23 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
Jan 25 Javascript
canvas实现粒子时钟效果
Feb 06 Javascript
angularjs之$timeout指令详解
Jun 13 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
纯js实现无缝滚动功能代码实例
Feb 21 Javascript
js中addEventListener()与removeEventListener()用法案例分析
Mar 02 Javascript
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
JS + HTML 罗盘式时钟的实现
May 21 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
phpMyAdmin 安装及问题总结
2009/05/28 PHP
PHP动态分页函数,PHP开发分页必备啦
2011/11/07 PHP
php中动态调用函数的方法
2015/03/16 PHP
iis6手工创建网站后无法运行php脚本的解决方法
2017/06/08 PHP
php实现统计二进制中1的个数算法示例
2018/01/23 PHP
合并table相同单元格的jquery插件分享(很精简)
2011/06/20 Javascript
extjs3 combobox取value和text案例详解
2013/02/06 Javascript
jquery等宽输出文字插件使用介绍
2013/09/18 Javascript
JavaScript页面模板库handlebars的简单用法
2015/03/02 Javascript
Angular页面间切换及传值的4种方法
2016/11/04 Javascript
nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
2017/07/05 NodeJs
关于Ajax的原理以及代码封装详解
2017/09/08 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
JavaScript事件对象深入详解
2018/12/30 Javascript
Django+Vue实现WebSocket连接的示例代码
2019/05/28 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
2019/07/19 Javascript
jquery实现简易验证插件封装
2020/09/13 jQuery
[02:24]DOTA2痛苦女王 英雄基础教程
2013/11/26 DOTA
python使用心得之获得github代码库列表
2014/06/25 Python
详解python中xlrd包的安装与处理Excel表格
2016/12/16 Python
Python使用numpy实现BP神经网络
2018/03/10 Python
Python Django切换MySQL数据库实例详解
2019/07/16 Python
Python 离线工作环境搭建的方法步骤
2019/07/29 Python
在django-xadmin中APScheduler的启动初始化实例
2019/11/15 Python
使用Rasterio读取栅格数据的实例讲解
2019/11/26 Python
Python并发concurrent.futures和asyncio实例
2020/05/04 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
物资采购方案
2014/06/12 职场文书
离婚财产分配协议书
2014/10/21 职场文书
班级元旦晚会开幕词
2015/01/29 职场文书
2015年行政助理工作总结
2015/04/30 职场文书
2019年怎样才能撰写出优秀的自荐信
2019/03/25 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书
Python中生成随机数据安全性、多功能性、用途和速度方面进行比较
2022/04/14 Python
介绍一下28个JS常用数组方法
2022/05/06 Javascript