$未定義錯誤使用jQuery和谷歌代碼庫

Question

我想從jQuery網站複製標籤演示。我正在使用的示例頁面是：http://yazminmedia.com/playground/jquerytabs.html

我想使用Google代碼庫來利用緩存。我在我的頁面的頭部下面的代碼：

<script type="text/javascript" src="http://www.google.com/jsapi"></script> 

<script type="text/javascript"> 
google.load("jquery", "1"); 
google.load("jqueryui", "1"); 

$(function() { 
    $("#tabs").tabs(); 
}); 
</script> 

不過，我不斷收到以下錯誤 - 「$沒有定義」下面一行：

$(function() { 

沒有人有任何想法可能會發生什麼導致錯誤？

謝謝！

Answer 1

google.load注入一個腳本元素對的，我加入這個腳本的每一頁

<script language="javascript" type="text/javascript"> 
    $j = jQuery.noConflict(); 
</script> 

逃脫了它本身之後。因此，在該腳本標記出現的順序是：

// google loads first 
<script src="http://www.google.com/jsapi"></script> 

// ask "google" to load jQuery and jQuery UI 
<script> 
    google.load("jquery", "1"); 
    google.load("jqueryui", "1"); 

    // try to use $ 
    $(function() { 
     $("#tabs").tabs(); 
    }); 
</script> 

// But, jQuery gets included here (after its usage) 
<script src="jquery.min.js"></script> 

// and jQuery UI gets included here 
<script src="jquery-ui.min.js"></script> 

由於$使用出現包含在文檔順序之前的jQuery，$不會在第二步定義。

解決方案是拆分腳本標記，以便google.load語句顯示在其自己的腳本標記中。因此，相反，如果你替換代碼：

<script> 
    google.load("jquery", "1"); 
    google.load("jqueryui", "1"); 
</script> 

<script> 
    $(function() { 
     $("#tabs").tabs(); 
    }); 
</script> 

文檔中的腳本標記的順序現在是：

// first google loads 
<script src="http://www.google.com/jsapi"></script> 

// then we ask "google" to load jQuery and jQuery UI 
<script> 
    google.load("jquery", "1"); 
    google.load("jqueryui", "1"); 
</script> 

// jQuery loads 
<script src="jquery.min.js"></script> 

// jQuery UI loads 
<script src=".../jquery-ui.min.js"></script> 

// now our script can run smoothly 
<script> 
    $(function() { 
     alert($("h1").text()); 
    }); 
</script> 

注意，現在包含jQuery代碼腳本元素的jQuery後出現，所以你的代碼應該工作，而$或jQuery應該從那個點開始定義。

---

然而，不是依靠google的加載順序的行爲，更好的解決方法是使用直接鏈接的庫，或使用回調。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script> 
<script> 
    // your jQuery code follows 
</script> 

或者，使用的onLoad回調：

google.load("jquery", "1"); 
google.load("jqueryui", "1"); 

google.setOnLoadCallback(function() { 
    // jQuery should be define here 
    $(function() { 
     alert($("h1").text()); 
    }); 
}); 

Answer 2

出於某種原因，我得到了同樣的錯誤

然後使用

$j("#tabs").tabs();