在 WordPress 中正确使用 jQuery 的方式

文 / @WordPress主题

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为好友
扫码添加UTHEME微信为好友
· 分享WordPress相关技术文章,主题上新与优惠动态早知道。
· 微信端最大WordPress社群,限时免费入群。