jquery简介和jquery入口函数-Jquery-前端日记簿

首页 Jquery 正文

jquery简介和jquery入口函数

2022-12-02 180

jquery简介和jquery入口函数

jQuery 是一个 JavaScript 库。(库里封装了很多方法，我们可以直接调用执行)

write less, do more 写的更少，做的更多！

jquery是什么？是javascript框架（库）。集成了大量的方法，属性。

//简写
$(function() {
    console.log('小王')
})
或者
$(document).ready(function() {
    console.log('小王你好')
});

预览：

div的动态展示跟设置内容

   <style>
    div{
        width: 300px;
        height: 200px;
        background-color: #ccc;
        display: none;
    }
    </style>
</head>
<body>
    <button id="btn1">展开</button>
    <button id="btn2">设置内容</button>
    <div></div>
    <div></div>
    <div></div>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#btn1').click(function(){
               $('div').show();
            });
            $('#btn2').click(function(){
            //    $('div').text('我是div');
                $('div').html('我是<span style="color:red;">div</span>');
            });
        })
    </script>

预览：

JQuery入口函数和js入口函数区别

js的入口函数"要等"到页面中所有的资源(图片，文件的加载)加载完之后才执行（onload函数）
2.JQuery入口函数“只会等待文档树”加载完成后开始执行，并不会等待图片，文件的加载

   <script src="js/jquery-3.5.1.min.js"></script>
    <script>
// JQuery入口函数和js入口函数的对比:
// 1.js的入口函数"要等"到页面中所有的资源(图片，文件的加载)加载完之后才执行（onload函数）
// 2.JQuery入口函数“只会等待文档树”加载完成后开始执行，并不会等待图片，文件的加载

    // js入口函数
    window.onload = function(){
        console.log('我是js入口函数')
    }

    // JQuery入口函数
    $(document).ready(function(){
        console.log('我是JQuery入口函数 第一种写法')
    })

    $(function(){
        console.log('我是JQuery入口函数 第二种写法')
    })
    </script>

预览：

标签：

发表评论：取消回复

原文链接：http://1.15.94.33/?id=3

=========================================

http://1.15.94.33/ 为 “前端日记簿” 唯一官方服务平台，请勿相信其他任何渠道。