1. 程式人生 > >jQuery中$符號衝突問題 (轉載)

jQuery中$符號衝突問題 (轉載)

     在Jquery中,$是JQuery的別名,所有使用$的地方也都可以使用JQuery來替換,如$('#msg')等同於JQuery('#msg') 的寫法。然而,當我們引入多個js庫後,在另外一個js庫中也定義了$符號的話,那麼我們在使用$符號時就發生了衝突。下面以引入兩個庫檔案 jquery.js和prototype.js為例來進行說明。
第一種情況:jquery.js在prototype.js之後進行引入,如:

<script src="prototype.js" type="text/javascript"/><script src="jquery.js" type
="text/javascript"/>


在這種情況下,我們在自己的js程式碼中如下寫的話:

$('#msg').hide();


$永遠代表的是jquery中定義的$符號,也可以寫成JQuery('#msg').hide();如果想要使用prototype.js中定義的$,我們在後面再介紹。


第二種情況:jquery.js在prototype.js之前進行引入,如:

<script src="jquery.js" type="text/javascript"/><script src="prototype.js" type="text/javascript
"/>


在這種情況下,我們在自己的js程式碼中如下寫的話:

$('#msg').hide();


$此時代表的prototype.js中定義的$符號,如果我們想要呼叫jquery.js中的工廠選擇函式功能的話,只能用全稱寫法JQuery('#msg').hide().

下面先介紹在第一種引入js庫檔案順序的情況下,如何正確的使用不同的js庫中定義的$符號。

一.使用JQuery.noConflict()
該方法的作用就是讓Jquery放棄對$的所有權, 將$的控制權交還給prototype.js,因為jquery.js是後引入的,所以最後擁有$控制權的是jquery。它的返回值是JQuery。當 在程式碼中呼叫了該 方法以後,我們就不可以使用$來呼叫jquery的方法了,此時$就代表在prototype.js庫中定義的$了。如下:

JQuery.noConflict();

//此處不可以再寫成$('#msg').hide(),此時的$代表prototype.js中定義的$符號。 JQuey('#msg').hide();


自此以後$就代表prototype.js中定義的$,jquery.js中的$無法再使用,只能使用jquery.js中$的全稱JQuery了。


二.自定義JQuery的別名
如果覺得第一種方法中使用了JQuery.noConflict()方法以後,只能使用JQuery全稱比較麻煩的話,我們還可以為JQuery重定義別名。如下:

var $j=JQuery.noConflict();
$j(
'#msg').hide();//此處$j就代表JQuery


自此以後$就代表prototype.js中定義的$,jquey.js中的$無法再使用,只能使用$j來作為jquey.js中JQuery的別名了。


三.使用語句塊,在語句塊中仍然使用jquery.js中定義的$,如下:

