ここ数日はjQueryの使い方をいくつかまとめて、jQuery初心者の方に一定の役割を果たせればと思っています。
今日は、主にjQueryオブジェクトとdomオブジェクトの変換を見て、これを理解し、jQueryの将来の使用がはるかに便利になります。
1、メソッド名の競合の解決策jQueryの使用の初めに、まずjQueryと他のクラスライブラリやカスタムjsの競合を避ける必要があります。 まず、コードの最も単純な部分を見てください：
jQuery(document).ready(function() {
alert("Welcome!");
});
なぜなら、$メソッドは要素を取得するために定義されることが多く、prototypeなどのライブラリで定義されているからです。
2、jQueryオブジェクトとdomオブジェクトの変換 jQueryオブジェクトとdomオブジェクトの変換：jQuery("#id")はjQueryオブジェクトから取得するため、通常のdomオブジェクトとは異なり、domオブジェクトで定義されているメソッドを直接使用することはできません。jQueryオブジェクト自体はコレクションなので、jQuery("#id")[0]がdomオブジェクトであるように、jQueryオブジェクトをdomオブジェクトにインデックスすることができます。 次の例を見てください：
<div id="show">
<span>コンテンツ1を表示する</span>
<span>コンテンツ2を表示する</span>
<span>コンテンツ3を表示する</span>
</div>
スパンの内容を取得するには、以下の方法を使用します。
//jQueryメソッドで、最初のスパンの内容を取得する
jQuery("#show span").html();
//番目のスパンの内容を取得する
jQuery("#show span")[2].innerHTML;
//eq()eqから始まるjQueryオブジェクトを返す。番目のスパンの内容を取得する
jQuery("#show span").eq(1)[0].innerHTML;
//get()domオブジェクトを直接返す。3番目のスパンの内容を取得する
jQuery("#show span").get(2).innerHTML;
domオブジェクトからjQueryオブジェクトへ：jQuery()を使用することで、domオブジェクトからjQueryオブジェクトへ変換することができます。 例えば
jQuery(document.getElementById("show")).html();
出力結果は
これにより、jQueryオブジェクトとdomオブジェクトの相互変換が実現され、たとえば、テキストボックスのフォーカスのidにフォーカスを維持させたい。簡単だ：
<div id="show">
<span>コンテンツ1を表示する</span>
<span>コンテンツ2を表示する</span>
<span>コンテンツ3を表示する</span>
</div>
