jQuery是一个非常流行的javascript库,WordPress集成了jQuery,为了兼容其它的js库,WordPress集成jQuery的时候使用了jQuery的noConflict模式,把jQuery的变量`$`释放出来了。也就是说,不经过任何处理,直接在WordPress中用这样的写法写jQuery代码是不行的。
$("#some-element").addClass("some-class");
经常会有朋友在往WordPress主题中添加jQuery代码时会遇到这样的错误:`Uncaught TypeError: undefined is not a function `,就是因为没有jQuery的`$`变量。其实解决起来也简单,只需要把jQuery代码中的`$`修改成`jQuery`就可以了。如下:
jQuery("#some-element").addClass("some-class");
如果jQuery代码比较少,这样修改一下不是什么问题,可是如果代码很多的话,这样写起来会很累,有没有办法能在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");
});
3 thoughts on “在 WordPress 中正确使用 jQuery 的方式”
解决了长期以来困扰我的问题,非常感谢!
天啊原來是這樣!怪不得我以前怎麼換版本都不行,還一直以為是版本相衝突,太感恩了!!把$換成jQuery就成了!
請教一下如果自己把jQuery重新赋给`$`的話會不會有什麼潛在問題呢?想說WordPress這麼做應該是有理由的吧?
謝謝~ 🙂
WordPress这样做是为了兼容其他js类库,把jQuery重新赋给$会引起一些兼容性问题,不过大多数情况下不会出现这种问题,因为大多数情况下,我们都是用的jQuery。