《jquery框架开发》第3课：文档就绪事件

最新推荐文章于 2022-03-05 15:27:20 发布

李书明

最新推荐文章于 2022-03-05 15:27:20 发布

阅读量231

点赞数

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

本文链接：https://blog.csdn.net/lsmxx/article/details/100030102

版权

jquery 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

你也许注意到，在第1课的代码中有这样一段代码：

$(function(){
   // 开始写 jQuery 代码...
})

这段代码结构的作用是：DOM加载完成后才执行里面的jquery代码，防止文档在完全加载（就绪）之前运行 jQuery 代码。只有文档全部加载完毕后才能获取DOM元素进行操作。

上面的代码是简洁写法，还有标准的写法：

$(document).ready(function(){
        
})

这两种写法都可以用，根据自己的喜好，选择其中一个就可以了。比如下面这段代码表达的含义就是：当文档加载完毕后，点击按钮，弹出警告框，显示”hello world"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-2.2.4.min.js"></script>
</head>
<body>
<button id="btn">点击我</button>
<script>
    // 文档加载完毕后执行
    $(function(){
        // 按钮的点击事件
        $('#btn').click(function(){
            alert('hello world')
        })
    })
</script>
</body>
</html>

原生态的javascript也有文档就绪事件：window.onload，参见下面的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="btn">点击我</button>
<script>
    //原生态javascritp
    //文档就绪事件
    window.onload=function(){
        document.getElementById('btn').onclick=function(){
            alert('hello world')
        }
    }
</script>
</body>
</html>

原生态的javascript中的window.onload的作用和jquery中的$(function(){ })作用是一样的。但是二者还是有一些差别的，作为程序员来说，必须要掌握。

jQuery 的$(function(){ })：是在 html 所有标签(DOM)都加载之后，就会去执行。
JavaScript 的 window.onload 事件是等到所有内容（包括网页中的图片）全部加载完后，才会执行。

表格中执行的次数如何理解呢，见下面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-2.2.4.min.js"></script>
</head>
<body>

<script>
    $(function(){
        alert('第一次显示')
    })

    $(function(){
        alert('第二次显示')
    })

</script>
</body>
</html>

浏览器运行上面的代码，就弹出两次警告框，说明两个$(function(){}) 互不影响，都可以运行。

再看看下面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    window.onload=function(){
        alert('第一次显示')
    }

    window.onload=function () {
        alert('第二次显示')
    }
</script>
</body>
</html>

运行原生态的window.onload事件，就会发现，警告框只弹出一次，并且是“第二次显示”，很显然，第一个window.onload被后面的window.onload覆盖掉了，失去了作用。

一句话：window.onload事件只能写一次，$(function(){} )可以写多次。

好了，js和jquery中的文档就绪就学习到这里，在日后的代码里经常会用到这个事件。

李书明

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
《jquery框架开发》第3课：文档就绪事件

你也许注意到，在第1课的代码中有这样一段代码：$(function(){ // 开始写 jQuery 代码...})这段代码结构的作用是：DOM加载完成后才执行里面的jquery代码，防止文档在完全加载（就绪）之前运行 jQuery 代码。只有文档全部加载完毕后才能获取DOM元素进行操作。上面的代码是简洁写法，还有标准的写法：$(document).ready(func...
复制链接

扫一扫