jquery的引入与使用（附有HTML5的代码实例）

最新推荐文章于 2025-09-30 05:18:27 发布

原创最新推荐文章于 2025-09-30 05:18:27 发布 · 1.4w 阅读

17 ·

CC 4.0 BY-SA版权

html复习专栏收录该内容

23 篇文章

订阅专栏

本文介绍了如何在项目中引入jQuery，包括本地和通过CDN两种方式，并提供了jQuery的使用示例，展示了如何在页面加载完成后弹出提示框。同时，文章强调了jQuery作为JavaScript库的角色，以及其简化DOM操作的功能。

1.引入
引入方法有两种：一种本地，一种联网（CDN）。
本地的方法：
下载并放入项目文件，并用js引入（取决于自己的路径）

 <script src="路径/jquery.js"></script>

联网的方法（CDN）：
官网jquery压缩版引用地址（以3.0版本为例子，早期请使用2版本，兼容特别老的使用1版本）:

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>

百度压缩版引用地址:

<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

微软压缩版引用地址:

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>

2.使用
在如图所示部分（//代码部分）添加代码，至于为什么这么写？因为jQuery的本质是js，将函数封装起来供我们使用，使用类似于java里面import一个包然后在调用相关函数，属于定义写法。

<script type="text/javascript" src="../static/js/jquery-3.5.1.js"
            charset="UTF-8">
    </script>
    <script>
//代码部分
    </script>

举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery的引用</title>
<!--    <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>-->
    <script type="text/javascript" src="../static/js/jquery-3.5.1.js"
            charset="UTF-8">
    </script>
    <script>
        $(function(){
            alert("加载jQuery");
        })
    </script>
</head>
<body>

<div>加载DIV</div>

</body>
</html>