- 索引
- 1章:jQuery入門
-
- ├ jQueryのメリット
- ├ readyイベント
- ├ オブジェクトについて
- ├ メソッドについて
- ├ 情報の取得
- ├ イベント(1)
- ├ イベント(2)
- └ 初歩なサンプル
- 2章:jQuery基礎
-
- ├ thisについて(1)
- ├ thisについて(2)
- ├ jQueryとDOM要素
- ├ 簡単な演出
- ├ thisから辿る
- ├ 汎用的なアニメ(1)
- ├ 汎用的なアニメ(2)
- ├ アニメの停止
- ├ アニメを管理する仕組み
- └ 汎用的なアニメ(3)
- 3章:jQuery発展
-
- ├ イベントフロー(1)
- ├ イベントフロー(2)
- ├ イベントフロー(3)
- ├ 画像のプリロード
- ├ jQueryの高速化
- └ メソッドチェーン
- 番外編:研究
-
- ├ イベントを外す
- ├ cssアニメとの連携(1)
- ├ cssアニメとの連携(2)
- ├ cssアニメとの連携(3)
- ├ セレクタの自作(1)
- ├ セレクタの自作(2)
- ├ クロージャ(1)
- ├ クロージャ(2)
- └ クロージャ(3)
jQueryとDOM要素
概要
jQueryオブジェクトとDOM要素の互換性
前回のページでDOM要素であるthisを$( )を利用してjQueryに変換できると説明しましたが、jQueryオブジェクトをDOM要素に変換することもできます。正確にはjQueryオブジェクトの中にDOM要素が入っているので、jQueryオブジェクトからDOM要素を取り出すイメージになります。
解説
jQueryオブジェクトからDOM要素を取り出す
サンプル(dom/01.html)のソースを開いて、body内にbutton要素とdiv要素が5個あることを確認してください。これまでのサンプルと比べるとbutton要素が追加されています。
<button>click</button> <div></div> <div></div> <div></div> <div></div> <div></div>
jQueryは以下の様に記述されており、まず2行目に着目してください。$("div")によってdiv要素(5つ)がjQueryオブジェクトに変換されます。「概要」で説明したようにjQueryオブジェクトは配列のような構造を持っているため、配列アクセス演算子[ ]で中の要素にアクセスできます。
$("button").click(function(){ myDOM = $("div")[0]; myDOM.innerHTML = "XXXXX"; });
サンプルでは[0]としているので、最初のDOM要素を取り出して左辺の変数「myDOM」に代入しています。そして3行目でjavaScriptのinnerHTMLプロパティを利用してテキストを「XXXXX」に設定しています。
結果として、buttonをクリックすると最初のdiv要素のテキストに「XXXXX」が設定されます。この結果からjQueryオブジェクト内にDOM要素が格納されていることが確認できます。
DOM要素をjQueryオブジェクトに変換
前回のthis(DOM要素)を$( )を利用してjQueryオブジェクトに変換しましたが、再度確認しておきます。サンプル(dom/02.html)のソースを開いて、body内の構成がdom/01.htmlと同じ事を確認してください。
jQueryは以下の様に記述されており、2行目でjavaScriptのgetElementsByTagNameメソッドによってdiv要素のDOM要素を収集し左辺の変数「myDOM」に代入しています。そして3行目で$( )を利用してmyDOMをjQueryオブジェクトに変換しtextメソッドによってテキスト情報を「XXXXX」にします。
$("button").click(function(){ myDOM = document.getElementsByTagName("div"); $(myDOM).text("XXXXX"); });
結果として、buttonをクリックすると全てのdiv要素のテキストが「XXXXX」となります。
getElementsByTagNameメソッドは複数の要素に対応するため、マッチするDOM要素のリストを「配列」として返します。そのため全てのdiv要素のテキストが変更されました。
DOM要素を扱うことは少ないと思いますが、もし登場したら$( )を利用してjQueryオブジェクトに変換し、jQueryとして利用しましょう。
メモ
jQueryオブジェクトは配列ではありません
概要の図でjQueryオブジェクトは配列の「ような」と説明しています。これは全くの配列ではないためです。実際に配列にDOM要素を入れてもjQueryオブジェクトとしては扱えません。→サンプル(dom/test01.html)
$("button").click(function(){ myDOM = document.getElementsByTagName("div"); myJquery = [myDOM[0], myDOM[1], myDOM[2]]; myJquery.text("XXXXX"); });
3行目でDOM要素を3つ設定した配列をmyJqueryとして作成していますが、4行目でmyJqueryにjQueryのtextメソッドを利用しても機能しません。jQueryオブジェクトは配列のような構造を持ちますが、配列ではありません。結果として、buttonをクリックしてもdiv要素のテキストは変更されません。
まだthisに関する説明は必要なのですが、次回は簡単な演出について説明します。