jQuery的基本使用

最新推荐文章于 2024-10-02 05:39:15 发布

Eli-sun

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量73

点赞数

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

本文链接：https://blog.csdn.net/vfjcgg/article/details/105186833

版权

jQuery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

jQuery的下载：
官网地址：https://jquery.com/
版本：
1x:兼容 IE 678等低版本浏览器，官网不再更新
2x:不兼容 IE 678等低版本浏览器，官网不再更新
3x:不兼容 IE 678等低版本浏览器,是官方主要更新维护的版本
各版本的下载地址：https://code.jquery.com/

jQuery的使用步骤
1.引入jQuery文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-mini.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        $('div').hide();
    </script>
</body>

</html>

2.jQuery的入口函数
1.等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装，
2.相当于原生js中的DOMContentLoaded.
3.和我们原生中的load事件是等页面文档，外部的js文件，css文件、图片加载完毕才执行内部代码。
4.更推荐使用第二种方式
有两种写法：

exmple 1:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-mini.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <script>
        //$('div').hide();
        // 1.等着页面DOM加载完毕再去执行js代码
        $(document).ready(function() {
            $('div').hide();
        })
    </script>
    <div></div>
</body>

</html>

exmaple 2:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-mini.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
  
    <script>
        // 2.等着页面DOM加载完毕再去执行js代码
        $(function() {
            $('div').hide();
        })
    </script>
    <div></div>
</body>

</html>