注入 JQuery——一行开关让脚本操作 DOM 更轻松

为什么要注入 JQuery

很多开发者写 JS 注入脚本时，用原生 document.querySelectorAll() 觉得啰嗦——写一句 $('#content').hide() 比 document.getElementById('content').style.display = 'none' 短很多。

PakePlus 提供了一个勾选框叫"注入 JQ"，打开后会自动往目标网页里加载 JQuery 库（通常是压缩版的 jquery.min.js），之后你的 JS 注入脚本里就能直接用 $() 了。

怎么开

在软件配置页面的脚本相关区域，有一个叫"注入 JQ"的复选框——勾选就行。不用手动选 JQuery 文件，PakePlus 自带。

开启后能做什么

DOM 选择更简洁

// 原生 JS（啰嗦）
document.querySelectorAll('.ad-banner, .sidebar-ad').forEach(el => {
  el.style.display = 'none';
});

// 开了 JQuery 后（简洁）
$('.ad-banner, .sidebar-ad').hide();

链式操作

// 原生 JS（每步要重新选元素）
const el = document.getElementById('content');
el.classList.add('highlight');
el.setAttribute('data-custom', 'pakeplus');
el.style.fontSize = '18px';

// 开了 JQuery 后（链式，一次选中做一堆事）
$('#content').addClass('highlight').attr('data-custom', 'pakeplus').css('font-size', '18px');

事件绑定更方便

// 原生 JS
document.querySelector('#btn').addEventListener('click', () => {
  console.log('clicked');
});

// 开了 JQuery 后
$('#btn').on('click', () => console.log('clicked'));

AJAX 请求

// 原生 JS（fetch 或 XMLHttpRequest 要写不少）
fetch('/api/data').then(r => r.json()).then(console.log);

// 开了 JQuery 后（注意 CORS 还是有限制）
$.get('/api/data', data => console.log(data));

JQuery 在什么时机加载

PakePlus 的注入顺序大致是：

目标网页 HTML 加载
JQuery 库注入（如果勾选了"注入 JQ"）
你的自定义 JS 注入脚本执行

所以你的 JS 注入脚本执行时，$ 变量已经存在了，可以直接用。

但要注意：JQuery 可能和目标网页冲突

这是注入 JQuery 最容易踩的坑。目标网页如果已经加载了自己版本的 JQuery：

情况	后果
目标网页用了 JQuery	可能版本覆盖、插件不兼容、`$` 冲突
目标网页用了 `$.noConflict()`	PakePlus 注入的可能无效
目标网页的构建时排除了 JQuery	✅ 完全安全，放心注入

怎么避免冲突

如果你担心 $ 被覆盖，可以把脚本里用 jQuery 代替 $，或者用 .noConflict()：

// 在你的 JS 注入脚本开头加这一行
const $$ = jQuery.noConflict(true);

// 之后用 $$ 代替 $
$$('.ad-banner').hide();

什么时候该开 JQuery

场景	建议	原因
写 JS 注入脚本但不熟原生 API	✅ 开	`$()` 比 `querySelectorAll` 写起来舒服
目标网页是现代 React/Vue 项目	❌ 不建议开	React/Vue 自己管理 DOM，直接操作可能破坏其渲染状态
目标网页是传统 jQuery 站点	⚠️ 谨慎	可能版本冲突
只需要简单几个操作	❌ 原生也够用	引入 JQuery 增加运行时开销

JQuery 版本

PakePlus 内部用的是哪个版本的 JQuery 没有在文档里明确说明。但通常是最新稳定版的压缩版（jquery.min.js），体积约 30KB。

如果需要特定版本的 JQuery，也可以在"脚本文件"里自己加载——但注意不要和 PakePlus 注入的版本冲突。

注入 JQuery 和过滤元素的关系

如果只是想隐藏广告、改文字这些简单操作，优先用"过滤元素"配置（填 CSS selector 就行，不用写 JS）。JQuery 注入是写给需要更复杂 DOM 操作的场景准备的。