zoukankan      html  css  js  c++  java
  • jquery中的$(document).ready()方法和window.onload方法区别

    大多数情况下,jquery代码的编写,都要求我们将jquery的代码放在

    1
    2
    3
    $(document).ready(function(){
          ........jquery代码...........
    });

    上面的代码和

    1
    2
    3
    $().ready(function(){
          ........jquery代码...........
    });
    1
    2
    3
    $(function(){
          ........jquery代码...........
    });

    是等同的~~最后一种方式是最简洁的方式,绝大多数情况下我都使用最后一种写法,呵呵~~好记!
    注意:有时候我们自己编写的jquery代码出现莫名其妙的问题,看似正常的代码,但是就是在运行的时候出错了,那么请先检查一下你的代码有没有放在$(document).ready()方法中运行。

    接下来我们来说说$(document).ready()方法和window.onload方法的区别:
    他们的主要的区别有两点:

      1. 执行时机
        window.onload方法是在网页中的所有的元素(包括元素的所有关联文件)都完全加载到浏览器之后才执行。而通过jQuery中 的$(document).ready()方法注册的事件处理程序,只要在DOM完全就绪时,就可以调用了,比如一张图片只要<img>标签 完成,不用等这个图片加载完成,就可以设置图片的宽高的属性或样式等。
      2. $(document).ready()方法可以多次使用而注册不同的事件处理程序,而window.onload一次只能保存对一个函数的引用,多次绑定函数只会覆盖前面的函数。
        先来看window.onload方法在一个页面上注册两次会是什么样的结果:
        1
        2
        3
        4
        5
        6
        7
        8
        function one(){
            alert("one");
        }
        function two(){
            alert("two");
        }
        window.onload = two ;
        window.onload = one ;

        上面的代码运行后,会弹出“one”。

        window.onload方法测试

        再来看看$(document).ready()方法分两次调用会是什么结果。

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        function one(){
            alert("one");
        }
        function two(){
            alert("two");
        }
        $(document).ready(function(){
            one();
        });
        $(document).ready(function(){
            two();
        });

        上面的代码运行后,会分别弹出“one”和“two”。

        $(document).ready()方法测试
  • 相关阅读:
    LeetCode120 Triangle
    LeetCode119 Pascal's Triangle II
    LeetCode118 Pascal's Triangle
    LeetCode115 Distinct Subsequences
    LeetCode114 Flatten Binary Tree to Linked List
    LeetCode113 Path Sum II
    LeetCode112 Path Sum
    LeetCode111 Minimum Depth of Binary Tree
    Windows下搭建PHP开发环境-WEB服务器
    如何发布可用于azure的镜像文件
  • 原文地址:https://www.cnblogs.com/piuba/p/2812480.html
Copyright © 2011-2022 走看看