... jQueryのは、それがアラートで[object Object]
として表示要素を返しjQueryオブジェクトとDOM要素
。 getElementByID
が要素を返すと、[object HTMLDivElement]
と表示されます。それはどういう意味ですか?私はそれらの両方の違いを持つオブジェクトですか?
また、jQueryオブジェクトとDOM要素を操作できるメソッドはどれですか? 1つのjQueryオブジェクトが複数のDOM要素を表すことはできますか?
... jQueryのは、それがアラートで[object Object]
として表示要素を返しjQueryオブジェクトとDOM要素
。 getElementByID
が要素を返すと、[object HTMLDivElement]
と表示されます。それはどういう意味ですか?私はそれらの両方の違いを持つオブジェクトですか?
また、jQueryオブジェクトとDOM要素を操作できるメソッドはどれですか? 1つのjQueryオブジェクトが複数のDOM要素を表すことはできますか?
Iは、jQueryオブジェクトとjQueryオブジェクトは、DOM要素(複数可)を含むアレイのようなオブジェクトである
DOM要素間の関係を理解したいと思います。 jQueryオブジェクトには、使用するセレクタに応じて複数のDOM要素を含めることができます。
また、jQueryオブジェクトとDOM要素を操作できるメソッドはどれですか? 1つのjQueryオブジェクトが複数のDOM要素を表すことはできますか?
jQuery関数(完全なリストはウェブサイト上にあります)は、jQueryオブジェクト上で動作し、DOM要素では動作しません。あなたは.get()
を使用して、または直接希望インデックスにある要素にアクセスするjQueryの関数内のDOM要素にアクセスすることができます。つまり
$("selector")[0] // Accesses the first DOM element in this jQuery object
$("selector").get(0) // Equivalent to the code above
$("selector").get() // Retrieve a true array of DOM elements matched by this selector
、あなたにも同じ結果を得る必要があり、次の
<div id="foo"></div>
alert($("#foo")[0]);
alert($("#foo").get(0));
alert(document.getElementById("foo"));
の場合をjQueryオブジェクトの詳細については、see the documentationを参照してください。また、戻り値を持たない.get()
これはあなたのブラウザが巧妙であることです。どちらもオブジェクトですが、DOMElementsは特別なオブジェクトです。 jQueryはDOMElementsをJavascriptオブジェクトにラップするだけです。
デバッグ情報をもっと使いたい場合は、Firebug for FirefoxやChromeのビルトインインスペクタ(Firebugとよく似ています)などのデバッグツールをお勧めします。
ほとんどjQueryのメンバーFunctions
のドキュメントをチェックアウトするのではなく、現在のjQuery Object
または別のjQuery Object
を返します。
したがって、
console.log("(!!) jquery >> " + $("#id")) ;
がDocument
に対してセレクタString
("#id"
)を評価した結果であるコレクションを維持jQuery Object
すなわち、[object Object]
が返され、
一方、
console.log("(!!) getElementById >> " + document.getElementById("id")) ;
戻り値が
div
Element
の場合、210/
は[object HTMLDivElement]
(または実際はIEでは[object Object]
)を返します。方法はDOM要素対jQueryオブジェクトを操作することができるものも
? (1)単一のjQueryオブジェクトが複数のDOM要素を表すことはできますか? (2)
(1)DOM Object
Sに関係のjQueryのメンバーFunction
複数のホストがあります。特定のタスク(例えば、Node
の選択や操作など)がある場合は、関連するFunction
のjQuery APIドキュメントを検索するのが最善の方法です。
(2)はい、単一jQuery Object
は、複数のDOM Element
のリストを維持することができます。この自動キャッシュ動作に基づいて構築されるFunctions
(jQuery.find
またはjQuery.each
など)が複数存在します。
jQueryを使用してDOM要素を取得すると、jQueryオブジェクトにはその要素への参照が含まれます。 getElementById
のようなネイティブ関数を使用すると、jQueryオブジェクトに含まれていない要素への参照が直接取得されます。
jQueryオブジェクトは、複数のDOM要素を含むことができる配列のようなオブジェクトである:
var jQueryCollection = $("div"); //Contains all div elements in DOM
上記ラインはjQueryをすることなく実行することができる:実際に
var normalCollection = document.getElementsByTagName("div");
、それはまさにjQueryのdiv
のような簡単なセレクタを渡すと内部で行います。あなたはget
メソッドを使用してjQueryのコレクション内の実際の要素にアクセスすることができます。
var div1 = jQueryCollection.get(0); //Gets the first element in the collection
、要素、または要素のセットを持っている場合は、jQueryオブジェクトの内側に、あなたはjQueryのAPIで利用可能な方法のうちのいずれかを使用することができます一方、生の要素がある場合はネイティブJavaScriptメソッドしか使用できません。
先月、jQueryを使い始めたばかりで、似たような質問が私の周りを走っていました。
あなたが関数内にいて、呼び出し元を参照するとしたら、のいずれかを使用することができます。これは、または$(this)
;違いは何ですか?あなたが$(this)
を使用するときは、this
をjQueryオブジェクトの中にラップしています。利点は、オブジェクトがjQueryオブジェクトであると、そのオブジェクト上のすべてのjQuery関数を使用できることです。
var s = '<div>hello <a href='#'>world</a></div><span>!</span>'
という要素の文字列表現を、$():$(s)
に文字通りラップするだけでjQueryオブジェクトの中にラップすることもできるので、かなり強力です。これでjQueryでこれらの要素をすべて操作できます。
http://stackoverflow.com/questions/15479988/raw-dom-element-vs-jquery-object –