index.html里如何引用jQuery插件？-html教程-PHP中文网

jquery必须在所有插件之前加载，且插件调用需在dom就绪后执行；推荐使用cdn（如cdnjs）引入3.x版本，本地文件仅限离线或合规场景，css需单独引入head中，加载失败需检查网络、csp及版本兼容性。

index.html里如何引用jquery插件？

直接在 index.html 里用 <script></script> 标签引入 jQuery 和插件文件，但顺序和加载时机必须严格满足依赖关系——jQuery 必须在所有插件之前加载，且插件代码不能早于 DOM 就绪。

jQuery 本身怎么引入？CDN 还是本地文件？

优先用稳定 CDN（比如官方推荐的 cdnjs 或 jsDelivr），省去本地托管和版本管理负担。本地文件只在离线开发或有强合规要求时才选。

CDN 示例（推荐放在底部或最底部）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

本地引入需确认路径正确，比如：
```
<script src="./js/jquery.min.js"></script>
```
，注意 ./js/ 是相对于 index.html 的位置
别用过时版本（如 1.x），现代浏览器下用 3.x；若需兼容 IE6–8，才考虑 1.12.4，但已不推荐

插件 JS 文件必须在 jQuery 之后、使用前加载

常见错误是把插件 <script></script> 放在 jQuery 前，或放在里但没等 DOM 就绪就调用插件方法，导致 $ is not defined 或 $(...).pluginName is not a function。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

正确顺序示例：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><br><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.2/jquery.modal.min.js"></script><br><script><br>  $(function() {<br>    $('#my-modal').modal(); // 确保 DOM 就绪后再调用<br>  });<br></script>

插件 CSS（如有）要单独引入，一般放里：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.2/jquery.modal.min.css">

某些插件（如 jquery-ui）还依赖其他模块（widget, mouse），得按文档查清依赖链，缺一不可

如何验证插件是否真的加载成功？

光看没报错不等于能用——得检查插件是否挂载到 $ 或 jQuery 对象上，以及是否支持当前 jQuery 版本。

在浏览器控制台手动测试：

typeof $.modal // 应返回 "function"（以 modal 插件为例）<br>typeof $.datepicker // 若用了 UI，应为 "function"

如果返回 "undefined"，先确认网络面板里插件 JS 是否 200 加载成功，再检查是否被 CSP 策略拦截（尤其用内联 script 调用时）
部分插件（如老版 jquery.form）不兼容 jQuery 3.x 的 Deferred，会静默失败——得查插件 GitHub Issues 或换用 axios + 原生表单提交替代

真正容易卡住的点不在“怎么写标签”，而在插件与 jQuery 主版本的隐式兼容性、CSS 是否漏引、以及 DOM 就绪时机是否被忽略。特别是多人协作时，有人把初始化代码塞进里的自执行函数，而插件 JS 还在加载中，这种竞态问题不会报错，但功能就是不生效。