如何在Magento2页面及后台WYSIWYG编辑器中添加jQuery代码？

嘿，我来帮你搞定这个问题！Magento 2本身已经内置了jQuery，只不过它采用了noConflict()模式，直接用$会失效——这就是你之前不得不额外引入外部jQuery的原因。下面是两种不用额外引入就能正常运行代码的方法：

方法1：直接使用jQuery全名调用 #

因为Magento2的jQuery处于无冲突模式，全局的$不再指向它，所以我们可以直接用jQuery代替$来编写逻辑，代码示例如下：

<script>
    jQuery(function(){
        jQuery(".mybox").on("click", function(){
            // 在这里写入你的自定义代码 MY CODE *******
        });
    });
</script>

方法2：在自执行函数中重新映射$ #

如果还是习惯用$符号写代码，你可以通过自执行函数把jQuery重新赋值给$，这样既不会污染全局变量，又能保持你熟悉的写法：

<script>
    (function($){
        $(document).ready(function(){
            $(".mybox").on("click", function(){
                // 在这里写入你的自定义代码 MY CODE *******
            });
        });
    })(jQuery);
</script>

补充说明 #

Magento 2默认通过requireJS管理前端资源，已经在页面中加载了jQuery库，但为了避免和其他JS库的$变量冲突，启用了noConflict()模式。这意味着全局作用域里的$不再关联jQuery，所以你之前直接用$写的代码找不到对应的对象，才需要额外引入外部jQuery。上面两种方法都能直接调用Magento内置的jQuery，完全不需要额外引入。

内容的提问来源于stack exchange，提问作者Abilash Erikson