Tampermonkey是一款允许用户在Web页面上运行自定义JavaScript的浏览器扩展程序。在编写Tampermonkey脚本时，我们可能需要使用jQuery库来方便地操作DOM、Ajax、事件处理等常见的前端任务。下面将介绍如何在Tampermonkey脚本中正确加载jQuery。
方法一：直接在脚本中嵌入jQuery
最简单的方法是直接将jQuery库的代码嵌入Tampermonkey脚本中，可以从jQuery官网下载对应版本的minified或uncompressed文件，并将其内容复制到Tampermonkey脚本中即可。
示例代码：
-- -------------- -- ----- -- ------------ ------ -- ---------- ----------------- -- -------- --- -- ------------ - ---- ------ -- ---- ------ -- ------------ -- ------ --------------------- -- ------ ---- -- --------------- -- ------ ---- ----
这种方法的优点是简单易行，无需借助第三方CDN或服务器，但缺点是增加了脚本的体积，可能会影响脚本的加载速度和页面性能。另外，如果需要多个Tampermonkey脚本都使用jQuery，则需要在每个脚本中都复制相同的代码，增加了冗余。
方法二：通过CDN引入jQuery
更好的方式是通过CDN（内容分发网络）引入jQuery库，这样可以利用缓存提高加载速度，并避免脚本体积过大的问题。常见的jQuery CDN有Google Hosted Libraries, Microsoft Ajax Content Delivery Network等。
示例代码：
-- -------------- -- ----- -- ------------ ------ -- ---------- ----------------- -- -------- --- -- ------------ - ---- ------ -- ---- ------ -- ------------ -- ------ --------------------- -- ------ ----------- -- -------- ----------------------------------------- -- --------------- -- ------ ---- ----
在上面的示例中，我们使用了jsDelivr提供的CDN服务来引入jQuery 3.6.0版本。注意，在使用CDN时需要保证网络连接正常，否则会无法加载库文件。
方法三：通过本地服务器引入jQuery
如果需要在没有外网连接或需要更灵活的情况下使用jQuery，则可以通过搭建本地服务器并将jQuery库文件放置在服务器中，然后在Tampermonkey脚本中通过AJAX请求加载库文件。
示例代码：
-- --------------
-- ----- -- ------------ ------
-- ---------- -----------------
-- -------- ---
-- ------------ - ---- ------ -- ---- ------ ---- ----- ------ -- ------------
-- ------ ---------------------
-- ------ -----------
-- ---------------
----------- -
---- --------
--- --------- - --------------------------------------------
-------- --------------- --------- -
--- ------ - ---------------------------------
----------- - ------------------
---------- - ----
------------- - ---------- - ----------- --
----------------------------------
-
--------------------- ---------- -
-- ------ ---- ----
---
-----在上面的示例中，我们通过AJAX请求加载了本地服务器中的jQuery库文件，并在成功加载后执行了回调函数。需要注意的是，在使用本地服务器时需要配置好服务器并确保正确的路径和端口。
总结
在Tampermonkey脚本中正确加载jQuery库对于前端开发者来说非常有价值，可以方便地进行DOM操作、Ajax和事件
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/13852