187

JavaScript 파일을 HTML 문서에 올바르게 링크하는 방법은 무엇입니까?

둘째, JavaScript 파일 내에서 jQuery를 어떻게 사용합니까?

javascript jquery html

— firstofth300
소스

3

여기에 대한 답변을 선호합니다. HTML 마크 업에서 <script> 태그를 어디에 두어야합니까?

— caramba

@caramba 그러나 좀 더 복잡한 작업을 수행하기 위해 JS가 필요한 경우 어떻게해야합니까? const fs = require('fs');노드에서 호출하도록 파일을 작성하려고 합니다.

— 나단

1

node.js와 @Nathan은 완전히 다른 이야기입니다. 도움 이되는 희망을 읽으십시오

— caramba

해결 방법을 찾았지만 다른 사람이 링크에 기뻐할 것이라고 확신합니다!

— 나단

189

먼저 http://jquery.com/ 에서 JQuery 라이브러리를 다운로드 한 다음 html head 태그 내에 다음과 같은 방법으로 jquery 라이브러리를로드하십시오.

그런 다음 jquery 로딩 스크립트 후 jquery 코드를 코딩하여 jquery가 작동하는지 테스트 할 수 있습니다

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<!--LINK JQUERY-->
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<!--PERSONAL SCRIPT JavaScript-->
<script type="text/javascript">
   $(function(){
      alert("My First Jquery Test");
   });
</script>

</head>
<body><!-- Your web--></body>
</html>

jquery 스크립트 파일을 별도로 사용하려면 jquery 라이브러리로드 후이 방법으로 외부 .js 파일을 정의해야합니다.

<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script src="js/YourExternalJQueryScripts.js"></script>

실시간 테스트

코드 스 니펫 표시

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<!--LINK JQUERY-->
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<!--PERSONAL SCRIPT JavaScript-->
<script type="text/javascript">
   $(function(){
      alert("My First Jquery Test");
   });
</script>

</head>
<body><!-- Your web--></body>
</html>

스 니펫 확장

— 스왈 른 27
소스

7

정말 고맙습니다. 이것은 내가 마침내 알아 낸 정확한 답변입니다! 질문이 초등 적이라는 것을 알고 있지만 시간을내어 이것을 보여 주셔서 감사합니다! 내가 누락 된 것은 jQuery 라이브러리를 javascript 파일 앞에 두는 것입니다!

— firstofth300

53

이것은 HTML로 JS 파일을 연결하는 방법입니다

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

<script> -태그는 JavaScript와 같은 클라이언트 측 스크립트를 정의하는 데 사용됩니다.

type -스크립트 유형을 지정하십시오

src -스크립트 파일 이름 및 경로

— 무투 쿠마 란
소스

13

자바 스크립트 파일을 가리키는 HTML 문서에 스크립트 태그를 추가 할 수 있습니다. 스크립트 태그의 순서가 중요합니다. 스크립트에서 jQuery를 사용하려면 스크립트 파일보다 먼저 jQuery를로드하십시오.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="relative/path/to/your/javascript.js"></script>

그런 다음 자바 스크립트 파일에서 $sign 또는을 사용하여 jQuery를 참조 할 수 있습니다 jQuery. 예:

jQuery.each(arr, function(i) { console.log(i); });

— BuddhiP
소스

12

외부 자바 스크립트 파일을 포함하려면 <script>태그 를 사용합니다 . 이 src속성은 웹 프로젝트에서 Javascript 파일의 위치를 가리 킵니다.

<script src="some.js" type="text/javascript"></script>

JQuery는 단순히 자바 스크립트 파일이므로 파일의 사본을 다운로드하면 스크립트 태그를 사용하여 페이지에 파일을 포함시킬 수 있습니다. Google에서 호스팅하는 것과 같은 콘텐츠 배포 네트워크의 Jquery를 포함 할 수도 있습니다.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

— 케빈 보우 더스
소스

2

아래에는 몇 가지 유효한 html5 예제 문서가 있습니다. 태그 의 type속성 script은 필수 가 아닙니다 HTML5에서 .

$문자로 jquery를 사용 합니다. jquery와 같은 라이브러리를 <head>태그에 넣으십시오. 그러나 스크립트는 문서 ( <body>태그) 의 맨 아래에 항상 있습니다. 따라서 스크립트 실행이 시작될 때 모든 라이브러리와 html 문서가로드됩니다. src위와 같은 직접 js 코드를 넣는 대신 하단 스크립트 태그에 속성을 사용 하여 스크립트 파일을 포함 시킬 수도 있습니다 .

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
    <div>Im the content</div>

    <script>
        alert( $('div').text() ); // show message with div content
    </script>
</body>
</html>

스 니펫 확장

— 카밀 키에브 제 스키
소스

0

this is demo code but it will help 

<!DOCTYPE html>
<html>
<head>
<title>APITABLE 3</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>


$(document).ready(function(){

$.ajax({
    type: "GET",
    url: "https://reqres.in/api/users/",

    data: '$format=json',

    dataType: 'json',
    success: function (data) {
 $.each(data.data,function(d,results){
     console.log(data);

 $("#apiData").append(
                        "<tr>"
                          +"<td>"+results.first_name+"</td>"
                          +"<td>"+results.last_name+"</td>"
                          +"<td>"+results.id+"</td>"
                          +"<td>"+results.email+"</td>"
  +"<td>"+results.bentrust+"</td>"
                        +"</tr>" )
                    })
 } 

});

});


</script>
</head>
<body>


    <table id="apiTable">

        <thead>
            <tr>
            <th>Id</th>
            <br>
            <th>Email</th>
            <br>
            <th>Firstname</th>
            <br>
            <th>Lastname</th>
        </tr>
        </thead>
        <tbody id="apiData"></tbody>    





</body>
</html>

— 호 자이 파
소스

JavaScript 파일을 HTML 파일에 어떻게 연결합니까?

실시간 테스트