zoukankan      html  css  js  c++  java
  • $(document).ready(){}、$(fucntion(){})、(function(){})(jQuery)onload()的区别

     1.首先说JQuery的几个写法 

        $(function(){
          //do someting
       });
       $(document).ready(function(){
          //do someting
       });
       $().ready(function(){
        //do someting
      })

      这三种方法都是JQuery的方法,写法不一样,但是效果一样。

     2.这三个写法和$(window).load(function(){...})、onload()的区别

      2.1.加载多个函数的问题

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

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

      3.3执行先后顺序不同
                对于Body.Onload事件,是在加载完所有页面内容才会触发,我的意思是所有内容,包括图片,flash等.如果页面的这些内容很多会让用户等待很长时间.
           而对于$(document).ready()方法,这个方法只是在页面所有的DOM加载完毕后就会触发,无疑很大的加快了网页的速度.
           但是对于一些特殊应用,比如图片的放大缩小,图片的剪裁。需要网页所有的内容加载完毕后才执行的呢?我推荐使用$(window).load()方法,这个方法会等
           到页面所有内容加载完毕后才会触发,并且同时又没有OnLoad事件的弊端.

    3.(function($){})(jQuery)

       (function() {
          alert("hi");//不一定在dom加载完执行,所以要操作dom对象时需要注意
      })(jQuery)

       3.1首先(function(){})()这种写法 是创建了一个匿名的方法并立即执行(function(){})这个是匿名方法后面的括号就是立即调用了这个方法)。这样做可以创建一个作用域以保证内部变量与外部变量不发生冲突,比如$ jQuery 等jquery内部定义的变量。

       3.2 (function($){})(jQuery) 这个写法主要的作用还是保证jquery不与其他类库或变量有冲突 首先是要保证jQuery这个变量名与外部没有冲突(jquery内部$与jQuery是同一个东西 有两个名字的原因就是怕$与其他变量名有冲突二jQuery与其他变量冲突的几率非常小)并传入匿名对象,匿名对象给参数起名叫做$(其实和jquery内部是一样的) 然后你就可以自由的在(function($){})(jQuery)里写你的插件而不需要考虑与外界变量是否存在冲突。

     1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
     2 <HTML>
     3  <HEAD>
     4   <script type="text/javascript" src="jquery-1.7.2.min.js" charset="utf-8" ></script>
     5  </HEAD>
     6  <BODY onload="alert('onload')">
     7      <script  type="text/javascript" charset="utf-8" >
     8          
     9 
    10          $(function(){
    11              alert("$(function()");
    12          });
    13          $(document).ready(function(){
    14              alert("$(document).ready");
    15          });
    16          $().ready(function(){
    17             alert("$().ready(function()");
    18         })
    19         //上面三个方法是级别是一样的,按代码的先后顺利执行,是在dom对象加载完
    20         
    21         $(window).load(function() {
    22              alert("$(window).load(function()");//是在图片,flash等加载完执行
    23         });
    24 
    25         (function() {
    26             alert("hi");//不一定在dom加载完执行,所以要操作dom对象时需要注意
    27         })(jQuery)
    28 
    29         //弹出先后顺利是:hi-> $(function() -> $(document).ready -> $().ready(function() -> onload -> $(window).load(function()
    30      </script>
    31 
    32  </BODY>
    33 </HTML>

    <转载自:http://www.cnblogs.com/allensoft/archive/2014/04/10/3656202.html>

  • 相关阅读:
    mac 10.15.7 修改PATH
    oc 属性类型一般用法
    ubuntu解压zip文件名乱码
    telnet 退出
    docker 根据容器创建镜像
    mac android adb device 没有显示设备
    Yii2 查看所有的别名 alias
    Yii2 App Advanced 添加 .gitignore
    ubuntu 18.04 搜狗突然就提示乱码
    An error occured while deploying the file. This probably means that the app contains ARM native code and your Genymotion device cannot run ARM instructions. You should either build your native code to
  • 原文地址:https://www.cnblogs.com/ChandlerVer5/p/4512578.html
Copyright © 2011-2022 走看看