jQuery
jQueryとは
jQueryはJavaScriptライブラリの一つで、様々なブラウザの動作差異を吸収し、かつDOM操作やAjaxといった機能を使いやすくしてくれます。hifiveもjQueryと連携しています。
基本的な使い方
一番基礎的になるのは $ または jQuery を使った書き方になります。
これは
と同じです。$ が他のライブラリとかぶってしまった時などはjQueryを指定します。
DOM操作
一番基本になるのがDOM操作だと思います。HTMLのクラス、ID、タグ、属性など様々な方法を使ってDOMを指定できます。これはCSSセレクタを使って行います。
var h1 = $(".title") // クラス指定の場合は.（ドット）を使います。
h1.text() => "タイトル"
クラスの場合、複数のデータが返ってくる前提で考えます。ID指定の場合は一つの要素になります。
var h1 = $("#title") // ID指定の場合は#（シャープ）を使います。
タグも同様に指定ができます。
var h1 = $("h1") // タグ指定の場合はそのままタグで指定できます。
属性の場合は[]を使います。
var h1 = $("h1[data-id='title']")
この他、最初の要素だけ、偶数番目だけ、隣接する要素だけなど様々な指定が可能となっています。
Ajax
Webサーバと通信する際に利用します。基本はXMLかJSONですが、JSONPやHTMLの取得できます。下記のような形が基本になります。
type: "GET",
url: "/server",
data: {
key1: "val1",
key2: "val2"
}
}).done(function( msg ) {
alert("成功しました");
}).fail(function( msg ) {
alert("失敗しました");
});
昔はsuccess/errorを使っていましたが、最近ではdone/fail/alwaysを使うようになっています（success/errorはjQuery 1.8より非推奨）。
この他、headers（HTTPリクエストヘッダーの追加）、username/password（HTTP認証用）などがよく使われます。
ユーティリティ関数
jQueryにはJavaScriptにはない便利な関数がいくつも用意されています。
$.each(["Apple", "Banana", "Cherry"], function(i, fruits) {
console.log(fruits)
});
$.merge( ["Apple", "Banana", "Cherry"], [2,3,4] )
$.map( ["Apple", "Banana", "Cherry"], function(n){
return n != "Cherry" ? n : null;
});
["Apple", "Banana"]
配列処理を行うときに便利な関数です。他にもたくさんの関数が用意されており、これらを覚えておくとJavaScriptのコーディングがぐっと楽になるでしょう。
イベントハンドリング
jQueryではDOMに対してイベント監視を指定できます。
console.log("クリックされました");
});
のように記述します。このとき、aタグやbuttonに対してイベントを追加するとページ遷移してしまうので、
event.preventDefault();
console.log("クリックされました");
});
のようにしてイベントをキャンセルします。
拡張
jQueryの良さとして、本体を使うだけでなくサードパーティーからも多数のプラグインがリリースされていることがあります。それらを使うのももちろん便利なのですが、さらに自分で拡張することでjQueryの良さを活かしたコーディングができるようになります。
new_method: function (var1, var2) {
console.log(var1);
console.log(var2);
return this;
}
});
このような記述をすると、
のように呼び出せるようになります。jQueryを拡張することでインデントが深くなってしまうのを防いだり、関数で書かれている部分とjQueryのようにオブジェクトのメソッドで書かれている部分が混在するのを防げるようになります。
jQueryはキーチェーンメソッドによって処理をつなげていけるのが魅力になりますので、最後の返却値はthisにしておくのが良いでしょう。