解決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)文章
js實(shí)現(xiàn)支付倒計(jì)時(shí)返回首頁(yè)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)支付倒計(jì)時(shí)返回首頁(yè),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10
一文讀懂JS中的var/let/const和暫時(shí)性死區(qū)
這篇文章主要為大家詳細(xì)介紹了JavaScript中的var、let、const和暫時(shí)性死區(qū)的異同,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2023-02-02
Javascript 自適應(yīng)高度的Tab選項(xiàng)卡
選項(xiàng)卡的原理其實(shí)比較簡(jiǎn)單,就是設(shè)置2種狀態(tài),選中和未選中的2中不同CSS狀態(tài),因此也有直接不用JS之用css就能實(shí)現(xiàn)的效果2011-04-04
JS實(shí)現(xiàn)把鼠標(biāo)放到鏈接上出現(xiàn)滾動(dòng)文字的方法
這篇文章主要介紹了JS實(shí)現(xiàn)把鼠標(biāo)放到鏈接上出現(xiàn)滾動(dòng)文字的方法,涉及JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素的相關(guān)技巧,需要的朋友可以參考下2016-04-04
JavaScript實(shí)現(xiàn)圖片輪播的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)圖片輪播的方法,使用純javascript實(shí)現(xiàn)圖片輪播切換的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
基于JavaScript實(shí)現(xiàn)Json數(shù)據(jù)根據(jù)某個(gè)字段進(jìn)行排序
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)Json數(shù)據(jù)根據(jù)某個(gè)字段進(jìn)行排序的相關(guān)資料,需要的朋友可以參考下2015-11-11
JavaScript實(shí)現(xiàn)簡(jiǎn)單版的留言發(fā)布與刪除
這篇文章主要介紹了如何通過(guò)JavaScript實(shí)現(xiàn)簡(jiǎn)單的留言板功能:留言的發(fā)布與刪除。文中的示例代碼講解詳細(xì),感興趣的小伙伴可以學(xué)習(xí)一下2022-03-03
javascript對(duì)象的相關(guān)操作小結(jié)
下面小編就為大家?guī)?lái)一篇javascript對(duì)象的相關(guān)操作小結(jié)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05

