JavaScript 测试 jQuery

引入 jQuery 之后，第一件事往往是"测试"它是否真的加载成功、能否正常使用。本节提供一套最简单的验证与冒烟测试方法，让你确认库可用之后，再放心地写业务代码。

验证 jQuery 是否加载

jQuery 加载成功后，会在全局挂出 jQuery 与 $ 两个函数，用 typeof 判断即可：

// 在引入 jQuery 后的浏览器控制台运行
console.log(typeof jQuery);        // 输出：function（加载成功）
console.log(typeof $);             // 输出：function（加载成功）
console.log(jQuery.fn.jquery);     // 输出：3.7.1（当前 jQuery 版本号）

第一个测试程序

完整的测试页面：引入 CDN 上的 jQuery，点击按钮后修改段落文本，能成功即说明库工作正常：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8"></head>
<body>
<button id="btn">点我测试</button>
<p id="msg">等待测试……</p>
<script src="https://example.com/jquery.min.js"></script>
<script>
$(document).ready(function () {        // 页面 DOM 就绪后执行
    $('#btn').click(function () {
        $('#msg').text('jQuery 测试成功！');
    });
});
</script>
</body>
</html>

浏览器效果：点击按钮后，段落文字由"等待测试……"变为"jQuery 测试成功！"。

常见自测写法

$() 里放 CSS 选择器取元素：$('#id') 取 id、$('.class') 取类、$('p') 取标签。
用 .length 查看匹配到几个元素，可判断选择器是否写对：

console.log($('p').length);    // 输出：1（页面里有 1 个 p）
console.log($('#msg').length); // 输出：1（id 为 msg 的元素存在）

事件、样式、内容变更各测一条，链路通畅即说明库可用。

版本与 $ 冲突处理

同一页面使用多个库时，$ 可能被其他库占用。jQuery 提供 noConflict() 释放 $，改用自定义变量：

var jq = jQuery.noConflict(); // 把 $ 让给其他库
jq(function () {
    jq('#msg').text('改用 jq 仍然可用');
});
console.log(typeof $); // 输出：undefined（$ 已被释放）

小结：用 typeof 检查全局对象，再做一个"点击按钮改文字"的冒烟测试，就能确认 jQuery 加载成功、语法可用。记住 noConflict() 可以解决与其他库之间的 $ 冲突。

笔记加载中…

标签：#JavaScript

返回知识库