187

คุณลิงก์ไฟล์ JavaScript กับเอกสาร HTML ได้อย่างถูกต้องได้อย่างไร?

ประการที่สองคุณใช้ jQuery ในไฟล์ JavaScript ได้อย่างไร

javascript jquery html

3

ฉันต้องการคำตอบที่นี่: ฉันควรใส่แท็ก <script> ใน HTML markup ที่ไหน

— caramba

@caramba แต่ถ้าฉันต้องการให้ JS ทำอะไรที่ซับซ้อนกว่านี้ล่ะ? ฉันพยายามที่จะให้มันเขียนไฟล์ดังนั้นฉันจึงโทรconst fs = require('fs');จากโหนด

— นาธาน

1

@Nathan ด้วย node.js มันเป็นเรื่องที่แตกต่างอย่างสิ้นเชิง อ่านหวังว่ามันจะช่วยได้

— caramba

ฉันพบวิธีแก้ปัญหา แต่ฉันแน่ใจว่าคนอื่นจะดีใจสำหรับการเชื่อมโยง!

— นาธาน

189

ก่อนอื่นคุณต้องดาวน์โหลดไลบรารี JQuery จากhttp://jquery.com/จากนั้นโหลดไลบรารี jquery ด้วยวิธีต่อไปนี้ภายในแท็กส่วนหัว html ของคุณ

จากนั้นคุณสามารถทดสอบว่า 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 แยกต่างหากคุณต้องกำหนดไฟล์. js ภายนอกด้วยวิธีนี้หลังจากโหลดไลบรารี jquery

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

ขยายตัวอย่างข้อมูล

— Swarne27
แหล่งที่มา

7

ขอบคุณมาก. นี่คือคำตอบที่ฉันคิดออกในที่สุด! ฉันรู้ว่าคำถามนี้เป็นคำถามระดับประถม แต่ฉันขอบคุณที่สละเวลาแสดงให้ฉันเห็น! สิ่งที่ฉันหายไปคือการวางห้องสมุด jQuery ไว้หน้าไฟล์จาวาสคริปต์!

— firstofth300

53

นี่คือวิธีที่คุณลิงก์ไฟล์ JS ใน HTML

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

<script> - แท็กใช้เพื่อกำหนดสคริปต์ฝั่งไคลเอ็นต์เช่น JavaScript

type - ระบุประเภทของสคริปต์

src - ชื่อไฟล์สคริปต์และพา ธ

— Muthu Kumaran
แหล่งที่มา

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>

จากนั้นในไฟล์จาวาสคริปต์ของคุณคุณสามารถดู jQuery ทั้งการใช้เครื่องหมายหรือ$ jQueryตัวอย่าง:

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

— BuddhiP
แหล่งที่มา

12

หากต้องการรวมไฟล์ Javascript ภายนอกที่คุณใช้<script>แท็ก srcจุดแอตทริบิวต์ไปยังตำแหน่งของไฟล์จาวาสคริปต์ของคุณภายในโครงการเว็บของคุณ

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

JQuery เป็นเพียงไฟล์ Javascript ดังนั้นหากคุณดาวน์โหลดสำเนาของไฟล์คุณสามารถรวมไว้ในหน้าของคุณโดยใช้แท็กสคริปต์ คุณสามารถรวม Jquery จากเครือข่ายการกระจายเนื้อหาเช่นที่โฮสต์โดย Google

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

— Kevin Bowersox
แหล่งที่มา

2

ด้านล่างนี้คุณมีเอกสารตัวอย่างHTML5 ที่ถูกต้อง typeแอตทริบิวต์ในscriptแท็กไม่ได้รับคำสั่งใน HTML5

คุณใช้ jQuery โดย$charater ใส่ไลบรารี่ (เช่น jquery) ลงใน<head>แท็ก - แต่สคริปต์ของคุณใส่ allways ที่ด้านล่างของเอกสาร ( <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>

ขยายตัวอย่างข้อมูล

— Kamil Kiełczewski
แหล่งที่มา

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
แหล่งที่มา

ฉันจะลิงก์ไฟล์ JavaScript ไปยังไฟล์ HTML ได้อย่างไร

ทดสอบแบบเรียลไทม์