jQuery.noConflict();
jQuery(document).ready(function($){
$(
'#msg').hide();//此時在整個ready事件的方法中使用的$都是jquery.js中定義的$. });

或者使用如下語句塊:

(function($){
.....
$(
'#msg').hide();//此時在這個語句塊中使用的都是jquery.js中定義的$. })(jQuery)

 
如果在第二種引入js庫檔案順序的情況下,如何使用jquery.js中的$,我們還是可以使用上面介紹的語句塊的方法,如:

複製程式碼 程式碼 <script src="jquery.js" type="text/javascript"/><script src="prototype.js" type="text/javascript"/><script type="text/javascript">

(function($){
.....
$(
'#msg').hide();//此時在這個語句塊中使用的都是jquery.js中定義的$. })(jQuery)
</script> 複製程式碼


這種使用語句塊的方法非常有用,在我們自己寫jquery外掛時,應該都使用這種寫法,因為我們不知道具體工作過程中是如何順序引入各種js庫的,而這種語句塊的寫法卻能遮蔽衝突。

轉載自:http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729417.html

相關推薦

jQuery$符號衝突問題 轉載

     在Jquery中,$是JQuery的別名,所有使用$的地方也都可以使用JQuery來替換,如$('#msg')等同於JQuery('#msg') 的寫法。然而,當我們引入多個js庫後,在另外一個js庫中也定義了$符號的話,那麼我們在使用$符號時就發生了衝突。下面以引入兩個庫檔案 jquery.j

JQuery$.ajax()方法參數詳解轉載

瀏覽器 object 服務器 字符串 false type: 要求為String類型的參數,請求方式(post或get)默認為get。註意其他http請求方法,例如put和 delete也可以使用,但僅部分瀏覽器支持。timeout: 要求為Number類型的參數,設置請求超時時

HTML實體符號代碼速查表轉載

plus tro agg 小於號 times 問號 大於號 豎線 table 1.特色的 ? &copy; ? 版權標誌 | | 豎線,常用作菜單或導航中的分隔符 · &middot; · 圓點,有時被用來作為菜單分隔符 ↑ &

jQuery 實現表單驗證轉載

失去焦點 cli on() 獲得 itl 文本框 特殊 體驗 格式 jQuery 官方 API 地址: http://api.jquery.com/ 在線引用 jQuery:http://code.jquery.com/ ——選自《鋒利的jQuery》(第2版)第5章的

jquery$.ajax $.get $.post 和$.getJSON的區別和用法轉載

首先,.get和.get和.post其實都是.ajax的一種,在.ajax的一種,在.ajax中有一個type屬性,專門用來指定是get請求還是post請求的。如下:  $.ajax({  url:”路徑”,  type:”post/get”,  dataty

jquery ajax error函式和及其引數詳細說明轉載

使用jquery的ajax方法向伺服器傳送請求的時候,常常需要使用到error函式進行錯誤資訊的處理,本文詳細的說明了ajax中error函式和函式中各個引數的用法。一般error函式返回的引數有三個: function(jqXHR jqXHR, String textStatus, String error

Jquery的AjaxcontentType和dataType的區別轉載

上程式碼 $.ajax({ type: httpMethod, cache: false, contentType: "application/json; charset=utf-8", dataType: "json",//返回值型別 url: pa

轉載com.android.support衝突的解決辦法

All com.android.support libraries must use the exact same version specification (mixing versions can lead to runtime crashes 當我們使用andro

jQuery實現頁面滾動圖片按需載入轉載

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery scrolling</title>

Recycleview實現複雜頁面 三種以上佈局 瀑布流 多佈局 scrollview巢狀recyclerView 顯示不全 滑動衝突 之進階終極篇 轉載

=============================================================================================== 相信很多安卓開發的朋友,尤其是剛從事安卓開發的朋友, 當產品經理遞過來一張複雜頁面的

轉載How to create a mobile WordPress theme with jQuery Mobile

Last month, jQuery Mobile was released. This tool allows you to easily create mobile websites and web apps. In this tutorial, I’ll show

二、Linear Regression 練習轉載

hold off int 必須 html 移動 根據 which win from 轉載鏈接:http://www.cnblogs.com/tornadomeet/archive/2013/03/15/2961660.html 前言   本文是多元線性回歸的練習,這裏練習的

六、regularized logisitic regssion練習轉載

method open lose hold on update import 等高線 algo 2個 轉載鏈接:http://www.cnblogs.com/tornadomeet/archive/2013/03/17/2964858.html 在上一講Deep learn

SQLServer · BUG分析 · Agent 鏈接泄露分析轉載

空閑 doc ucc object bsp line existing rds 成功 背景 SQLServer Agent作為Windows服務提供給用戶定期執行管理任務,這些任務被稱為Job;考慮應用鏡像的場景如何解決Job同步問題,AWS RDS的做法是不予理會,由

最短路徑-Dijkstra算法轉載

ges 圖論 測試 log logs 表示 保存 依次 路徑 註意:以下代碼 只是描述思路,沒有測試過!! Dijkstra算法 1.定義概覽 Dijkstra(迪傑斯特拉)算法是典型的單源最短路徑算法,用於計算一個節點到其他所有節點的最短路徑。主要特點是以起始點為中心

最短路徑-Floyd算法轉載

進一步 數字 sdn 進行 無法 .net %d data scanf 暑假,小哼準備去一些城市旅遊。有些城市之間有公路,有些城市之間則沒有,如下圖。為了節省經費以及方便計劃旅程,小哼希望在出發之前知道任意兩個城市之前的最短路程。 上圖

linux最大文件句柄數量總結轉載

指定 which 非root cti 文件打開 可能 查看 mit value   最近部署上線的一個引擎,啟動之後內存、日誌顯示一切正常,但是外部無法進行引擎訪問。幾經周折,在同事的協助下,找出了問題:root用戶的open files為1024,引擎啟動時,1024個文

js window事件解析轉載

slow disable forward 建立 多選 1.0 參數 小程序 距離 js-window對象的方法和屬性資料 hxpd 發表於 2007-05-08 21:58:18 熟練window對象的open、close、alert、confirm、prompt、setT

WindowManager.LayoutParams 詳解轉載

鼠標 chang 結束 name ble edi status 條件 backup WindowManager.LayoutParams 是 WindowManager 接口的嵌套類;繼承於 ViewGroup.LayoutParams 。它的內容十分豐富。其實Window

牛頓法 轉載

article jpg ges plus images image 轉載 net logs 轉載鏈接:http://blog.csdn.net/itplus/article/details/21896453 (擬)牛頓法 (轉載)