两个js冲突怎么解决?试试这四个方法

  两个js冲突很让前端头疼,虽然jquery是通用的,但调用不同经常会出问题。jQuery是目前流行的JS封装包,简化了很多复杂的JS程序,JQuery讲浏览器DOM树定义为$,通过$来获取各个子节点。JS插件还有prototype.js 等,它们也算比较好的插件,也使用$。所以有时候同时使用这个两个JS插件的时候,就会出现$的使用权冲突问题。两个js冲突怎么解决?试试下面四个方法

  我们都知道JQuery有一个函数,jquery.noConflict() 它的作用是讲$的控制权转让出去。然后我们可以通过jQuery代替$来获取dom节点。

  方法一 

<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function(){ //使用jQuery
jQuery("p").click(function(){
alert( jQuery(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>

  方法二 ,我们可以通过noConflict()函数来定义一个快捷方式用来获取dom节点

<script type="text/javascript">
var $j = jQuery.noConflict(); //自定义一个比较短快捷方式
$j(function(){ //使用jQuery
$j("p").click(function(){
alert( $j(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>

  方法三 

<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function($){ //使用jQuery
$("p").click(function(){ //继续使用 $ 方法
alert( $(this).text() );
});
}); 
$("pp").style.display = 'none'; //使用prototype
</script>

  方法四 

<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
(function($){ //定义匿名函数并设置形参为$
$(function(){ //匿名函数内部的$均为jQuery
$("p").click(function(){ //继续使用 $ 方法
alert($(this).text());
});
});
})(jQuery); //执行匿名函数且传递实参jQuery
$("pp").style.display = 'none'; //使用prototype
</script>

  如果还出现错误,试一下调整js文件顺序

  最后推荐一个开源jQuery插件SuperSlide,他在官网上的介绍是这样的:SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。   网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解决!   从此无需网上苦苦寻觅特效,无需加载n个插件,无需害怕代码冲突,你需要的只是一个SuperSlide!   还可以多个SuperSlide组合创造更多效果哦~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HaHack

学习 React Native for Android:React 基础

1102
来自专栏SeanCheney的专栏

《Learning Scrapy》(中文版)第2章 理解HTML和XPath使用Chrome浏览器获得XPath表达式常见工作提前应对网页发生改变

为了从网页提取信息,了解网页的结构是非常必要的。我们会快速学习HTML、HTML的树结构和用来筛选网页信息的XPath。 HTML、DOM树结构和XPath 从...

28712
来自专栏练小习的专栏

可视化格式模型-定位系统

CSS2.1中,一个框(box,就是元素形成的方块等)可以根据三种定位体系布局。 常规流(Normal flow) 常规流,是对 normal flow的直译。...

1706
来自专栏王磊的博客

史上最易懂——ReactNative分组列表SectionList使用详情及示例详解

React Native系列 《逻辑性最强的React Native环境搭建与调试》 《ReactNative开发工具有这一篇足矣》 《解决React N...

68714
来自专栏何俊林

FFmpeg实现多段小视频合成

1772
来自专栏编程心路

Bootstrap学习文档(四)

注意: 1、弹出层必需放在body里 2、弹出层里面不能再嵌套别的层 3、弹出层出来以后,页面的滚动条会被覆盖

812
来自专栏前端侠2.0

表格内,设置许多元素的大小时,js的速度慢的办法

思路1:设置td为relative,input为absolute,然后设置input大小为td的大小。

862
来自专栏韩东吉的Unity杂货铺

零基础入门 41:Hierarchy也可以这样玩

上一篇给大家说了下Inspector如何禁用RectTransform属性修改的做法,今天就来分享下对Hierarchy的另一种操作。

785
来自专栏柠檬先生

html5语义化标签——回顾

html5 头部结构    <!doctype html>     <meta charset=“utf-8”/> <header></header> 页眉 ...

2178
来自专栏DeveWork

解决WordPress文章密码保护在首页(摘要)不起作用

如果你碰到这个问题,就说明你的主题还不够完善。是的,之前Devework主题也是这样,但现在已经修复了。这类问题都是,首页的文章上如果是摘要显示的或者截断输出的...

1928

扫码关注云+社区