为何jQuery 3.7的text()方法失效，3.6.4中却可正常运行？

核心原因 #

WordPress自带的jQuery默认开启了noConflict模式——这是WordPress为避免jQuery和其他JavaScript库（比如Prototype、MooTools等）的$别名冲突做的设置。在这个模式下，全局$变量不再指向jQuery对象，你代码里的$("button")、$("p")这类写法会因$未定义而失效，自然text()方法也无法执行。

而你额外引入的第三方jQuery 3.6.4没有启用noConflict模式，$能正常映射到jQuery，所以代码可以正常运行。

解决办法（无需重复引入jQuery） #

只需要调整代码适配WordPress的noConflict规则就行，常用方式有三种：

方式1：把所有$替换成jQuery

直接使用jQuery的完整名称调用方法：

jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("Hello world!");
  });
});

方式2：在ready回调中传入$作为参数

利用jQuery(document).ready()的回调参数特性，把局部$映射到jQuery：

jQuery(document).ready(function($){
  // 这里的$是jQuery的局部别名，可正常使用
  $("button").click(function(){
    $("p").text("Hello world!");
  });
});

方式3：用自执行函数包裹代码

通过自执行匿名函数将$作为局部变量传入，避免全局冲突：

(function($){
  $(document).ready(function(){
    $("button").click(function(){
      $("p").text("Hello world!");
    });
  });
})(jQuery);

注意 #

不要同时加载多个版本的jQuery，这会引发版本冲突、冗余加载等问题，只用WordPress自带的jQuery即可。

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