188

Bir JavaScript dosyasını bir HTML belgesine düzgün bir şekilde nasıl bağlarsınız?

İkincisi, jQuery'yi bir JavaScript dosyasında nasıl kullanırsınız?

javascript jquery html

— firstofth300
kaynak

3

Buradaki cevapları tercih ederim: HTML işaretlemesine <script> etiketlerini nereye koymalıyım?

— caramba

@caramba Ama JS'ye daha karmaşık bir şey yapmak için ihtiyacım olursa? const fs = require('fs');Düğümden çağırmak için bir dosya yazmaya çalışıyorum .

— Nathan

1

@ Node.js ile Nathan tamamen farklı bir hikaye. bu umarım bu yardımcı okumak

— caramba

Bir geçici çözüm buldum, ancak eminim başka biri bağlantı için memnun olacak!

— Nathan

189

Öncelikle http://jquery.com/ adresinden JQuery kütüphanesini indirmeniz ve ardından jquery kütüphanesini html başlık etiketlerinize aşağıdaki şekilde yüklemeniz gerekir

jquery yükleme komut dosyasından sonra jquery kodunuzu kodlayarak jquery'nin çalışıp çalışmadığını test edebilirsiniz

<!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 komut dosyalarınızı ayrı kullanmak istiyorsanız, harici .js dosyasını jquery kitaplığı yüklendikten sonra bu şekilde tanımlamanız gerekir.

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

Gerçek zamanlı test edin

Kod snippet'ini göster

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

Snippet'i genişlet

— Swarne27
kaynak

7

Çok teşekkür ederim. Sonunda çözdüğüm cevap tam olarak bu! Sorunun temel olduğunu biliyorum ama bana bunu göstermek için zaman ayırdığınız için teşekkür ederim! Ne eksik jQuery kitaplığı javascript dosyasından önce yerleştirme oldu!

— firstofth300

54

HTML'deki bir JS dosyasını bu şekilde bağlarsınız

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

<script> - etiketi, JavaScript gibi bir istemci tarafı komut dosyası tanımlamak için kullanılır.

type - komut dosyasının türünü belirtin

src - komut dosyası dosya adı ve yolu

— Muthu Kumaran
kaynak

13

HTML belgenize, ideal olarak javascript dosyalarınızı işaret eden içine etiket etiketleri ekleyebilirsiniz. Komut dosyası etiketlerinin sırası önemlidir. Komut dosyanızdan jQuery kullanmak istiyorsanız, jQuery'yi komut dosyalarınızdan önce yükleyin.

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

Daha sonra javascript dosyanızda jQuery'ye $işaretini veya jQuery. Misal:

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

— BuddhiP
kaynak

12

Harici bir Javascript dosyası eklemek için <script>etiketi kullanırsınız . srcÖzellik web projesi içinde JavaScript dosyasının konumuna işaret eder.

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

JQuery sadece bir Javascript dosyasıdır, bu nedenle dosyanın bir kopyasını indirirseniz bir komut dosyası etiketi kullanarak sayfanıza ekleyebilirsiniz. Jquery'yi, Google tarafından barındırılan gibi bir içerik dağıtım ağından da ekleyebilirsiniz.

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

— Kevin Bowersox
kaynak

2

Aşağıda VALID html5 örnek belgeniz var. typeÖznitelik scriptetiketi olan zorunlu değildir HTML5'teki.

$Karakterle jquery kullanıyorsunuz . Kitaplıkları (jquery gibi) <head>etikete koyun - ancak komut dosyanız her zaman belgenin ( <body>etiket) altına konur - bu nedenle komut dosyası yürütmeniz başladığında tüm kitaplıkların ve html belgesinin yükleneceğinden emin olursunuz. srcYukarıdaki gibi doğrudan js kodu koymak yerine komut dosyası eklemek için alt komut dosyası etiketindeki özniteliği de kullanabilirsiniz .

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

Snippet'i genişlet

— Kamil Kiełczewski
kaynak

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
kaynak

Bir JavaScript dosyasını bir HTML dosyasına nasıl bağlarım?

Gerçek zamanlı test edin