wordpress使用 jQuery 时不能直接用$

by zhuzhenPosted on

◆ 为什么WordPress 默认会把 jQuery 设置为无冲突模式？

在 JavaScript 开发中，很多库和框架都会使用 $ 符号作为一个便捷的标识符，比如 jQuery、Prototype.js 等。当多个库同时在一个页面中使用时，如果都使用 $ 作为主要标识符，就会产生冲突，因为在同一作用域内，$ 只能代表一个对象或函数。

WordPress 为了避免这种冲突，默认将 jQuery 设置为无冲突模式。在无冲突模式下，$ 不再是 jQuery 的别名，开发者不能直接使用 $ 来调用 jQuery 方法，而需要使用 jQuery 全名或者通过一些特定的方式来重新使用 $ 作为 jQuery 的别名。

假设在 WordPress 环境中，有以下简单的 JavaScript 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WordPress jQuery No Conflict Example</title>
</head>
<body>
    <button id="myButton">Click me</button>
    <script>
        // 尝试直接使用 $ 来绑定点击事件
        $('#myButton').on('click', function() {
            alert('Button clicked!');
        });
    </script>
</body>
</html>

在上述代码中，直接使用 $ 来选择 #myButton 元素并绑定点击事件。由于 WordPress 默认将 jQuery 设置为无冲突模式，$ 不再代表 jQuery，因此这段代码会抛出 Uncaught TypeError: $ is not a function 错误。

◆ 使用 jQuery 全名解决问题

将代码中的 $ 替换为 jQuery，就可以正常使用 jQuery 方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WordPress jQuery No Conflict Example</title>
</head>
<body>
    <button id="myButton">Click me</button>
    <script>
        // 使用 jQuery 全名来绑定点击事件
        jQuery('#myButton').on('click', function() {
            alert('Button clicked!');
        });
    </script>
</body>
</html>

在这个示例中，使用 jQuery 全名来选择 #myButton 元素并绑定点击事件，代码可以正常运行。