이 jQuery 라이브러리를 프로젝트에 추가하는 방법은 무엇입니까?

나는 학교에서 JS와 많이 일했지만 우리는 결코 라이브러리를 사용하지 않았다. 프로젝트에 필요한 모든 외부 리소스를 성공적으로 추가하는 방법에 대한 정보는 거의 없습니다.이 jQuery 라이브러리를 프로젝트에 추가하는 방법은 무엇입니까?

jQuery를 사용하는 라이브러리를 추가하여 작업중인 웹 사이트의 페이지 (http://jsfiddle.net/55DBx/1/) 안에 작은 창이 팝업으로 표시되도록하려고하는데, 내가하는 일과 상관없이 작동하지 않습니다. 그럴거야.

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
 
<link rel="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

을 내가 추가 한 : jsFiddle, 그것은 다음과 같이 라이브러리 jQuery를-ui.js 내가 모두 내 HTML 파일에 연결 한 JQuery와 - ui.css을 필요로 말한다 jsFiddle의 샘플 코드가 내 프로젝트에 제대로 작동하지 않습니다. 팝업 창 콘텐츠는 페이지에 바로 표시됩니다.

<button id="btnExample">open the dialog</button> 
 
<div id="dialog" title="Test"> 
 
    <img src="image.png" /> 
 
</div> 
 

 
<script>$("#dialog").dialog({ autoOpen: false }); 
 
$("#btnExample").click(function() { 
 
    $("#dialog").dialog("open"); 
 
});</script>

나는 무엇을 놓치고? :(

는

출처

2017-04-06 Nihilish

당신은 당신이 <head></head> 섹션을 참조하십시오. 내에서 그리고 당신의 CSS를 참조에 배치해야, 잘못된 장소에서 라이브러리 참조를 배치 할 수

은, 당신이 사용 rel 속성에 대한 링크를 추가하면 사이의 관계를 지정 현재 문서와 링크 된 문서/자원, 당신은 href 속성에 대한 링크를 추가해야

$("#dialog").dialog({ autoOpen: false }); 
 
$("#btnExample").click(function() { 
 
    $("#dialog").dialog("open"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
 
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"> 
 

 
<button id="btnExample">open the dialog</button> 
 
<div id="dialog" title="Randy"> 
 
    <img src="http://icons.iconarchive.com/icons/sykonist/south-park/256/Randy-Marsh-Jamming-2-icon.png" /> 
 
</div>

전체 코드 :.

<html> 

<head> 
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
    <script type="text/javascript"> 
    $(function() { 
     $("#dialog").dialog({ 
      autoOpen: false 
     }); 
     $("#btnExample").click(function() { 
      $("#dialog").dialog("open"); 
     }); 
    }); 
    </script> 
</head> 

<body> 
    <button id="btnExample">open the dialog</button> 
    <div id="dialog" title="Randy"> 
     <img src="http://icons.iconarchive.com/icons/sykonist/south-park/256/Randy-Marsh-Jamming-2-icon.png" /> 
    </div> 
</body> 

</html>

출처

2017-04-06 02:42:04 pblyt

감사합니다. 그게 효과가 있었어! 나는 그걸''에 넣지 않았다. : '그것으로 jsFiddle에 나열되지 않았습니다. AJAX를 사용하여 무엇이든 추가 할 수있는 표준 라인입니까? – Nihilish

당신은 오신 것을 환영합니다. 이 방법이 효과가 있다면 답으로 표시하십시오. 예, jQuery API 중 하나 인 AJAX를 사용하는 경우이 라이브러리 참조를 추가해야합니다. – pblyt

이 jQuery 라이브러리를 프로젝트에 추가하는 방법은 무엇입니까?

답변

관련 문제