187

Làm thế nào để bạn liên kết đúng tệp JavaScript với tài liệu HTML?

Thứ hai, làm thế nào để bạn sử dụng jQuery trong một tệp JavaScript?

javascript jquery html

— đầu tiên 300
nguồn

3

Tôi thích các câu trả lời ở đây: Tôi nên đặt các thẻ <script> ở đâu trong đánh dấu HTML?

— caramba

@caramba Nhưng nếu tôi cần JS để làm điều gì đó phức tạp hơn thì sao? Tôi đang cố gắng để nó viết một tập tin vì vậy tôi gọi const fs = require('fs');từ nút.

— Nathan

1

@Nathan với node.js đó là một câu chuyện hoàn toàn khác. đọc hy vọng này sẽ giúp

— caramba

Tôi đã tìm thấy một cách giải quyết, nhưng tôi chắc chắn rằng người khác sẽ vui mừng vì liên kết này!

— Nathan

189

Trước tiên, bạn cần tải xuống thư viện JQuery từ http://jquery.com/ sau đó tải thư viện jquery theo cách sau trong các thẻ đầu html của bạn

sau đó bạn có thể kiểm tra xem jquery có hoạt động hay không bằng cách mã hóa mã jquery của bạn sau khi tập lệnh tải 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>

Nếu bạn muốn sử dụng tệp jquery script riêng biệt, bạn phải xác định tệp .js bên ngoài theo cách này sau khi tải thư viện jquery.

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

Kiểm tra trong thời gian thực

Hiển thị đoạn mã

<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>

Mở rộng đoạn trích

— Swarne27
nguồn

7

Cảm ơn bạn rất nhiều. Đây chính xác là câu trả lời mà cuối cùng tôi đã tìm ra! Tôi biết rằng câu hỏi là cơ bản nhưng tôi cảm ơn bạn đã dành thời gian để cho tôi thấy điều này! Điều tôi đã thiếu là đặt thư viện jQuery trước tệp javascript!

— Firstofth300

52

Đây là cách bạn liên kết một tệp JS trong HTML

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

<script> - thẻ được sử dụng để xác định tập lệnh phía máy khách, chẳng hạn như JavaScript.

type - chỉ định loại tập lệnh

src - tên tập tin và đường dẫn

— Muthu Kumaran
nguồn

13

Bạn có thể thêm các thẻ script trong tài liệu HTML của mình, lý tưởng nhất là trong đó trỏ đến các tệp javascript của bạn. Thứ tự của các thẻ script là quan trọng. Tải jQuery trước các tệp tập lệnh của bạn nếu bạn muốn sử dụng jQuery từ tập lệnh của mình.

<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>

Sau đó, trong tệp javascript của bạn, bạn có thể tham khảo jQuery bằng cách sử dụng $dấu hoặc jQuery. Thí dụ:

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

— BuddhiP
nguồn

11

Để bao gồm một tệp Javascript bên ngoài, bạn sử dụng <script>thẻ. Các srcthuộc tính chỉ ra vị trí của tập tin Javascript của bạn trong dự án web của bạn.

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

JQuery đơn giản là một tệp Javascript, vì vậy nếu bạn tải xuống một bản sao của tệp, bạn có thể đưa nó vào trong trang của mình bằng thẻ script. Bạn cũng có thể bao gồm Jquery từ một mạng phân phối nội dung, chẳng hạn như mạng được lưu trữ bởi Google.

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

— Kevin Bowersox
nguồn

1

Dưới đây bạn có một số tài liệu ví dụ VALID html5 . Các typethuộc tính trong scriptthẻ là không bắt buộc trong HTML5.

Bạn sử dụng jquery bởi $charater. Đặt các thư viện (như jquery) vào <head>thẻ - nhưng tập lệnh của bạn đặt allways ở dưới cùng của tài liệu ( <body>thẻ) - do điều này bạn sẽ chắc chắn rằng tất cả các thư viện và tài liệu html sẽ được tải khi quá trình thực thi tập lệnh của bạn bắt đầu. Bạn cũng có thể sử dụng srcthuộc tính trong thẻ script phía dưới để bao gồm tệp script thay vì đặt mã js trực tiếp như trên.

<!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>

Mở rộng đoạn trích

— Kamil Kiełczewski
nguồn

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>

— Hozaifa
nguồn

Làm cách nào để liên kết tệp JavaScript với tệp HTML?

Kiểm tra trong thời gian thực