jQuery中级--$(function() {})和$(document).ready(function(){ })

最新推荐文章于 2024-07-30 11:51:58 发布

Wendy-lxq

最新推荐文章于 2024-07-30 11:51:58 发布

阅读量2.4w

点赞数 3

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/u010297791/article/details/53819380

版权

jQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

$(document).ready() 里的代码是在页面内容都加载完才执行的，如果把代码直接写到script标签里，当页面加载完这个script标签就会执行里边的代码了，此时如果标签里执行的代码调用了当前还没加载过来的代码或者dom，那么就会报错，当然如果把script标签放到页面最后面那么就没问题了，此时和ready效果一样。

$(document).ready(function(){})可以简写成$(function(){});

注意：

jQuery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法，不过与window.onload方法还是有区别的。后面的文章会具体讲解它们之间的区别，今天先说明一下$(document).ready(function(){})的应用。

举一个简单的例子说明。当点击div后，我们将一个div隐藏。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.1.0.min.js" language="JavaScript"></script>
    <script>
        $(document).ready(function () {
            $("div").click(function(){
                $(this).hide();
            });
        });
    </script>
    <style>
        div{
            width:100px;
            height:100px;
            background-color: #8ad6ff;
        }
    </style>
</head>
<body>
<div>点击div，隐藏此div</div>
</body>
</html>

如果把$(document).ready(function() {});去掉后，无法隐藏这个div：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.1.0.min.js" language="JavaScript"></script>
    <script>
         $("div").click(function(){
             $(this).hide();
        });
    </script>
    <style>
        div{
            width:100px;
            height:100px;
            background-color: #8ad6ff;
        }
    </style>
</head>
<body>
<div>点击div，隐藏此div</div>
</body>
</html>

但是把script放到页面最后的话，就可恢复隐藏效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.1.0.min.js" language="JavaScript"></script>
    <style>
        div{
            width:100px;
            height:100px;
            background-color: #8ad6ff;
        }
    </style>
</head>
<body>
    <div>点击div，隐藏此div</div>
</body>
<script>
     $("div").click(function(){
     $(this).hide();
     });
</script>
</html>

所以我们进行总结一下：

$(document).ready 里的代码是在页面内容都加载完才执行的，如果直接写到script标签里，当页面加载完这个script标签就会执行里边的代码了，如果标签里执行的代码调用了当前还没加载过来的代码或者dom，那么就会报错。但是如果把script标签当到页面最后面那么就没问题，可以达到和ready差不多的效果。

$(document).ready() 方法是事件模块中最重要一个函数，可以极大的提高 Web 应用程序的速度。需要注意一点，由于在 $(document).ready() 方法内注册的事件，只要 DOM 就绪就会被执行，因此可能此时元素的关联文件未下载完。例如与图片有关的 html 下载完毕，并且已经解析为 DOM 树了，但很有可能图片还没有加载完毕，所以例如图片的高度和宽度这样的属性此时不一定有效。