解決jquery插件沖突的問(wèn)題
今天做了一個(gè)例子,用jquery和jquery插件 lightbox做了圖片浮動(dòng)放大效果,沒(méi)有任何問(wèn)題。
然后再加了一個(gè) 導(dǎo)航欄的js,結(jié)構(gòu)導(dǎo)航的js和圖片浮動(dòng)放大的js發(fā)生了沖突,
要么就只有導(dǎo)航欄的js有效,要么就只有圖片浮動(dòng)js有效。
結(jié)果上網(wǎng)搜了搜,解決辦法有如下
jQuery.noConflict()
概述
運(yùn)行這個(gè)函數(shù)將變量$的控制權(quán)讓渡給第一個(gè)實(shí)現(xiàn)它的那個(gè)庫(kù)。
這有助于確保jQuery不會(huì)與其他庫(kù)的$對(duì)象發(fā)生沖突。
在運(yùn)行這個(gè)函數(shù)后,就只能使用jQuery變量訪問(wèn)jQuery對(duì)象。例如,在要用到$("div p")的地方,就必須換成jQuery("div p")。
'''注意:'''這個(gè)函數(shù)必須在你導(dǎo)入jQuery文件之后,并且在導(dǎo)入另一個(gè)導(dǎo)致沖突的庫(kù)'''之前'''使用。當(dāng)然也應(yīng)當(dāng)在其他沖突的庫(kù)被使用之前,除非jQuery是最后一個(gè)導(dǎo)入的。示例
描述:
將$引用的對(duì)象映射回原始的對(duì)象。
jQuery 代碼:
jQuery.noConflict();
// 使用 jQuery
jQuery("div p").hide();
// 使用其他庫(kù)的 $()
$("content").style.display = 'none';
描述:
恢復(fù)使用別名$,然后創(chuàng)建并執(zhí)行一個(gè)函數(shù),在這個(gè)函數(shù)的作用域中仍然將$作為jQuery的別名來(lái)使用。在這個(gè)函數(shù)中,原來(lái)的$對(duì)象是無(wú)效的。這個(gè)函數(shù)對(duì)于大多數(shù)不依賴于其他庫(kù)的插件都十分有效。
jQuery 代碼:
jQuery.noConflict();
(function($) {
$(function() {
// 使用 $ 作為 jQuery 別名的代碼
});
})(jQuery);
// 其他用 $ 作為別名的庫(kù)的代碼描述:
創(chuàng)建一個(gè)新的別名用以在接下來(lái)的庫(kù)中使用jQuery對(duì)象。
jQuery 代碼:
var j = jQuery.noConflict();
// 基于 jQuery 的代碼
j("div p").hide();
// 基于其他庫(kù)的 $() 代碼
$("content").style.display = 'none';
jQuery.noConflict();
(function($) {
$(function() {
// 使用 $ 作為 jQuery 別名的代碼 我把導(dǎo)航的js代碼寫在這中間就行了
});
})(jQuery);
// 其他用 $ 作為別名的庫(kù)的代碼
相關(guān)文章
Websocket通信協(xié)議在數(shù)字孿生中的應(yīng)用
這篇文章主要為大家介紹了Websocket通信協(xié)議在數(shù)字孿生中的應(yīng)用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07
javascript下過(guò)濾數(shù)組重復(fù)值的代碼
javascript下過(guò)濾數(shù)組重復(fù)值的代碼...2007-09-09
javascript命名約定(變量?函數(shù)?類?組件)
這篇小文章主要是通過(guò)一些例子來(lái)介紹一些Javascript中一些關(guān)于命名變量,函數(shù),類或者是組件的通用約定,雖然這些規(guī)則并不是強(qiáng)制性的,但是呢,他們卻被一些JS社區(qū)所廣泛采用,所以,了解他們還是很有必要的2023-03-03
用roll.js實(shí)現(xiàn)的圖片自動(dòng)滾動(dòng)+鼠標(biāo)觸動(dòng)的特效
用roll.js實(shí)現(xiàn)的圖片自動(dòng)滾動(dòng)+鼠標(biāo)觸動(dòng)的特效...2007-03-03
JS中將blob返回值轉(zhuǎn)換為json格式的問(wèn)題小結(jié)
這篇文章主要介紹了JS中如何將blob返回值轉(zhuǎn)換為json格式,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
javascript replace方法與正則表達(dá)式
replace方法的語(yǔ)法是:stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(string),reExp可以是正則表達(dá)式對(duì)象(RegExp)也可以是字符串(string),replaceText是替代查找到的字符串。。為了幫助大家更好的理解,下面舉個(gè)簡(jiǎn)單例子說(shuō)明一下2008-02-02
JS實(shí)現(xiàn)jQuery的append功能
jQuery中可以直接使用$el.append()為元素添加字符串型dom, 但是最近轉(zhuǎn)戰(zhàn)Vue, 再使用jQuery明顯不合適了, 所以通過(guò)查找資料, 封裝一個(gè)可以實(shí)現(xiàn)同樣效果的方法.2021-05-05

