在头部使用不带脚本标签的jQuery

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。jQuery 的核心特性可以让你更便捷地处理 HTML 文档、处理事件、创建动画效果，并且方便地进行 Ajax 交互。

类型

jQuery 主要有以下几种类型：

完整版：包含所有功能，适用于开发和生产环境。
压缩版：去除注释和空格，减小文件大小，适用于生产环境。
精简版：只包含核心功能，适用于对体积要求极高的场景。

应用场景

DOM 操作：方便地选择、添加、删除和修改 DOM 元素。
事件处理：简化事件绑定和解绑。
动画效果：创建平滑的动画效果。
Ajax 交互：简化 Ajax 请求和响应处理。

问题及解决方法

问题：在头部使用不带脚本标签的 jQuery

如果你想在 HTML 头部使用不带脚本标签的 jQuery，可以通过以下几种方式实现：

使用 CDN 引入：在 HTML 头部添加以下代码，通过内容分发网络（CDN）引入 jQuery：
使用 CDN 引入：在 HTML 头部添加以下代码，通过内容分发网络（CDN）引入 jQuery：
本地引入：将 jQuery 文件下载到本地，然后在 HTML 头部引入：
本地引入：将 jQuery 文件下载到本地，然后在 HTML 头部引入：
使用模块打包工具：如果你使用的是现代前端开发工具（如 Webpack、Rollup 等），可以通过模块打包工具引入 jQuery：
使用模块打包工具：如果你使用的是现代前端开发工具（如 Webpack、Rollup 等），可以通过模块打包工具引入 jQuery：

示例代码

以下是一个简单的示例，展示如何在 HTML 头部引入 jQuery 并使用它：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="myButton">Click me!</button>

    <script>
        $(document).ready(function() {
            $('#myButton').click(function() {
                alert('Button clicked!');
            });
        });
    </script>
</body>
</html>