WordPress中的jQuery库不起作用的相关问题
WordPress 中的jQuery 库问题曾经困扰了我一段时间。如果仅仅加载WordPress 自带的jQuery 库,在使用一些jQuery 插件的时候明明是代码没有错误,但就是不起作用,该有的效果不能实现;但加载了原版的jQuery 库却又可以了,这样一来却同时加载了两个jQuery 库,网页速度拖慢了而且根本没有必要。
后来才了解到:为了防止与其他 JS 库(如 YUI)冲突,WordPress 内置 jQuery 库的末尾都在原版的基础上加入了 jQuery.noConflict()
这个东东,以至于在jQuery 代码中用$ 代替jQuery 的写法不能识别,一些功能不起作用的原因正是由此而来。
如何解决这个问题,网络上有以下解决方案:
方案一:将相关js代码中的$ 手动改为 jQuery。
比如原来的代码是:
$(document).ready(function(){ $("p").after("<b>Hello</b>"); }); |
---|
需要改为:
jQuery(document).ready(function(){ jQuery("p").after("<b>Hello</b>"); }); |
---|
方案二:不加载WordPress自带的jQuery 库,改用官方或者第三方的jQuery 库。
貌似WordPress 默认是加载自带的jQuery 库的,首先你要取消这个功能,使之在前台默认不加载自带的jQuery 库:
打开/wp-includes/script-loader.php文件,以“jquery.js”为关键词查找,在第127行能找到这么一句(以WordPress 3.5.1为例):
$scripts->add( 'jquery', '/wp-includes/js/jquery/jquery.js', array(), '1.8.3' ); |
---|
替换为:
if(is_admin()){$scripts->add( 'jquery', '/wp-includes/js/jquery/jquery.js', false, '1.8.3' );} |
---|
因为在后台必须得用到这个库,只能加个判断,让其只在后台下运行。
更新:如果查看源代码分享加载了WordPress 自带的jquery 库,那么肯定是主题或者插件加载的(非登录状态下),因此,按照下面的代码可予以取消(其实就开发而言,不建议这么做):
你的主题也可能加载也会加载WordPress 自带的jQuery 库。如果你想取消,就需要在主题文件中找到如下关键代码,删除或注销之:
wp_enqueue_script('jquery'); |
---|
当然,既然主题自动加载了,那肯定是有它的用处,如果删除了,一些主题功能可能会失效。
接下来就是改用官方或者第三方的jQuery 库,请直接参考:
《为你的WordPress 选择最佳的第三方jQuery 库》
我的话是两个都用上。
参考WordPress官方文档:zh-cn:函数参考/wp enqueue script
相关知识:jQuery 与Javascript 的关系 jQuery 是一个 JavaScript 函数库。jquery 对javascript进行扩展,封装,让javascript更好用,更简单。看过一个比喻:如果说JavaScript 是面条,那么jQuery 就是方便面——自己好好理解吧~
- jboss CLI 命令行接口学习(适用JBOSS EAP 6.2+)
- WebComponent魔法堂:深究Custom Element 之 面向痛点编程
- 修复bootstrap daterangepicker中的3个问题
- 搭建AngualarJS开发环境
- CSS魔法堂:重拾Border之——更广阔的遐想
- Jboss EAP:native management API学习
- linux:手动校准系统时间和硬件CMOS时间
- CSS3魔法堂:说说Multi-column Layout
- 数据可视化-EChart2.0使用总结2
- rpc框架之 thrift 学习 2 - 基本概念
- rpc框架之avro 学习 1 - hello world
- 探讨Android中的内置浏览器和Chrome
- java并发编程学习: 阻塞队列 使用 及 实现原理
- CSS魔法堂:说说Float那个被埋没的志向
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【pyspark】parallelize和broadcast文件落盘问题(后续)
- 【Tbase开源版测评】基于PostgreSQL的国产开源数据库初体验
- 聊聊RedisToken
- 【Ceph RGW】Bucket Sharding的设置
- 每日手撕一道算法-1143.最长公共子序列
- 理解JavaScript 中的执行上下文和执行栈
- Spring Boot 2.x基础教程:使用集中式缓存Redis
- 彻底理解 Cookie、Session、Token、JWT这些登录授权方法
- 本体入门(二):OWL 本体构建指南f
- LeetCode 刷题记录(三)
- LeetCode 刷题记录(二)
- Qt音视频开发11-ffmpeg常用命令
- 《SICP》读书笔记之一:构造过程抽象(上)
- 习题解答
- 通过实际案例摸清楚Spring事务传播的行为