187

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

По-друге, як ви використовуєте jQuery у файлі JavaScript?

javascript jquery html

3

Я вважаю за краще відповіді тут: Де я повинен розміщувати теги <script> у розмітці HTML?

— caramba

@caramba Але що робити, якщо мені потрібен JS, щоб зробити щось складніше? Я намагаюся, щоб він написав файл, тому я дзвоню const fs = require('fs');з вузла.

— Натан

1

@Nathan з node.js - це зовсім інша історія. прочитайте цю надію, що це допомагає

— caramba

Я знайшов рішення, але впевнений, що хтось ще буде радий за посилання!

— Натан

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>

Тест в режимі реального часу

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

<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 перед файлом 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, тому якщо ви завантажите копію файлу, ви можете включити його на свою сторінку за допомогою тегу сценарію. Ви також можете включити 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>

— Хозайфа
джерело

Як зв'язати файл JavaScript з файлом HTML?

Тест в режимі реального часу