解决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 相关文章推荐
toString()一个会自动调用的方法
Feb 08 Javascript
jquery索引在使用中的一些困惑
Oct 24 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
Nov 29 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
Sep 05 Javascript
JavaScript中常用的验证reg
Oct 13 Javascript
Javascript实现页面滚动时导航智能定位
May 06 Javascript
关于在mongoose中填充外键的方法详解
Aug 14 Javascript
详解开发react应用最好用的脚手架 create-react-app
Apr 24 Javascript
使用webpack搭建vue项目实现脚手架功能
Mar 15 Javascript
解决layui数据表格table的横向滚动条显示问题
Sep 04 Javascript
layui数据表格 table.render 报错的解决方法
Sep 29 Javascript
Vue最新防抖方案(必看篇)
Oct 30 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 strcmp使用说明
2010/04/22 PHP
php字符串按照单词进行反转的方法
2015/03/14 PHP
PHP类的特性实例分析
2016/09/28 PHP
Yii2单元测试用法示例
2016/11/12 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
php UNIX时间戳用法详解
2017/02/16 PHP
PHP如何使用cURL实现Get和Post请求
2020/07/11 PHP
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
学习ExtJS form布局
2009/10/08 Javascript
基于jquery循环map功能的代码
2011/02/26 Javascript
js中符号转意问题示例探讨
2013/08/19 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
2014/11/28 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
jQuery表单事件实例代码分享
2016/08/18 Javascript
JavaScript省市区三级联动菜单效果
2016/09/21 Javascript
原生JS获取元素集合的子元素宽度实例
2016/12/14 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
js时间转换毫秒的实例代码
2019/08/21 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
2019/09/28 Javascript
React中获取数据的3种方法及优缺点
2020/02/18 Javascript
Python里隐藏的“禅”
2014/06/16 Python
Python EOL while scanning string literal问题解决方法
2020/09/18 Python
Python实现控制台进度条功能
2016/01/04 Python
浅谈django model postgres的json字段编码问题
2018/01/05 Python
浅谈Tensorflow模型的保存与恢复加载
2018/04/26 Python
Python设计模式之模板方法模式实例详解
2019/01/17 Python
Python中url标签使用知识点总结
2020/01/16 Python
python 写函数在一定条件下需要调用自身时的写法说明
2020/06/01 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
周生生珠宝香港官网:Chow Sang Sang(香港及海外配送)
2019/09/05 全球购物
法国购买二手电子产品网站:Asgoodasnew
2020/03/27 全球购物
请介绍一下WSDL的文档结构
2013/03/17 面试题
预备党员2014全国两会学习心得体会
2014/03/10 职场文书
学生不讲诚信检讨书
2014/09/29 职场文书
电话营销开场白
2015/05/29 职场文书