jQueryを使ってみよう

jQueryの導入方法（CDN）

では、早速jQueryを導入してみましょう。 今回はCDN版を使用します。

1.練習用htmlファイル作成

今回は練習用に新規HTMLファイルを作成します。 まずは最低限の記述だけしておきましょう。ファイル名は任意で構いません。

2.CDNコードを取得・貼り付け

jQueryの公式サイト https://code.jquery.com/ を開きます。

赤線で囲った、jQuery Core 3.6.0の並びにある「minified」の文字をクリック。

ポップアップウィンドウでCDNコードが表示されます。 クリップボードボタンをクリックして、CDNコードをコピーして下さい。

先程作成した練習用HTMLファイルにペーストします。

3.動作チェック

読み込ませたjQueryが動いているかを確認してみましょう。 下図、赤い点線で囲ったコードを記述してみて下さい。

ファイルを保存して、ブラウザで確認してみます。 図のように真っ赤なページが表示されていれば、jQueryは動いています。

【確認用コード】

<script>
  $(function(){
    $("body").css("background", "red");
  });
</script>

jQueryの基本書式

jQuery基本の書き方

jQueryの基本的な書き方を見てみましょう。 jQueryでDOM（HTML）の操作を記述する時は「$()」を使って宣言します。

操作したい要素を $() 内に、ドットを入れてその後に操作の命令を書きます。

$(操作したい要素).操作内容

HTML内のどの要素を操作するかは、セレクタで指定することが出来ます。 命令の部分では「メソッド」と呼ばれる命令文を使用します。 使用するメソッドによっては、引数（メソッドに渡す情報）が必要な場合もあります。

$("セレクタ").メソッド(引数)

動作確認に使用したコードを見てみましょう。

また、JavaScriptは、HTMLの読み込みが終わった後に実行して欲しいです。 ですので「HTMLの読み込みが終わった後に実行せよ」という指示で囲みます。

$(document).ready(function() {
  /* ここに書かれる内容はHTMLの読み込みが終わった後に実行される */
}

$(document).ready(function() { は省略可能です。 下記の記述でも同じ意味になります。

  $(function(){
  /* ここに書かれる内容はHTMLの読み込みが終わった後に実行される */
  });

セレクタについて

jQueryで使うセレクタも、概ねcssセレクタと同じ感覚で使用できます。 cssとは異なり、セレクタはクォートで囲む必要があるというところだけ注意すれば大丈夫です。

例えば、クラスの場合は$(".クラス名") 、idの場合は$("#ID名") という形で書きます。 CSS同様に下記のような記述も可能です。

• #test imgのように子孫セレクタを指定する
• カンマで区切って複数のセレクタを記述する
• :only-child などの擬似クラスで指定する

また、jQuery特有のセレクタもあります。 例えば、CSSで「リストの奇数番目の要素」を指定する場合、セレクタは下記のように書きますよね。

li:nth-child(odd){
    background: blue;
}

jQueryの場合も同じようにli:nth-child(odd)でも出来ますし、単にli:oddとだけ書いても動きます。

jQueryで使用可能なセレクタは、CSSと同じように書いてみて効かなければ探す・目的に応じて探すというくらいで良いでしょう。

jQueryで使用できるセレクタの一覧はjQuery公式サイトで確認することが出来ます。 公式の日本語版はありませんが「jQuery セレクタ 一覧」などと検索すると、一覧ページ化しているサイトが出来てますよ。

補足：CSSプロパティを複数操作したい時は？

cssを変更する場合、複数のCSSプロパティで値を変更したいこともあります。

上の例では、背景色を濃くしたので文字が読めません。 合わせて文字色を白にしたいですよね。

この場合、２通りの書き方ができます。

①変更したいスタイルを１つずつ書く

$("li:odd").css("background", "blue");
$("li:odd").css("color","white");

②中括弧（波括弧）で囲って、まとめて指定する。 ※プロパティと値の間はコロン「:」、次のプロパティ指定にはカンマ「,」を入れる

$("li:odd").css({
    "background":"red",
    "color":"white",
});

そのほか引数に関数を使う場合などもあります。

メソッドについて

メソッドはjQueryの命令文、jQueryで何をしたいかを支持します。 独自のメソッドを作成することも出来ますが、よく使われる機能については予めjQueryにメソッドとして登録されています。

【jQueryメソッドの例】

これはほんの一部で、様々なメソッドが用意されています。 公式のjQuery API Documentationや、下記チートシートなどでご確認下さい。

jQuery Cheat Sheet

●メソッドチェーン

jQueryでは同じ要素に対して複数のメソッド（命令）を適用したいときに、ドット「.」でメソッドを繋げて書くことができます。鎖のように繋げる、という意味で、この書き方をメソッドチェーンと呼びます。

どちらの書き方でも、結果（表示）は一緒です。

【それぞれ書いた場合】

    $(function(){
        $("li:odd").css("background", "blue");
        $("li:odd").text("奇数個目");
    });

【メソッドチェーンで書いた場合】

    $(function(){
        $("li:odd").css("background", "blue").text("奇数個目");
    });

jQuery設定を外部ファイルにする

ここまで、jQueryでの設定はhtmlファイルに直書きしていました。 実際にサイトを作る時にはもっと記述内容も多くなりますし、cssのように同じ設定を使い回したいページも出てきますよね。

ですので、htmlではなくjsファイルに分割して読み込むようにしてみましょう。

1.新規ファイルを作成

空のファイルを新規で作ります。 任意の名前を付けて、jsファイルとして保存しましょう。

下図では「lesson.js」としています。

HTMLファイルに書いていた`$(function(){ ～ }`をカット。

新しく作ったjsファイルの方に貼り付けます。

上書き保存してください。

HTMLファイルには、外部ファイルを読み込む記述を書きます。 JSファイルを読み込む際には「src=""」を使い、閉じタグが必要な点に注意して下さい。

ブラウザをリロードしても、jQueryで変更したcssが効いていれば成功です。 次のレッスン以降、jQueryやJSライブラリ類を動かすための記述は外部jsファイルに書いていきます。

実習

HTMLファイルに下記のコードを貼り付け、jQueryを使って操作してみましょう。 jQueryの記述は、 jsファイルを作って読み込ませて下さい。

<style type="text/css" media="screen">
  .test{color: green;}
</style>
<div class="box">
  背景色グレーに、テキストを「変更！」に変える
</div>
<p>testクラスが付与され、文字が緑色になればOK</p>

1. 「box」クラスのdiv部分を記述どおりに変更
2. 「.addClass()」を使ってpタグに「test」クラスを追加

答え合わせは、レッスン素材にあるフォルダをダウンロードしてご確認下さい。