解决jquery插件冲突的问题


Posted in Javascript onJanuary 23, 2014

今天做了一个例子,用jquery和jquery插件 lightbox做了图片浮动放大效果,没有任何问题。

然后再加了一个 导航栏的js,结构导航的js和图片浮动放大的js发生了冲突,

要么就只有导航栏的js有效,要么就只有图片浮动js有效。

结果上网搜了搜,解决办法有如下

jQuery.noConflict()

概述
运行这个函数将变量$的控制权让渡给第一个实现它的那个库。

这有助于确保jQuery不会与其他库的$对象发生冲突。

在运行这个函数后,就只能使用jQuery变量访问jQuery对象。例如,在要用到$("div p")的地方,就必须换成jQuery("div p")。

'''注意:'''这个函数必须在你导入jQuery文件之后,并且在导入另一个导致冲突的库'''之前'''使用。当然也应当在其他冲突的库被使用之前,除非jQuery是最后一个导入的。示例

描述:
将$引用的对象映射回原始的对象。

jQuery 代码:
jQuery.noConflict();
// 使用 jQuery
jQuery("div p").hide();
// 使用其他库的 $()
$("content").style.display = 'none';

描述:
恢复使用别名$,然后创建并执行一个函数,在这个函数的作用域中仍然将$作为jQuery的别名来使用。在这个函数中,原来的$对象是无效的。这个函数对于大多数不依赖于其他库的插件都十分有效。

jQuery 代码:
jQuery.noConflict();
(function($) {
  $(function() {
    // 使用 $ 作为 jQuery 别名的代码
  });
})(jQuery);
// 其他用 $ 作为别名的库的代码描述:
创建一个新的别名用以在接下来的库中使用jQuery对象。

jQuery 代码:
var j = jQuery.noConflict();
// 基于 jQuery 的代码
j("div p").hide();
// 基于其他库的 $() 代码
$("content").style.display = 'none';

jQuery.noConflict();
(function($) {
  $(function() {
    // 使用 $ 作为 jQuery 别名的代码  我把导航的js代码写在这中间就行了
  });
})(jQuery);
// 其他用 $ 作为别名的库的代码

Javascript 相关文章推荐
phpwind放自动注册方法
Dec 02 Javascript
Prototype使用指南之ajax
Jan 10 Javascript
javascript自然分类法算法实现代码
Oct 11 Javascript
解决Angular.Js与Django标签冲突的方案
Dec 20 Javascript
Javascript Function.prototype.bind详细分析
Dec 29 Javascript
微信小程序 Tab页切换更新数据
Jan 05 Javascript
实现div内部滚动条滚动到底部和顶部的代码
Nov 15 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
Mar 12 Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 Javascript
使用JavaScript解析URL的方法示例
Mar 01 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
Jan 16 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
Oct 18 Javascript
js实现日期级联效果
Jan 23 #Javascript
js日期、星座的级联显示代码
Jan 23 #Javascript
js根据日期判断星座的示例代码
Jan 23 #Javascript
jQuery中Dom的基本操作小结
Jan 23 #Javascript
利用js正则表达式验证手机号,email地址,邮政编码
Jan 23 #Javascript
js验证电话号码与手机支持+86的正则表达式
Jan 23 #Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
Jan 22 #Javascript
You might like
php面向对象全攻略 (五) 封装性
2009/09/30 PHP
PHP 写文本日志实现代码
2010/05/18 PHP
php后台多用户权限组思路与实现程序代码分享
2012/02/13 PHP
php中jQuery插件autocomplate的简单使用笔记
2012/06/14 PHP
深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
CURL状态码列表(详细)
2013/06/27 PHP
详解PHP对象的串行化与反串行化
2016/01/24 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
php提高脚本性能的4个技巧
2020/08/18 PHP
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
javascript打印html内容功能的方法示例
2013/11/28 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
js实现页面刷新滚动条位置不变
2016/11/27 Javascript
Vue2 使用 Echarts 创建图表实例代码
2017/05/18 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
2017/08/17 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
2017/12/07 Javascript
解决vue-cli创建项目的loader问题
2018/03/13 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
2018/05/03 Javascript
浅谈webpack 构建性能优化策略小结
2018/06/13 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
2018/10/28 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
基于Vue中的父子传值问题解决
2020/07/27 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
Python 装饰器使用详解
2017/07/29 Python
Python实现带参数与不带参数的多重继承示例
2018/01/30 Python
用Django实现一个可运行的区块链应用
2018/03/08 Python
使用python将图片按标签分入不同文件夹的方法
2018/12/08 Python
python使用phoenixdb操作hbase的方法示例
2019/02/28 Python
详解Python 切片语法
2019/06/10 Python
ipython和python区别详解
2019/06/26 Python
pycharm下配置pyqt5的教程(anaconda虚拟环境下+tensorflow)
2020/03/25 Python
教师远程培训感言
2014/03/06 职场文书
市场营销专业求职信
2014/06/17 职场文书
对党的十八届四中全会的期盼
2014/10/17 职场文书