解決jquery插件沖突的問題
今天做了一個例子,用jquery和jquery插件 lightbox做了圖片浮動放大效果,沒有任何問題。
然后再加了一個 導航欄的js,結(jié)構(gòu)導航的js和圖片浮動放大的js發(fā)生了沖突,
要么就只有導航欄的js有效,要么就只有圖片浮動js有效。
結(jié)果上網(wǎng)搜了搜,解決辦法有如下
jQuery.noConflict()
概述
運行這個函數(shù)將變量$的控制權(quán)讓渡給第一個實現(xiàn)它的那個庫。
這有助于確保jQuery不會與其他庫的$對象發(fā)生沖突。
在運行這個函數(shù)后,就只能使用jQuery變量訪問jQuery對象。例如,在要用到$("div p")的地方,就必須換成jQuery("div p")。
'''注意:'''這個函數(shù)必須在你導入jQuery文件之后,并且在導入另一個導致沖突的庫'''之前'''使用。當然也應當在其他沖突的庫被使用之前,除非jQuery是最后一個導入的。示例
描述:
將$引用的對象映射回原始的對象。
jQuery 代碼:
jQuery.noConflict();
// 使用 jQuery
jQuery("div p").hide();
// 使用其他庫的 $()
$("content").style.display = 'none';
描述:
恢復使用別名$,然后創(chuàng)建并執(zhí)行一個函數(shù),在這個函數(shù)的作用域中仍然將$作為jQuery的別名來使用。在這個函數(shù)中,原來的$對象是無效的。這個函數(shù)對于大多數(shù)不依賴于其他庫的插件都十分有效。
jQuery 代碼:
jQuery.noConflict();
(function($) {
$(function() {
// 使用 $ 作為 jQuery 別名的代碼
});
})(jQuery);
// 其他用 $ 作為別名的庫的代碼描述:
創(chuàng)建一個新的別名用以在接下來的庫中使用jQuery對象。
jQuery 代碼:
var j = jQuery.noConflict();
// 基于 jQuery 的代碼
j("div p").hide();
// 基于其他庫的 $() 代碼
$("content").style.display = 'none';
jQuery.noConflict();
(function($) {
$(function() {
// 使用 $ 作為 jQuery 別名的代碼 我把導航的js代碼寫在這中間就行了
});
})(jQuery);
// 其他用 $ 作為別名的庫的代碼
相關文章
一文讀懂JS中的var/let/const和暫時性死區(qū)
這篇文章主要為大家詳細介紹了JavaScript中的var、let、const和暫時性死區(qū)的異同,文中的示例代碼講解詳細,感興趣的小伙伴可以了解一下2023-02-02
JS實現(xiàn)把鼠標放到鏈接上出現(xiàn)滾動文字的方法
這篇文章主要介紹了JS實現(xiàn)把鼠標放到鏈接上出現(xiàn)滾動文字的方法,涉及JavaScript響應鼠標事件動態(tài)操作頁面元素的相關技巧,需要的朋友可以參考下2016-04-04
基于JavaScript實現(xiàn)Json數(shù)據(jù)根據(jù)某個字段進行排序
這篇文章主要介紹了基于JavaScript實現(xiàn)Json數(shù)據(jù)根據(jù)某個字段進行排序的相關資料,需要的朋友可以參考下2015-11-11
JavaScript實現(xiàn)簡單版的留言發(fā)布與刪除
這篇文章主要介紹了如何通過JavaScript實現(xiàn)簡單的留言板功能:留言的發(fā)布與刪除。文中的示例代碼講解詳細,感興趣的小伙伴可以學習一下2022-03-03

