解决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 相关文章推荐
基于jquery的固定表头和列头的代码
May 03 Javascript
完美解决IE低版本不支持call与apply的问题
Dec 05 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
Mar 13 Javascript
jQuery实现统计复选框选中数量
Nov 24 Javascript
JavaScript更改字符串的大小写
May 07 Javascript
jQuery动态创建元素以及追加节点的实现方法
Oct 20 Javascript
canvas红包照片实例分享
Feb 28 Javascript
Vue2.0如何发布项目实战
Jul 27 Javascript
微信小程序switch组件使用详解
Jan 31 Javascript
详解微信小程序中var、let、const用法与区别
Jan 11 Javascript
JS如何在不同平台实现多语言方式
Jul 16 Javascript
Vue中的this.$options.data()和this.$data用法说明
Jul 26 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
检查url链接是否已经有参数的php代码 添加 ? 或 &
2010/02/09 PHP
php常用字符串处理函数实例分析
2014/11/22 PHP
使用XHProf查找PHP性能瓶颈的实例
2017/12/13 PHP
PHP基于curl模拟post提交json数据示例
2018/06/22 PHP
jQuery 1.0.2
2006/10/11 Javascript
JQuery实现的在新窗口打开链接的方法小结
2010/04/22 Javascript
jsonp原理及使用
2013/10/28 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
2014/09/10 Javascript
JavaScript获取网页中第一个链接ID的方法
2015/04/03 Javascript
Javascript递归打印Document层次关系实例分析
2015/05/15 Javascript
javascript中传统事件与现代事件
2015/06/23 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
2016/05/31 Javascript
简单谈谈React中的路由系统
2017/07/25 Javascript
详解使用vuex进行菜单管理
2017/12/21 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
2018/08/30 Javascript
JavaScript中CreateTextFile函数
2020/08/30 Javascript
JavaScript获取时区实现过程解析
2020/09/24 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
2020/11/10 Javascript
python中实现定制类的特殊方法总结
2014/09/28 Python
解读Python中degrees()方法的使用
2015/05/18 Python
python if not in 多条件判断代码
2016/09/21 Python
django使用图片延时加载引起后台404错误
2017/04/18 Python
python2和python3在处理字符串上的区别详解
2019/05/29 Python
Python中求对数方法总结
2020/03/10 Python
Python应用实现双指数函数及拟合代码实例
2020/06/19 Python
艺术用品:Arteza
2018/11/25 全球购物
美国最佳选择产品网站:Best Choice Products
2019/05/27 全球购物
家长给小学生的评语
2014/01/30 职场文书
会计电算化大学生职业规划书
2014/02/05 职场文书
婚礼女方父母答谢词
2015/01/04 职场文书
应急管理工作总结2015
2015/05/04 职场文书
家长会开场白和结束语
2015/05/29 职场文书
同步小康驻村工作简报
2015/07/20 职场文书
python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析
2021/04/14 Python
golang gopm get -g -v 无法获取第三方库的解决方案
2021/05/05 Golang
阿里云服务器(windows)手动部署FTP站点详细教程
2022/08/05 Servers