web-dev-qa-db-ja.com

JavaScriptファイルをHTMLファイルにリンクする方法

JavaScriptファイルをHTML文書に適切にリンクする方法

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

javascriptjqueryhtml
157
firstofth300

最初に 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>

リアルタイムでテスト

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

これは、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 - スクリプトファイルの名前とパス

42
Muthu Kumaran

あなたの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ファイルであなたは$ signかjQueryのどちらかを使ってjQueryを参照することができます。例：

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

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

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

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

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

以下に VALID html5 exampleドキュメントがあります。 typeタグのscript属性は、HTML 5では 必須ではありません です。

あなたは$文字でjqueryを使います。 （jqueryのような）ライブラリを<head>タグに入れます - しかしあなたのスクリプトはドキュメントの一番下（<body>タグ）に置きます - スクリプトの実行が始まるとき、あなたはすべてのライブラリとhtmlドキュメントがロードされることを確信します。上記のように直接のjsコードを置く代わりに、一番下のscriptタグでsrc属性を使ってスクリプトファイルを含めることもできます。

<!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>
1
Kamil Kiełczewski