如何在Google App Engine中使用Google Libraries API（jQuery）？

我想将此jQuery Hover effect加入我的网站。我决定使用Google Libraries API for jQuery来代替下载jQuery。我得到了一个键，并复制到头的代码，然后我复制了jQuery的悬停效果，但没有任何事情发生。我究竟做错了什么？ This is where my test page是以下是完整的代码和处理程序：如何在Google App Engine中使用Google Libraries API（jQuery）？

class JQueryTest(webapp.RequestHandler): 
    def get(self): 
     self.response.out.write("""<html>""") 
     self.response.out.write("""<head>""") 
     self.response.out.write("""<script type="text/javascript" src="https://www.google.com/jsapi?key=GOOGLE LIBRARIES API KEY"></script>""") 

     self.response.out.write("""<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> 

$("ul.thumb li").hover(function() { 
    $(this).css({'z-index' : '10'}); /*Add a higher z-index value so this image stays on top*/ 
    $(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/ 
     .animate({ 
      marginTop: '-110px', /* The next 4 lines will vertically align this image */ 
      marginLeft: '-110px', 
      top: '50%', 
      left: '50%', 
      width: '174px', /* Set new width */ 
      height: '174px', /* Set new height */ 
      padding: '20px' 
     }, 200); /* this value of "200" is the speed of how fast/slow this hover animates */ 

    } , function() { 
    $(this).css({'z-index' : '0'}); /* Set z-index back to 0 */ 
    $(this).find('img').removeClass("hover").stop() /* Remove the "hover" class , then stop animation queue buildup*/ 
     .animate({ 
    marginTop: '0', /* Set alignment back to default */ 
      marginLeft: '0', 
      top: '0', 
      left: '0', 
      width: '100px', /* Set width back to default */ 
      height: '100px', /* Set height back to default */ 
      padding: '5px' 
     }, 400); 
}); 
</script>""") 

     self.response.out.write("""<link type="text/css" rel="stylesheet" 
            href="/stylesheets/jquery.css" /> """) 
     self.response.out.write("""<title>JQuery Test</title>""") 
     self.response.out.write("</head>") 
     self.response.out.write("""<body>""") 
     self.response.out.write("""<div class="content">""") 

     self.response.out.write(""" 
     <ul class="thumb"> 
     <li><a href="#"><img src="http://ting-1.appspot.com/image?img_id=agZ0aW5nLTFyEAsSCEhvbWVQYWdlGIfcCww" alt="" /></a></li> 
     <li><a href="#"><img src="http://ting-1.appspot.com/image?img_id=agZ0aW5nLTFyEAsSCEhvbWVQYWdlGIyGCww" alt="" /></a></li> 
     <li><a href="#"><img src="http://ting-1.appspot.com/image?img_id=agZ0aW5nLTFyEAsSCEhvbWVQYWdlGIm1Cww" alt="" /></a></li> 
     <li><a href="#"><img src="http://ting-1.appspot.com/image?img_id=agZ0aW5nLTFyEAsSCEhvbWVQYWdlGM-dCww" alt="" /></a></li> 
     <li><a href="#"><img src="http://ting-1.appspot.com/image?img_id=agZ0aW5nLTFyEAsSCEhvbWVQYWdlGM6dCww" alt="" /></a></li> 
     <li><a href="#"><img src="http://ting-1.appspot.com/image?img_id=agZ0aW5nLTFyEAsSCEhvbWVQYWdlGIuGCww" alt="" /></a></li> 
     <li><a href="#"><img src="http://ting-1.appspot.com/image?img_id=agZ0aW5nLTFyEAsSCEhvbWVQYWdlGLrzCww" alt="" /></a></li> 
     <li><a href="#"><img src="http://ting-1.appspot.com/image?img_id=agZ0aW5nLTFyEAsSCEhvbWVQYWdlGLWlCww" alt="" /></a></li> 
     <li><a href="#"><img src="http://ting-1.appspot.com/image?img_id=agZ0aW5nLTFyEAsSCEhvbWVQYWdlGLWlCww" alt="" /></a></li> 
     </ul>""") 

     self.response.out.write("""</div>""") 
     self.response.out.write("</body></html>")

来源

2011-10-01 Zeynel

jQuery是加载这个页面上就好了，所以你的问题是在你的jQuery代码，有关谷歌jQuery的API或谷歌AppEngine上没有任何东西。当您尝试调试Javascript时，查看后端代码通常没有什么帮助 - 关注传递给浏览器的内容。 – nrabinowitz

尽管...您的代码在jsFiddle中运行良好，所以我可能会说得太快：http://jsfiddle.net/nrabinowitz/gdsxH/ – nrabinowitz

这实际上与App Engine没有任何关系。 –

你不是在$(document).ready()包装jQuery代码，所以DOM不会在你试图连接处理程序的时间还不存在。一般情况下，无论何时您需要在页面中引用DOM元素（而不是稍后定义要调用的函数），您都必须将其全部包装在回调函数.ready()中，以便它在DOM完全加载之前不会运行。试试这个：

$(function() { 
    $("ul.thumb li").hover(function() { 
      // ... 
     }, function() { 
      // ... 
     }); 
});

这应该工作 - 它在这里：http://jsfiddle.net/nrabinowitz/gdsxH/1/

来源

2011-10-01 20:15:06 nrabinowitz

JS也在加载jquery的脚本标记中。它应该是单独的，没有指定src。 – Greg

@ nrabinowitz和Greg：需要两个修复才能使其正常工作。谢谢！感谢参考jsfiddle，我不知道。 – Zeynel

如何在Google App Engine中使用Google Libraries API（jQuery）？

回答

相关问题