在 WordPress 中正确使用 jQuery 的方式

JavaScript库：jQuery在WordPress中的应用

我是一个学习前端开发的小本本，最近开始学习使用WordPress来搭建网站。在学习过程中，经常需要使用JavaScript库jQuery来实现页面效果，但是发现在WordPress中直接使用jQuery会出现问题。

原因是WordPress集成了jQuery，但是使用了jQuery的noConflict模式，导致jQuery的变量`$`无法直接使用，直接在WordPress中用这样的写法写jQuery代码是不行的。

$("#some-element").addClass("some-class");

在往WordPress主题中添加jQuery代码时会遇到这样的错误：`UncaughtTypeError:undefinedisnotafunction`，就是因为没有jQuery的`$`变量。解决起来也很简单，只需要把jQuery代码中的`$`修改成`jQuery`即可。

jQuery("#some-element").addClass("some-class");

但是如果代码很多的话，这样写起来会很麻烦，有没有办法能够在WordPress中像正常写jQuery代码的方法写jQuery代码呢？下面介绍几种方法。

在WordPress中正常使用jQuery的几种方法

1、添加$变量

由于WordPress已经把`$`释放出来了，我们可以重新把jQuery赋给`$`。在wp_head之后添加以下一段代码即可。

var$=jQuery.noConflict();

2、使用匿名函数

首先定义匿名函数，设置形参为`$`，然后执行函数传递实参给jQuery。

(function($){
	$("#some-element").addClass("some-class");
})(jQuery);

3、使用jQuery设置加载页面时执行的函数

jQuery(document).ready(function($){
	$("#some-element").addClass("some-class");
});

以上三种方法都可以解决在WordPress中使用jQuery时无法直接使用`$`的问题，只需要根据自己的需求选择一种即可。

扫码添加UTHEME微信为好友

· 分享WordPress相关技术文章，主题上新与优惠动态早知道。
· 微信端最大WordPress社群，限时免费入群。