jQueryオブジェクトとDOMオブジェクト間の変換

クズども · 掲載地 2016/01/04 16:44:58

jQueryオブジェクトとは何ですか?

--- は DOM オブジェクトを jQuery でラップして生成されるオブジェクトです。 jQueryオブジェクトはjQuery固有のものであり、jQueryのメソッドを使用できます。

たとえば：

$("#test").html() は、ID testをテストとする要素内のHTMLコードを取得することを意味します。 html()はjQueryのメソッドです

このコードはDOM内でのコードを実装することに相当します:

document.getElementById("id").innerHTML;

jQueryオブジェクトはDOMオブジェクトをラップして生成されますが、jQueryはDOMオブジェクトのメソッドを使用できず、DOMオブジェクトもjQueryのメソッドを使えません。ランダムに使うとエラーが発生します。例えば、$("#test").innerHTML、document.getElementById("id").html()はすべて間違っています。

もう一つ注意点は、#id をセレクタとして使うのはjQueryオブジェクトとdocument.getElementById("id")で取得したDOMオブジェクトであり、これらは同等ではないことです。両者の変換については以下を参照してください。

jQueryは異なりつつ関連しているため、jQueryオブジェクトとDOMオブジェクトは互いに変換可能です。 2つを変換する前に、まず慣例を示します:もし1つがjQueryオブジェクトなら、変数の前に$を加えます。例えば、var $variab = jQueryオブジェクト; DOMオブジェクトを入手した場合は、通常と同じです:var variab = DOMオブジェクト; このような合意は説明と区別の便宜のためであり、実際の使用には規定されていません。

jQueryオブジェクトからDOMオブジェクトへ:

jQueryオブジェクトをDOMオブジェクトに変換するための変換方法は2つあります:[index]と.get(index);

(1) jQueryオブジェクトはデータオブジェクトであり、[index]メソッドを用いて取得できます。

例えば:var $v =$(「#v」); jQueryオブジェクト

var v=$v[0]; DOMオブジェクト

alert(v.checked) // このチェックボックスがチェックされているか検出

(2) jQuery自体が.get(index)メソッドを通じて対応するDOMオブジェクトを提供します

例えば:var $v=$(「#v」); jQueryオブジェクト

var v=$v.get(0); DOMオブジェクト

alert(v.checked) // このチェックボックスがチェックされているか検出

DOMオブジェクトからjQueryオブジェクトへ:

DOMオブジェクトの場合、$()でDOMオブジェクトをラップするだけでjQueryオブジェクトが得られます。 $(DOMオブジェクト)

例えば: var v=document.getElementById("v"); DOMオブジェクト

var $v=$(v); jQueryオブジェクト

変換後はjQueryのメソッドを自由に使えます。

上記の方法を使うことで、jQueryオブジェクトとDOMオブジェクトを任意に変換できます。強調すべきは、DOMオブジェクトはDOM内のメソッドのみを使用でき、jQueryオブジェクトはDOM内のメソッドを使用できないということです。

[JavaScript] jQueryオブジェクトとDOMオブジェクト間の変換

関連記事

閲覧したセクション