javascriptライブラリの中で代表的なjQueryについて書きます。
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の場合だと前回の紹介文の様に長くなります。
$(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という見出しと
その下に3.x snippetという記述が見つかります。
3.x snippetの下にscriptタグに囲まれた記述があるのでこの記述をコピーしましょう。
コピーした記述をindex.htmlのhead内に以下のように貼り付けることでjQueryを読み込むことができます。
<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属性の値に#（ハッシュ）を付けたものをセレクタとして利用します。
$("#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()を使用する場合、セレクタを指定すればクリックした要素の値を簡単に取り出してくれます。
よって、配列に変換する必要もなく、以下のようにスッキリとしたコードに書き換えることができます。
// タブの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);
});
// タブの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()を使用します。
index("セレクタ") // セレクタと一致したDOMの要素番号を戻す
集合したDOM要素から選択
eq()は引数に要素番号を取り、集合したDOM要素から選択できます
eq() // 集合したDOM要素から選択
// 例
$(".content").eq(index).addClass("show");
jQueryでのHTMLの読み込み
こちらもかなりの省略になります。
window.addEventListener("load", function() {
// 処理
});
$(function() {
// 処理
}