jQuery 语法基础

最新推荐文章于 2022-02-27 10:59:19 发布

weixin_51297617

最新推荐文章于 2022-02-27 10:59:19 发布

阅读量55

点赞数

文章标签： jquery javascript html

本文链接：https://blog.csdn.net/weixin_51297617/article/details/120660348

版权

本文详细比较了jQuery的$(document).ready和JavaScript的window.onload，展示了如何在DOM加载完成后使用这两种方式来执行代码，通过实例说明了它们在实际项目中的应用场景。

摘要由CSDN通过智能技术生成

jQuery 入口函数:

$(document).ready(function(){
    // 执行代码
});
或者
$(function(){
    // 执行代码
});

JavaScript 入口函数:

window.onload = function () {
    // 执行代码
}

jQuery 入口函数与 JavaScript 入口函数的区别：
jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

在这里插入图片描述

实践：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery语法</title>
</head>
<body>

<button type="button">Click me</button>
<span  >你是一个好孩子</span>
<p>你很好</p>
<p class="test">你很棒</p>
<div id="test">你很从聪明</div>

</body>
//注意外部引入文件
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script>
    // 基础语法 $(selector).action()
    /*
    * 1.美元符号定义 jQuery
    * 2.选择符（selector）"查询"和"查找" HTML 元素
    * 3.jQuery 的 action() 执行对元素的操作
    * */

    /*
    文档就绪事件
    您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：

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

    简洁写法（与以上写法效果相同）:
    $(function(){
   // 开始写 jQuery 代码...
    });
     */
    
    /*
    这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。
    如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：
    1 试图隐藏一个不存在的元素
    2 获得未完全加载的图像的大小
    */

    $(function(){
        // 开始写 jQuery 代码...
        $("#test").hide()
        // 隐藏 id="test" 的元素


        $("p.test").hide()
        //隐藏所有 class="test" 的 <p> 元素
        
    });

    $(function(){
        $("p").hide()
        //隐藏所有 <p> 元素

    });

    $(function(){
        $("span").click(function(){
            $(this).hide();
        });
    });

    $(document).ready(function(){
        $("button").click(function(){
            $(this).hide();
        });
    });
    
</script>
</html>