当原生js和jquery发生了冲突该怎么办？在写js的时候碰到了这样的问题，找了很多答案，现在做一个总结：
原因一：我们应该知道jquery和原生js的入口函数的加载模式是有所不同的，
js的入口函数是 window.onload = function(){ }
jquery的入口函数是$(document).ready(function(){ }) 和 $(function(){ }) $代表 jQuery
这两种加载方式的区别就在于js会等到DOM元素加载完毕，并且 元素中的 src 也加载完毕才会执行；
jQuery 会等到DOMTree 解析完毕就执行（也就是 浏览器知道DOM元素的你是个啥就好 不用知道你具体是啥） 不会等到所有的DOM 元素解析加载完成时执行。
原生JS 如果写入了多个入口函数后面的入口函数会覆盖前面的(存在多个时 会执行最后一个)，使用JQuery写入多个入口函数后面写的入口函数不会覆盖先写的入口函数(存在多个时 会依次执行)，当多个使用其它框架或者js包时$符号会在框架及包中 进行多次引用 这样 jQuery 中的$ 符号可能会失灵
解决方案1， 释放$使用权 在jQuery 代码前 写入 jQuery.noConflict(); 在这条代码之后的代码 $都该为jQuery $失效
//注意 释放操作必须放在编写其他 jQuery代码之前写入
写入后 jQuery的代码中的$ 被jQuery取代
jQuery.noConflict();
$(function () {
alert("a");
})
报错信息： Uncaught TypeError: $ is not a function
解决方案2，自定义访问符号
var jq = jQuery.noConflict(); //意义将$释放 改为使用jq
（此段文字原文链接：https://blog.csdn.net/qq_40159489/article/details/80746333）
所以如果说js和jquery之间发生了冲突，可以使用$.noConflict()方法来解决这个问题的。或者使用下面一小段代码试试：
jQuery.noConflict();
(function($){
$(function(){
//将代码放这里，同样使用 $ 就能识别了 });
})(jQuery);
不过我在用的时候，用上述原因一并没有解决我的问题，于是我继续寻找答案，利用下面这个方法解决了问题。我在同时使用一段js代码和jquery代码的时候，js代码的功能和jquery的功能总是只能实现其中一个。很纳闷，我的代码如下：
<script>
//以下是原生js实现垂直整屏轮播问题
function $(id) {
return document.getElementById(id);
}
//浏览器窗口高度
var windowHeight = 900;
var currentN = 1;
var currentTop = 0;
var scrollDirection = 1;
var clock;
window.onresize = function() {
windowHeight = document.documentElement.clientHeight;
}
window.onload = function() {
//获取浏览器窗口高度
windowHeight = document.documentElement.clientHeight;
//主显DIV滚动事件处理
$("maindiv").onscroll = function() {
//获取当前滚动的顶线位置
var tempTop = $("maindiv").scrollTop;
//计算当前在第几个主画面
n = Math.round(tempTop / windowHeight) + 1;
radio(n);
//判断滚动方向
if (tempTop > currentTop) {
scrollDirection = 1;
} else if (tempTop < currentTop) {
scrollDirection = -1;
}
//滑动动画
clearInterval(clock);
clock = setInterval(animation, 1);
//每次滚动完毕将位置存入变量以供比较判断滚动方向
currentTop = $("maindiv").scrollTop;
//$("informationdiv").innerHTML="方向"+scrollDirection+" "+n+"th screen "+"scroll top of maindiv"+currentTop+" window height:"+windowHeight;
}
}
//选中第n个radio
function radio(n) {
$("radio" + n).checked = "true";
}
//点选RADIO后直接跳转至第n屏
function showScreen(n) {
radio(n);
var targetTop = (n - 1) * windowHeight;
$("maindiv").scrollTop = targetTop;
}
//分屏滑动动画效果
function animation() {
if (scrollDirection == 1) {
//上行
if ($("maindiv").scrollTop % windowHeight != 0) {
$("maindiv").scrollTop += 1;
} else {
clearInterval(clock);
}
}
if (scrollDirection == -1) {
//下行
if ($("maindiv").scrollTop % windowHeight != 0) {
$("maindiv").scrollTop -= 1;
} else {
clearInterval(clock);
}
}
}
//以下是jquery实现鼠标移入背景色消失，移出背景色进入问题
$(document).ready(function(){
$('#one').mouseenter(function(){
$('#one').css("background-color","rgb(79, 79, 210,0)");
}).mouseleave(function(){
$('#one').css("background-color","rgb(79, 79, 210,0.5)");
});
$('#two').mouseenter(function(){
$('#two').css("background-color","rgb(110, 235, 110,0)");
}).mouseleave(function(){
$('#two').css("background-color","rgb(110, 235, 110,0.5)");
});
$('#three').mouseenter(function(){
$('#three').css("background-color","rgb(56, 218, 210,0)");
}).mouseleave(function(){
$('#three').css("background-color","rgb(56, 218, 210,0.5)");
});
$('#four').mouseenter(function(){
$('#four').css("background-color","rgb(98, 221, 230,0)");
}).mouseleave(function(){
$('#four').css("background-color","rgb(98, 221, 230,0.5)");
});
});
</script>
上面这段代码我试了使用$.noConflict()并没有解决问题，后来自己看了一下代码发现，原生js中也使用了 function $(id) {
return document.getElementById(id);
}
这样的$符号，其实很多库中也会使用这样的符号，所以jquery为了避免冲突才特别的用了$.noConflict()这种方法来释放对于$符号的控制权，但在我的代码中怎么加都没用。
其实function $(id) 的意思就是要获取id，但是一直写document.getElementById( id )会是件非常麻烦的事情，所以就在最上面直接用了 function $(id) {
return document.getElementById(id);
}
这样一段代码，表示下面js文件中的$(id) 如 $("maindiv")就是获取到了id为maindiv的元素。
因此我们可以将$符号改成其他标识符，以改变这种冲突的情况。
可以用下面这段代码
var getId = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
取代掉 function $(id) {
return document.getElementById(id);
}
这段代码，即用getId(id)的方式来获取id，而不用 $(id)的方式来获取id，将这段改掉后，将原生js里所有$符号替换成getId即可。
即代码变成下面这样：
下面是具体代码，看着可能没有图那么清晰：
var getId = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
//浏览器窗口高度
var windowHeight = 900;
var currentN = 1;
var currentTop = 0;
var scrollDirection = 1;
var clock;
window.onresize = function() {
windowHeight = document.documentElement.clientHeight;
}
window.onload = function() {
//获取浏览器窗口高度
windowHeight = document.documentElement.clientHeight;
//主显DIV滚动事件处理
getId("maindiv").onscroll = function() {
//获取当前滚动的顶线位置
var tempTop = getId("maindiv").scrollTop;
//计算当前在第几个主画面
n = Math.round(tempTop / windowHeight) + 1;
radio(n);
//判断滚动方向
if (tempTop > currentTop) {
scrollDirection = 1;
} else if (tempTop < currentTop) {
scrollDirection = -1;
}
//滑动动画
clearInterval(clock);
clock = setInterval(animation, 1);
//每次滚动完毕将位置存入变量以供比较判断滚动方向
currentTop = getId("maindiv").scrollTop;
//$("informationdiv").innerHTML="方向"+scrollDirection+" "+n+"th screen "+"scroll top of maindiv"+currentTop+" window height:"+windowHeight;
}
}
//选中第n个radio
function radio(n) {
getId("radio" + n).checked = "true";
}
//点选RADIO后直接跳转至第n屏
function showScreen(n) {
radio(n);
var targetTop = (n - 1) * windowHeight;
getId("maindiv").scrollTop = targetTop;
}
//分屏滑动动画效果
function animation() {
if (scrollDirection == 1) {
//上行
if (getId("maindiv").scrollTop % windowHeight != 0) {
getId("maindiv").scrollTop += 1;
} else {
clearInterval(clock);
}
}
if (scrollDirection == -1) {
//下行
if (getId("maindiv").scrollTop % windowHeight != 0) {
getId("maindiv").scrollTop -= 1;
} else {
clearInterval(clock);
}
}
}
// 第二屏移入背景色消失效果
$(document).ready(function(){
$('#one').mouseenter(function(){
$('#one').css("background-color","rgb(79, 79, 210,0)");
}).mouseleave(function(){
$('#one').css("background-color","rgb(79, 79, 210,0.5)");
});
$('#two').mouseenter(function(){
$('#two').css("background-color","rgb(110, 235, 110,0)");
}).mouseleave(function(){
$('#two').css("background-color","rgb(110, 235, 110,0.5)");
});
$('#three').mouseenter(function(){
$('#three').css("background-color","rgb(56, 218, 210,0)");
}).mouseleave(function(){
$('#three').css("background-color","rgb(56, 218, 210,0.5)");
});
$('#four').mouseenter(function(){
$('#four').css("background-color","rgb(98, 221, 230,0)");
}).mouseleave(function(){
$('#four').css("background-color","rgb(98, 221, 230,0.5)");
});
});
网友评论