javascriptライブラリの中で代表的なjQueryについて書きます。

javascriptとの違い

タブの切替から比較紹介していきます。

javascriptの場合

javascriptの場合だと前回の紹介文の様に長くなります。

javascript

window.addEventListener("load", function() {
  // タブのDOM要素を取得し、変数で定義
  let tabs = document.getElementsByClassName("menu_item");
  // tabsを配列に変換する
  tabsAry = Array.prototype.slice.call(tabs);

  // クラスの切り替えをtabSwitch関数で定義
  function tabSwitch() {
    // 全てのactiveクラスのうち、最初の要素を削除（"[0]は、最初の要素の意味"）
    document.getElementsByClassName("active")[0].classList.remove("active");

    // クリックしたタブにactiveクラスを追加
    this.classList.add("active");

    // コンテンツの全てのshowクラスのうち、最初の要素を削除
    document.getElementsByClassName("show")[0].classList.remove("show");

    // 何番目の要素がクリックされたかを、配列tabsから要素番号を取得
    const index = tabsAry.indexOf(this);

    // クリックしたcoutentクラスにshowクラスを追加する
    document.getElementsByClassName("content")[index].classList.add("show");
  }

  // タブメニューの中でクリックイベントが発生した場所を探し、下で定義したtabSwitch関数を呼び出す
  tabsAry.forEach(function(value) {
    value.addEventListener("click", tabSwitch);
  });
});

jQueryの場合

jQueryの場合だと前回の紹介文の様に長くなります。

jQuery

$(function()  {
  // タブのDOM要素を取得し、変数で定義
  let tabs = $(".menu_item");

  // クラスの切り替えをtabSwitch関数で定義
  function tabSwitch() {
    // 全てのactiveクラスのうち、最初の要素を削除（"[0]は、最初の要素の意味"）
    $('.active').removeClass("active");

    // クリックしたタブにactiveクラスを追加

    $(this).addClass("active");

    // 何番目の要素がクリックされたかを、配列tabsから要素番号を取得
    const index = tabs.index(this);

    // クリックしたタブに対応するshowクラスを追加する
    $(".content").removeClass("show").eq(index).addClass("show");
  }

  // タブがクリックされたらtabSwitch関数を呼び出す
  tabs.click(tabSwitch);    
});

jQueryを導入

jQueryを使用するには、jQueryのライブラリを読み込む必要があります。

jQueryへのリンク

リンク先のページをスクロールしていくとjQueryという見出しと
その下に3.x snippetという記述が見つかります。
3.x snippetの下にscriptタグに囲まれた記述があるのでこの記述をコピーしましょう。

コピーした記述をindex.htmlのhead内に以下のように貼り付けることでjQueryを読み込むことができます。

html

  <meta charset="utf-8">
  <title>jQuery Practice</title>
  <link rel="stylesheet" href="style.css" charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script><!--ここがそうです-->
  <script src="./main.js"></script>
</head>

HTML要素を取得

基本はJavaScriptと同じです。

jQueryは様々なセレクタを用意しています。よく使用するセレクタは以下の4つです。

IDセレクタ
クラスセレクタ
要素セレクタ
属性セレクタ

要するに、JavaScriptで書いていたDOM要素の取得を全て
共通の$("セレクタ名") で書き換えることができます。

違いの例

document.getElementsByClassName("menu_item");
// javascriptだと長くなりすぎる。

$(".menu_item")
//jQueryだとこれだけでよくなる。

document.get〜を
$("")だけで実質すむのだから使わない手はないです。

もっと細かく説明していきます。

IDセレクタ

HTMLよりid属性の値に#（ハッシュ）を付けたものをセレクタとして利用します。

IDセレクタ

$("#idSelector") // idがidSelectorの要素を取得

クラスセレクタ

HTML要素のclass属性の値に.（ドット）を付けたものをセレクタとして利用します。

クラスセレクタ

$(".classSelector") // classがclassSelectorの要素をすべて取得

