記事の内容
この記事は「jQuery 本格入門」(著：沖林正紀 出版:技術評論社)のPart2 「プログラミング編」から学習した内容をメモ程度にまとめたものである。
内容の誤記、誤字等はご容赦いただきたい。また、JavaScriptの基本的な文法や、jQueryのマークアップ記法などを知らないと、当記事を理解するが難しいと思われる。
とは言っても、私もJavaScriptを本格的に学び始めて、4日目なので、やってみれば意外とわかったりするかもしれない。関数型プログラミングについての知識がある場合、JavaScriptのコールバック関数などの理解の助けになると思う。
jQueryオブジェクト
jQueryと$
jQueryが組み込まれたブラウザ上のコンソールでは
jQuery === $→true
jQuery instanceof Object→true
$ instanceof Object→true
となる。
また
typeof $→function
と表示される。
このことから、
jQueryと$は同値であり、関数オブジェクトであることがわかる。
次に
'jQuery' in window→true
'$' in window→true
となることから、
jQueryと\$はともにwindowオブジェクトのプロパティであることがわかる。
\$をセレクタなどのために用いるjQueryであるが、先に組み込まれたプログラムによって、windowオブジェクトのプロパティである\$が定義されていることも考えられる。
そこでjQueryのnoConflictメソッドを使う。
window.$ = ...//$を定義する
var jq = jQuery.noConflict(); //jQuery自身を返す。
jq(function(){... //jqがjQueryを表す。
引数をtrueにすることで、上書きされた\$の定義を復活させることができる。
異なるバージョンのjQuery共存させるときなどに使える。
一定の範囲で\$をjQueryとして使いたい場合は
(function($){...})(jQuery); ※ここに記述された処理はすぐに実行される。
jQuery(function($){...}); ※HTML文書が読み込まれたら処理を実行。
このようにすると{...}の範囲で\$がjQueryを表すことになる。
$(...)の動作
jQueryオブジェクトは引数を伴って実行可能な関数である。
$(function) $('#xxx')などがそうだろう。
主に、要素の生成、指定、処理の実行に使われている。
第一引数がセレクタ(文字列)、DOMオブジェクト、jQueryオブジェクトの場合
→要素の指定が行われる。第二引数が指定されているとそれに従って、要素を限定していく。
第一引数がHTML文書の場合
→要素の生成が行われる。第二引数には、追加先の親オブジェクトなどが指定される。
第一引数が関数の場合
→Webブラウザの画面にページ全体が読み込まれたときに、その関数実行される。
これらは関数だが戻り値についてはどうだろうか。
コンソール上で以下を実行してみると
$('*').constructor === jQuery→true
$('*') instanceof jQuery→true
であり、関数の戻り値として帰ってきているのは、
jQueryオブジェクトのインスタンスである。インスタンスのみにあるメソッドやプロパティは多く、それらによって、インスタンス独特に操作を可能にしている。
このインスタンスは配列のように、添え字で要素を指定したり、要素の追加、削除、並べ替えのようなメソッドが実行できる。これは決してjQueryインスタンスが配列オブジェクトなわけではなく、jQueryオブジェクトにそのような機能が備わっているのである、
$.parseHTML
$.parseHTMLはHTMLタグを含む文字列の解析をする関数で、戻り値にHTMLタグや文字列を要素とする配列を返す。
これによって、\$(...)を用いて要素の生成を行うことができる。
var s = '<a href="#">こちら</a>にアクセス';
$($.parseHTML(s)).appendTo('body');
//<body>内にsの内容が追加される。
要素の集合と繰り返し処理について
\$(...)で指定した要素に対してメソッドを実行すると、指定した要素すべてに対して、メソッドが実行される。これは指定した要素が一つの集合として管理され、それぞれの要素に対して、繰り返しで同じメソッドが行われているから。
指定した要素、集合からの取得。
toArray()→要素の集合を配列で取得
get([位置])→集合の特定の位置にある要素を参照。因数がない場合要素の集合を配列で取得
index([セレクタ/要素])→指定された要素が存在する位置を取得
集合に対して繰り返し処理をする
each(関数) $.each(集合, 関数)→\$(...)で指定した/集合それぞれの要素それぞれに対して関数の処理を適用する
戻り値:関数の処理に用いた集合
引数:要素の位置とそれぞれの要素
関数内のthisキーワードも要素を表す
関数の戻り値が↓
false→繰り返しの途中でeachメソッドは終了
false以外→処理を継続 ※null,undefinedでも処理は継続する。
map(関数) map(集合, 関数)→\$で指定した要素/集合それぞれの要素を関数で処理した結果を新たな要素とする。
戻り値:関数処理によって新たに生成された配列
関数の引数:それぞれの要素とその位置
関数内のthisキーワードも要素を表す。
それぞれに\$(...)で指定した要素に対して行うメソッドと
\$自体が持っているメソッドがあるが、
後者は、指定された要素に限らず、配列やオブジェクトに使用可能であり、前者は後者を簡潔に記述するために用いられる。
関数の引数で設定される関数をコールバック関数という。
配列やオブジェクトの操作
・配列の中から必要な要素を探すメソッド
$.inArray(値,配列[, 開始位置])
→引数の値が指定した配列内に存在するか探す。見つからなければ-1を返す。見つかった場合その位置を数値で返す。
$.grep(配列, 関数[, 反転])
→配列要素のうち、関数の処理結果がtrueとなるものを探す。第3引数がtrueの場合戻り値がtrue出ないものを探す。見つかった要素の集合を返す。
・配列の要素を操作するメソッド
$.merge(配列1, 配列2)
→2つの配列の要素を統合する。重複した値もそのまま要素として残る。結果は第1引数の配列に反映され、その値を戻り値として返す。
$.makeArray(オブジェクト)
→オブジェクトの集合と同じ要素を持つ配列を新たに生成する。DOMオブジェクトの集合と同じ配列を生成することで、配列を操作するメソッドが実行できるようになる。
$.unique(配列)
→重複するDOMオブジェクトを削除し、同じ値は1つだけしか含まないようにする。結果は引数の配列に格納される。
・オブジェクトに関するメソッド
$.extend([ディープコピーするか,]オブジェクト1 [, オブジェクト2...])
→オブジェクトのプロパティを追加する。オブジェクト2以降のプロパティをオブジェクト1に追加する。
$.contains(要素1, 要素2)
→要素2は要素1に含まれているか、DOMオブジェクト同士の包含関係を調べる。
オブジェクト型を判別
$.type(オブジェクト（※以下obj）)→オブジェクトの方を表す文字列を取得
$.isNumeric(obj)→オブジェクトが数値として解釈できるか判別
$.isArray(obj) →引数が配列か判別
$.isEmptyObject(obj)→引数は空のオブジェクト(プロパティのないオブジェクト)か判別
$.isPlainObject(obj)→{...}で生成されたオブジェクトか判別
$.isFunction(obj)→関数か判別
$.isWindow(obj)→windowオブジェクトか判別
$.typeによってオブジェクトの型を判定するより、isXxxxxメソッドで判別したほうが可読性が高い。
ブラウザのサポート状況で処理を変える。
$.support
→Webブラウザが必要な機能を備えているか判別するフラグを保持しているオブジェクト。参照するときは、.xxx(サポートを確認する機能名)でつないで記述する。
$.trim(文字列)
→文字列前後の空白を削除する。バージョン2.xでは、trimメソッドを持たない環境で実行するとエラーとなることがある。