Как связать файл JavaScript с файлом HTML?

187

Как правильно связать файл JavaScript с документом HTML?

Во-вторых, как вы используете jQuery в файле JavaScript?

javascript jquery html firstofth300
источник
3
Я предпочитаю ответы здесь: где я должен поместить теги <script> в разметку HTML?
Карамба
@caramba Но что, если мне понадобится JS, чтобы сделать что-то более сложное? Я пытаюсь заставить его написать файл, поэтому я звоню const fs = require('fs');с узла.
Натан
1
@ Натан с node.js это совсем другая история. прочитайте эту надежду, это помогает
карамба
Я нашел обходной путь, но я уверен, что кто-то еще будет рад за ссылку!
Натан

Ответы:

189

Сначала вам нужно скачать библиотеку JQuery с http://jquery.com/ затем загрузить библиотеку jquery следующим образом в теги html head.

Затем вы можете проверить, работает ли 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>

Тест в реальном времени

Показать фрагмент кода

Swarne27
источник
7
Спасибо большое. Это именно тот ответ, который я наконец-то понял! Я знаю, что вопрос был элементарным, но я благодарю вас за то, что вы нашли время показать мне это! Чего мне не хватало, так это размещения библиотеки jQuery перед файлом javascript!
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 - имя файла сценария и путь

Мутху Кумаран
источник
13

Вы можете добавить теги сценариев в ваш HTML-документ, в идеале внутри которого указывает на ваши файлы JavaScript. Порядок тегов скрипта важен. Загрузите 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>

Затем в вашем javascript-файле вы можете ссылаться на jQuery, используя $знак или jQuery. Пример:

jQuery.each(arr, function(i) { console.log(i); });
BuddhiP
источник
12

Чтобы включить внешний файл Javascript, вы используете <script>тег. srcАтрибут указывает на расположение файла Javascript в вашем веб - проекта.

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

JQuery - это просто файл Javascript, поэтому, если вы загрузите копию этого файла, вы можете включить ее в свою страницу с помощью тега script. Вы также можете включить Jquery из сети распространения контента, например, той, что размещена в Google.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Кевин Бауэрсокс
источник
2

Ниже у вас есть пример документа VALID html5 . typeАтрибут scriptтега не обязательно в HTML5.

Вы используете JQuery $Charater. Поместите библиотеки (например, 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>
Hozaifa
источник