在google.load中使用jQuery

时间:2009-12-07 16:00:34

标签: javascript jquery

我正在尝试了解如何在使用Google CDN的google.load方法加载jQuery时使用jQuery。

将init代码放在setOnLoadCallback函数中效果很好但是标记中的事件处理程序的定义函数似乎不起作用。在下面的示例中,P按钮按预期工作,但Div按钮不执行任何操作。

是的,在这个例子中,我可以将div的onclick处理程序也放在setOnLoadCallback函数中,但这是否意味着所有 jQuery代码必须存在?

帮助?感谢

<p id="p">Content</p><button type="button" id="btn1">P</button>

<div id="div">Div</div><button type="button" id="btn2" onclick="btn2()">Div</button>

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

<script>

function btn2() {
 $("#div").toggle("slow");
}

google.load("jquery", "1.3.2");
google.setOnLoadCallback(function() {
$("#btn1").click(function () {
      $("p").toggle("slow");
});
});

</script>

3 个答案:

答案 0 :(得分:2)

将Google jsapi脚本调用和google.load放在文档中<head>的顶部。运行时,它只会输出

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" 
    type="text/javascript"></script> 

google.load的位置。

然后将所有jQuery代码放入其中:

$(function() {
    // all your jQuery code here
});

这是$(document).ready(function(){ });

的简写

答案 1 :(得分:0)

JQ的一个关键点是不引人注目,因此你不应该使用<element onclick="..."></element>。您应始终使用$(selector).click()。此外,您通常希望将其合并到单个$(document).ready();或外部脚本中。

答案 2 :(得分:0)

是的,如果你想以这种方式加载jQuery,你需要在setOnLoadCallback中包含所有jQuery代码。在该事件触发之前,无法保证jQuery脚本已加载,因此该函数之外的任何jQuery代码都可能无效。如果要在该事件之外定义jQuery代码,可以通过从Google的CDN URL加载jQuery而不是google.load()动态地加载jQuery。

来自Google CDN的jQuery网址如下所示:

http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

您可以像往常一样将其作为外部脚本资源包含在文档的头部。您仍然可以获得Google CDN的好处,因为大多数浏览器都会在该位置拥有jQuery的缓存副本(假设他们访问过另一个使用Google CDN的网站)。