要素セレクタ

h1やpのようなHTML要素を対象としたセレクタのことです。
要素セレクタは取得したいHTML要素の要素名をそのままセレクタとして利用します。

要素セレクタ

$("h1") // h1要素をすべて取得

属性セレクタ

HTMLのタグの属性値を指定したい場合
$("[ 属性 = '値' ]")で属性セレクタを取得できます。

属性セレクタ

$("input[ type='radio' ]");  // <input type="radio">のHTML要素を取得する

イベントの実装の違い

clickイベントを例に出しますと

クリックイベントの取得はclick()を使用します。

JavaScriptの場合、クリックイベントが発生した場所を確認するため
for文やforEach文を使って配列の中身を一つ一つ確認していました。

Queryでclick()を使用する場合、セレクタを指定すればクリックした要素の値を簡単に取り出してくれます。
よって、配列に変換する必要もなく、以下のようにスッキリとしたコードに書き換えることができます。

javascript

// タブのDOM要素を取得し、変数で定義
let tabs = $(".menu_item");
// tabsを配列に変換する
tabsAry = Array.prototype.slice.call(tabs);

function  tabSwitch(){
    // 省略
}

//javascriptだと以下3行ほどクリックイベントのコードが必要です。

tabsAry.forEach(function(value) {
  // タブメニューの中でクリックイベントが発生した場所を探し、下で定義したtabSwitch関数を呼び出す
  value.addEventListener("click", tabSwitch);
});

jQuery

// タブのDOM要素を取得し、変数で定義
let tabs = $(".menu_item");
// tabsを配列に変換する
tabsAry = Array.prototype.slice.call(tabs);

function  tabSwitch() {
    // 省略
}

//jQueryだと1行の短い文ですみます。

tabs.click(tabSwitch);

this

クリックされた要素を特定する必要があります。
thisを使うことで、イベントが発生した要素を取得できます。

関数の中でthisを使うと、イベントの発生元となった要素を取得することができます。
thisは、使用する場面によって取得できるものが異なります。
ここですべての用途の説明は割愛しますが、thisはJavaScriptで、非常によく使います。

thisはJavaScriptの機能です。そのためthisで取得した要素は
JavaScriptで使用するDOM要素になっています。

クラスの操作

JavaScirptではclassListを使用して、クラスの追加や削除をしてましたが
jQueryはクラスを追加・削除するメソッドが用意されています。

クラスの削除

removeClass()

JavaScriptはclassList.remove()という書き方をしていましたが
jQueryはremoveClass()というメソッドが用意されています。
classList.remove()と違い
[0]と指定しなくても、最初の要素を指定してくれます。

クラスの削除

$(".active").removeClass("active");

クラスの追加

addClass()

addClass()もremoveClass()と同様に[0]と要素を指定する必要がありません。
また、thisをjQueryで使える文法に変える必要があるため、$(this)に書き換えます。

jQueryで使う場合は、$(this)と指定しないとエラーになります。

クラスの追加

$(this).addClass("active");

セレクタと一致したDOMの要素番号を戻す

index()

JavaScritptだけで書く場合、.menu_itemsのような集合したDOM要素のうち
何番目の要素がクリックされたかを取得するために、indexOf()を使用する必要がありました。
しかし、inexOf()は配列に対してだけ使えるので、集合したDOM要素を配列に変換する必要がありました。

この部分のコードを短くするために、jQueryで用意されているindex()を使用します。

セレクタと一致したDOMの要素番号を戻す

index("セレクタ")  // セレクタと一致したDOMの要素番号を戻す

集合したDOM要素から選択

eq()は引数に要素番号を取り、集合したDOM要素から選択できます

集合したDOM要素から選択

eq()  // 集合したDOM要素から選択

// 例
$(".content").eq(index).addClass("show");

jQueryでのHTMLの読み込み

こちらもかなりの省略になります。

javascript

window.addEventListener("load", function() {
  // 処理
});

jQuery

$(function()  {
   // 処理
}