當原生js和jquery發(fā)生了沖突該怎么辦？在寫js的時候碰到了這樣的問題，找了很多答案，現(xiàn)在做一個總結(jié)：

原因一：我們應(yīng)該知道jquery和原生js的入口函數(shù)的加載模式是有所不同的，

js的入口函數(shù)是 window.onload = function(){? }

jquery的入口函數(shù)是$(document).ready(function(){ }) 和? $(function(){ })? ??$代表 jQuery?

這兩種加載方式的區(qū)別就在于js會等到DOM元素加載完畢，并且 元素中的 src 也加載完畢才會執(zhí)行；

jQuery 會等到DOMTree 解析完畢就執(zhí)行（也就是 瀏覽器知道DOM元素的你是個啥就好 不用知道你具體是啥）? 不會等到所有的DOM 元素解析加載完成時執(zhí)行。

原生JS 如果寫入了多個入口函數(shù)后面的入口函數(shù)會覆蓋前面的(存在多個時 會執(zhí)行最后一個)，使用JQuery寫入多個入口函數(shù)后面寫的入口函數(shù)不會覆蓋先寫的入口函數(shù)(存在多個時 會依次執(zhí)行)，當多個使用其它框架或者js包時$符號會在框架及包中 進行多次引用? 這樣 jQuery 中的$ 符號可能會失靈

解決方案1， 釋放$使用權(quán)? 在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之間發(fā)生了沖突，可以使用$.noConflict()方法來解決這個問題的。或者使用下面一小段代碼試試：

jQuery.noConflict();

(function($){

? $(function(){

? ? //將代碼放這里，同樣使用 $ 就能識別了? });

})(jQuery);

不過我在用的時候，用上述原因一并沒有解決我的問題，于是我繼續(xù)尋找答案，利用下面這個方法解決了問題。我在同時使用一段js代碼和jquery代碼的時候，js代碼的功能和jquery的功能總是只能實現(xiàn)其中一個。很納悶，我的代碼如下：

<script>

//以下是原生js實現(xiàn)垂直整屏輪播問題

? ? ? ? ? ? ? ? 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后直接跳轉(zhuǎn)至第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實現(xiàn)鼠標移入背景色消失，移出背景色進入問題

$(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()并沒有解決問題，后來自己看了一下代碼發(fā)現(xiàn)，原生js中也使用了?function $(id) {

? ? ? ? ? ? ? ? return document.getElementById(id);

? ? ? ? ? ? }

這樣的$符號，其實很多庫中也會使用這樣的符號，所以jquery為了避免沖突才特別的用了$.noConflict()這種方法來釋放對于$符號的控制權(quán)，但在我的代碼中怎么加都沒用。

其實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后直接跳轉(zhuǎn)至第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)");

? ? ? ? ? ? });

? ? ? ? ? ? });? ? ? ?