0. はじめに
対象者
- jQueryとJavaScriptの違いがよく分からない人
- jQueryのメリット、使いどころがよくわからない人
伝えたいこと
- jQueryは、JavaScriptを簡単に書けるようにした「JavaScriptライブラリ」
- jQueryのメリット
- ブラウザ間の差異を吸収してくれる
- 複数のHTML要素を一度に操作できる
- アニメーションを簡単に実装できる
目次
- jQueryの概要
- jQueryの構文・使い方
- jQueryの使いどころ
- 付録
1. jQueryの概要
jQueryとは？
jQuery（ジェイクエリー）は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。ジョン・レシグが、2006年1月に開催された BarCamp NYC でリリースした。
Wikipediaより引用
簡易な理由1. ブラウザ間の差異を吸収
//**** IE8以前にも対応したLoad Eventの設定方法 ***
//jQueryを使わない方法
if (window.addEventListener != null) {
window.addEventListener("load", func, false); //標準ブラウザの書き方
} else if(window.attachEvent != null) {
window.attachEvent("load", func); //IE8以前の書き方
}
//jQueryを使った方法
$(window).on("load", func);
簡易な理由2. CSSセレクタで要素を指定
//選択されているラジオボタンの値を取得する
$("input[type='radio']:checked").val();
document.querySelectorAllを使えば同様に簡潔に書けるが、この機能はIE7以前では使えない。
jQueryのバージョン
| jQueryバージョン | サポートしているIEのバージョン |
|---|---|
| 1.x | 6,7,8 |
| 2.x | 9以上 |
| 3.x | 9以上 |
jQueryプラグイン
jQueryを使ったライブラリ。
- jQuery UI
- tablesorter
- jqPlot
※プラグインの対応しているjQueryのバージョンに注意すること。
2. jQueryの構文・使い方
基本的な構文
$(セレクタ).メソッド(引数)
- セレクタ: 操作対象のHTML要素を指定するもの。
- メソッド: HTML要素に対しての操作
セレクタはCSSセレクタと基本的に同じだが、jQuery独自のセレクタもある。(例):has
getter/setter
getterとsetterは同じ名前。
引数があればsetter、引数がなければgetter。
$("#sample").val("test"); //setter
var tmp = $("#sample").val(); //getter
Javaだとgetter/setterでメソッド名を変えるのが一般的。
obj.setValue("test"); //setter
String tmp = obj.getValue(); //getter
[Try] 複数要素に対してのgetter/setter
- getter: 最初の要素に対して値が取得される(例外あり)
- setter: 全ての要素に対して値が設定される
<span>a</span><span>b</span><span>c</span><span>d</span>
$("span").html(); // "a"が取得される
$("span").text(); //"abcd"が取得される（例外)
$("span").html("x"); //全てのspan要素の中身が"x"
メソッドチェーン
setterがjQueryオブジェクトを返すので、メソッドチェーンで書ける。
$("#sample").val("test")
.css({backgroundColor:"black"})
.click();
メソッドチェーンのメリットは、複数の処理をまとめて記述できるのと、不要な一時変数を減らせること。
[Try] jQueryオブジェクトの生成方法(CSSセレクタ以外)
- Element,Window,Documentオブジェクトを渡す
$(window);
var buttonElm = document.createElement("button");
$(buttonElm);
- HTMLタグを渡す
$("<img>", {src:"sample.jpg", css:{borderWidth:5}});
ドキュメントロード完了後の処理
$(function(){
//なにかしらの処理
});
//上記と同じ処理。3.x系では非推奨。
$(document).ready(function() {
//なにかしらの処理
});
HTML読み込み後、処理が走る。スタイルシートや画像の読み込みを待たない。
画像などの読み込みを待つ場合は、$(window).loadを使う。
[補足] DOMContentLoadedイベント
$(function(){});内の処理は、DOMContentLoadedイベントが発生したときに走る。
DOMContentLoadedをサポートしていないブラウザ(IE8以前)は、loadイベントが発生したときに走る。
[Try] イベント処理
$("#sample").click(function(event) {
console.log(event);
});
//イベント処理にデータを渡す場合
$("#sample").click("test", function(event) {
console.log(event.data); //⇒"test"
});
複数のイベントを設定する場合は$(...).onを使用。
$("#sample").on("click blur", function(event) {
console.log(event);
});
$とjQuery
$("#sample")とjQuery("#sample")は同じ意味。
jQueryという名前のショートカットとして、$に割り当てられた。
※jQuery.noConflict()で$を未定義にできる
3. jQueryの使いどころ
jQueryを使った方が簡潔に書ける場合(当然)
- jQuery独自のセレクタを使いたいとき(
:hasなど) - jQuery独自のカスタムイベントを使いたいとき
- アニメーション
- 複数要素に対して値を設定
複数のHTML要素を一度に操作できる
//jQueryを利用
$("span").value("test");
//jQueryを利用しない場合は、forループが必要
var elms = document.querySelectorAll("span");
for (var i=0; i<elms.length; i++) {
elms[i].value = "test";
}
//forEachを使うと少し簡潔になるが、jQueryの方が簡潔
elms.forEach(function(elm) { elm.value="test"});
[Try] アニメーションを簡単に実装できる
//スライドアップ・スライドダウンを切り替える
$("#sample").slideToggle();
jQueryを使わないと、requestAnimationFrame,setTimeout,setIntervalなどを使った複雑な記述になる。
4. 付録
jQueryの公式サイトの見方
- Home
- API Documentation
- Browser Support
jQuery以外のJavaScriptライブラリ
- React
- AngularJS
- Riot
- Vue.js
jQuery不要論
- ブラウザ間の差異がなくなってきている
- jQueryの便利な関数と同等のものが、ブラウザでも提供されている
なぜjQueryを使ってはいけないか
You Don't Need jQuery
課題(やってみよう！)
- jQuery独自のセレクタを調査
-
$().clickと$().on("click"の違いを調査 -
$(function(){});と$(window).loadの両方を設定して、実行順序を確認 - React, AngularJSの概要を調査
- jQuery不要論の考察