JavaScriptファイルをHTMLファイルにリンクするにはどうすればよいですか？

187

JavaScriptファイルをHTMLドキュメントに適切にリンクするにはどうすればよいですか？

次に、JavaScriptファイル内でjQueryをどのように使用しますか？

javascript  jquery  html 
— firstofth300
ソース
3
— caramba
@carambaしかし、もっと複雑なことをするためにJSが必要な場合はどうなりますか？私はそれがファイルを書き込むようにしているのでconst fs = require('fs');、ノードから呼び出します。
— ネイサン
1
@Nathanとnode.jsはまったく別の話です。これが役立つことを願っています
— caramba
回避策を見つけましたが、他の誰かがリンクを喜んでくれると確信しています！
— ネイサン

回答:

189

まず、http： //jquery.com/からJQueryライブラリをダウンロードし、次に、htmlヘッドタグ内で次の方法でjqueryライブラリをロードする必要があります。

次に、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スクリプトファイルを個別に使用する場合は、jqueryライブラリのロード後にこの方法で外部.jsファイルを定義する必要があります。

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

リアルタイムでテスト

コードスニペットを表示

— スワーン27
ソース
7
どうもありがとうございます。これがまさに私が最終的に理解した答えです！質問は初歩的なものでしたが、時間を割いてこれを見せてくれてありがとう！私が欠けていたのは、JavaScriptファイルの前にjQueryライブラリを配置することでした。
— firstofth300
53

これは、HTMLでJSファイルをリンクする方法です。

<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); });
— 仏教
ソース
12

外部Javascriptファイルを含めるには、<script>タグを使用します。このsrc属性は、Webプロジェクト内のJavascriptファイルの場所を指します。

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

JQueryは単なるJavaScriptファイルなので、ファイルのコピーをダウンロードした場合、スクリプトタグを使用してページ内に含めることができます。Googleがホストするネットワークなどのコンテンツ配信ネットワークからJqueryを含めることもできます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
— ケビン・ボワーソックス
ソース
2

以下に、有効なhtml5サンプルドキュメントがあります。タグのtype属性はHTML5では必須でscriptはありません。

あなたは文字でjqueryを使用します$。ライブラリー（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>
— ホザイファ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.