Google App Engine에서 Google Libraries API (jQuery)를 사용하는 방법은 무엇입니까?

내 사이트에 jQuery Hover effect을 추가하려고합니다. jQuery를 다운로드하는 대신 jQuery 용 Google Libraries API를 사용하기로 결정했습니다. 키가 있고 헤더로가는 코드를 복사 한 다음 호버 효과를 위해 jQuery를 복사했지만 아무것도 성공하지 못합니다. 내가 도대체 뭘 잘못하고있는 겁니까? DOM을 당신이 핸들러를 연결하려는 시점에 아직 존재하지 않는, 그래서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 코드를 포장하지 않는 : This is where my test page이며, 아래의 전체 코드와 핸들러입니다. 일반적으로 페이지에서 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)를 사용하는 방법은 무엇입니까?

답변

관련 문제