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

最近一直在研究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数.所以第二段代码无法正确显示.

赞 (0)

相关推荐

  • jQuery之$(document).ready()使用介绍

    学习jQuery的第一件事是:如果你想要一个事件运行在你的页面上,你必须在$(document).ready()里调用这个事件.所有包括在$(document).ready()里面的元素或事件都将会在DOM完成加载之后立即加载,并且在页面内容加载之前. If you want an event to work on your page, you should call it inside the $(document).ready() function. Everything inside it

  • JQuery onload、ready概念介绍及使用方法

    页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页 面包含图片等文件在内的所有元素都加载完成.(可以说:ready 在onload 前加载!!!) 一般样式控制的,比如图片大小控制放在onload 里面加载; jS事件触发的方法,可以在ready 里面加载; 用jQ的人很多人都是这么开始写脚本的: 通常的写法 复制代码 代码如下: $(function(){ // do something }); 其实这个就是jq ready

  • jquery ready()的几种实现方法小结

    1.最常用也是最标准的 复制代码 代码如下: $(document).ready(){ }); 2.是上面的简写: 复制代码 代码如下: $(function(){ }) 很奇怪?为什么能这样?不是判断document对象是否 reADy然后才执行函数的么?document哪去了?我们看下jQuery的源代码: 复制代码 代码如下: // jQuery的构造函数: var jQuery = function( a, c ) { // $(document).ready()的简写形式,只有在$(f

  • jquery的$(document).ready()和onload的加载顺序

    最近在改一个嵌入在frame中的页面的时候,使用了jquery做效果,而页面本身也绑定了onload事件.改完后,Firefox下测试正常流畅,IE下就要等个十几秒jquery的效果才出现,黄花菜都凉了. 起初以为是和本身onload加载的方法冲突.网上普遍的说法是$(document).ready()是在页面DOM解析完成后执行,而onload事件是在所有资源都准备完成之后才执行,也就是说$(document).ready()是要在onload之前执行的,尤其当页面图片较大较多的时候,这个时间

  • Jquery中"$(document).ready(function(){ })"函数的使用详解

    Jquery是优秀的Javascrīpt框架,$是jquery库的申明,它很不稳定(我就常遇上),换一种稳定的写法jQuery.noConflict(); jQuery(document).ready(function(){}); 使用jQuery的好处是它包装了各种浏览器版本对DOM对象(javascript的DOM对象你应该知道吧,就是它了)的操作. 比如jquery写法:$("div p"); // (1)$("div.container"); // (2)$

  • jquery中的$(document).ready()使用小结

    window.onload = function(){ alert("welcome"); }这样的写法作用是希望在页面加载完,自动执行定义js代码(function). $(document).ready(function(){.... })这个函数是用来取代页面中的window.onload; document.ready()和传统的方法<body onload="load()"> 相似,不同的是onload()的方法是在页面加载完成后才发生,这包括

  • jquery $(document).ready() 与window.onload的区别

    jquery $(document).ready() 与window.onload的区别

    1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.         $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同 window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个          $(document).ready()可以同时编写多个,并且都可以得到执行 3.简化写法 window.onload没有简化写法          $(documen

  • jQuery的ready方法详解

    jQuery中的ready方法实现了当页面加载完成后才执行的效果,但他并不是window.onload或者doucment.onload的封装,而是使用 标准W3C浏览器DOM隐藏api和IE浏览器缺陷来完成的,首先,我们来看jQuery的代码 复制代码 代码如下: DOMContentLoaded = function()  {          //取消事件监听,执行ready方法     if ( document.addEventListener )     {             

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

    最近一直在研究JQuery,这个东西还是很博大精深的.下面分享一下我的学习总结. $(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法 接触JQuery一般最先学到的是何时启动事件.在曾经很长一段时间里,在页面载入后引发的事件都被加载在"Body"的Onload事件里. 对于Body的Onload事件和JQuery的Ready方法相比,有很多弊端.比如: 1.加载多个函数的问题 <body onload="a()

  • jQuery Validate 相关参数及常用的自定义验证规则

    Jquery Validate 相关参数 //定义中文消息 var cnmsg = { required: "必选字段", remote: "请修正该字段", email: "请输入正确格式的电子邮件", url: "请输入合法的网址", date: "请输入合法的日期", dateISO: "请输入合法的日期 (ISO).", number: "请输入合法的数字",

  • JQuery Tips(4) 一些关于提高JQuery性能的Tips

    在选择时,最好以ID选择符作为开头 我想这个很好理解,因为JQuery内部使用document.getElementByID方法进行ID选择,这种方法比其他所有对DOM选择的方法更快,所以以$("#")开头是最好的,比如: 复制代码 代码如下: <div id="a"> <div class="b"> <div class="c"> <div class="d"&g

  • Jquery下的26个实用小技巧(jQuery tips, tricks & solutions)

    比如有禁止右键点击.隐藏搜索文本框文字.在新窗口中打开链接.检测浏览器.预加载图片.页面样式切换.所有列等高.动态控制页面字体大小.获得鼠标指针的X值Y值.验证元素是否为空.替换元素.延迟加载.验证元素是否存在于Jquery集合中.使DIV可点击.克隆对象.使元素居中.计算元素个数.使用Google主机上的Jquery类库.禁用Jquery效果.解决Jquery类库与其他Javascript类库冲突问题. 具体如下: 1. 禁止右键点击 复制代码 代码如下: $(document).ready(

  • jQuery Tips 为AJAX回调函数传递额外参数的方法

    具体到这个例子,我们希望button1和button2点击之后,用AJAX的方式取example.html的内容,然后动态更新页面的id=callbackdemo3的div HTML如下: 复制代码 代码如下: <div id="callbackdemo1"> <button id="button1">ajax load1</button><br/> </div> <div id="call

  • JQuery 引发两次$(document.ready)事件

    页面大概是这样的,一个Partial View,而这个View包含了一小段绑定Search的Javascript,并且用Jquery-ui 的dialog 包含,而且确定不是ASP.net mvc生成HTML的问题,HTML是依照我的想法生成的,后来实在没有办法,把dialog的代码去掉,Search按就正常了.查了一下dialog的代码,发现 是appendTo引发的. 做了实验,代码如下: 代码 复制代码 代码如下: <script type="text/javascript"

  • JQuery Tips(3) 关于$()包装集内元素的改变

    这两个方法是比较容易搞混的. filter方法表示的是对当前内部的元素进行筛选,这个接受两种参数,一个返回bool的function,或者是JQuery的选择表达式,包装集内的元素只会小于等于当前包装集内的元素,并且含有的元素属于原来包装集内元素的子集: 复制代码 代码如下: <div id="one">the one</div> <div id="two"><p>the two</p></div&g

  • jquery $.ajax相关用法分享

    复制代码 代码如下: $.ajax({ type: "GET", url: "Services/EFService.svc/Members", data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { // Play with returned data i

  • 关于锚点跳转及jQuery下相关操作与插件

    关于锚点跳转及jQuery下相关操作与插件

    一.锚点跳转简介 锚点嘛,业余点的解释就是可以让页面定位到某个位置的点.在高度较高的页面中经常见到,例如,百度百科页面,<火影忍者>这个词条,结果就会看到如下的锚点列表: 点击其中一个链接,就会跳转到页面的相应位置.这就是锚点的作用之一.锚点还可以用在跳转到其他页面的相应位置,例如我的博客,点击博客首页文章下面的评论链接,则会跳转到文章的评论处. 起关键作用的就是链接地址后面跟着的#comments,见下图标示: 我知道的实现锚点跳转有两种方式,一种是a标签+name属性,还有一种就是使用标签

  • JQuery Tips(2) 关于$()包装集你不知道的

    我想这个理解起来很简单,被$()包装的JQuery对象总是以集合的形式出现.就算包装集中只有一个对象. 复制代码 代码如下: <div id="a"></div> <div id="b"></div> <script type="text/javascript"> $("div").html("hi"); </script> 上面被选择

随机推荐