jQueryをHTMLに記述して読み込む

jQyeryを使う時は、
『jQuery本体をまずとってきて、HTMLの中で読み込んでおく必要があります。』

 

前回の『jQueryを使う時、最初にすること① 』では

（１）jQueryをダウンロードして使う
（２）CDNを利用する

で、ダウンロードかCDNでとってくる方法をお話ししました。

 

次にここでは、HTMLの中で読み込む方法についてお話しします。

jQyeryを使うためには、とってきたjQuery本体とHTMLを結びつける必要があります。

CSSの内容を反映するためにも、以下のようにしてCSSとHTMLを結びつける必要がありましたよね。

<link href=”css/style.css” rel=”stylesheet”>

 

この、『jQuery本体とHTMLを結びつける』記述は、bodyタグの閉じタグ直前に<script>タグを使って書きます。

＜ダウンロード版＞

<body>
<h1>テスト</h1>
・
・
<script src=”js/jquery-3.3.1.min.js”></script>
</body>

＜CDN版＞

<body>
<h1>テスト</h1>
・
・
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
</body>

 

以上で、jQueryを使う準備は終わりました。

続いて、jQueryで実際にさせたい処理の記述を書く場所について少しお話ししておきます。

jQueryで実行させたい処理を記述する

本体を読み込む<script>〜</script>の次に、実行させたい処理を書いていきます。

必ず、本体のjQueryを読み込んだ後に処理の記述を書いてください。

この順番は大切です。

<body>
<h1>テスト</h1>
・
・
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>

<script>
/*ここにjQueryで実行させたい処理を記述する*/
</script>
</body>

例えば以下は、pタグの文字の色を赤くする記述です。

<body>
<h1>テスト</h1>
<p>こんにちは</p>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
<!– ↑処理を書く前にjQuery本体を読み込む –>

<script>
        $(‘p’).css(‘color’,’red’);
</script>
<!– ↑pタグの文字の色を赤くする –>
</body>

 

処理の記述方法似ついては、次回とします。