初めて jQuery を学習し始めるときは、どれが jQuery オブジェクトでどれが DOM オブジェクトであるか区別できないかもしれません。 DOM オブジェクトに関してはあまり説明がありませんが、jQuery と 2 つの
間の変換に焦点を当てましょう。
ここ数日、jQuery初心者の方のお役に立てればと思い、jQueryの使い方をいくつかまとめてみました。
今回はjQueryオブジェクトとdomオブジェクトの相互変換を中心に見ていきます。これを理解しておけば今後jQueryを使うのがとても楽になります。
1. メソッド名の競合の解決方法 jQuery を使い始めるときは、まず jQuery と他のクラス ライブラリまたはカスタム js との間の競合を回避する必要があります。 まずは最も単純なコードを見てみましょう:
$(document) は、要素を取得するために自分で $(id) メソッドを定義することが多く、$() メソッドはプロトタイプなどのクラス ライブラリでも定義されているため、ここでは使用しません。したがって、競合を避けるために、jQuery("#id") も使用することをお勧めします。
2. jQuery オブジェクトと dom オブジェクトの変換 jQuery オブジェクトから dom オブジェクトへ: jQuery("#id") は通常の dom オブジェクトとは異なる jQuery オブジェクトを取得するため、dom オブジェクトのメソッドを使用して直接定義することはできません。 。 jQuery オブジェクト自体はコレクションであるため、インデックス付けによって jQuery オブジェクトを dom オブジェクトに変換できます。たとえば、jQuery("#id")[0] は dom オブジェクトです。 以下の例を見てください:
dom オブジェクトを jQuery オブジェクトに変換する: jQuery() を使用して、dom オブジェクトを jQuery オブジェクトに変換します。 例:
このようにして、たとえば、フォーカスのIDを持つテキストボックスにフォーカスを置きたい場合、jQueryオブジェクトとdomオブジェクト間の相互変換が実現されます。ただ:
---DOMオブジェクトをjQueryでラップして生成したオブジェクトです。 jQuery オブジェクトは jQuery に固有であり、jQuery のメソッドを使用できます。
$("#test").html() は、ID test を持つ要素内の HTML コードを取得することを意味します。このうち、html()はjQueryのメソッドです
document.getElementById("id").innerHTML;
DOM オブジェクトをラップした後に jQuery オブジェクトが生成されますが、jQuery は DOM オブジェクトのメソッドを使用できません。同様に、DOM オブジェクトも jQuery 内のメソッドをむやみに使用するとエラーが報告されます。例: $("#test").innerHTML、document.getElementById("id").html() などの記述方法が間違っています。
もう 1 つ注意すべき点は、#id をセレクターとして使用して取得した jQuery オブジェクトと document.getElementById("id") で取得した DOM オブジェクトは同等ではないことです。以下の 2 つの間の変換を参照してください。
jQuery は異なるものですが関連しているため、jQuery オブジェクトと DOM オブジェクトを相互に変換することもできます。 2 つを変換する前に、まず規則を作成します。jQuery オブジェクトが取得された場合は、次のように変数の前に $ を追加します。DOM オブジェクトが取得された場合は、次と同じです。通常. : var variab = DOM object; この規則は説明と区別の便宜のためだけであり、実際の使用では規定されていません。
jQuery オブジェクトを DOM オブジェクトに変換します:
jQuery オブジェクトを DOM オブジェクトに変換する 2 つの変換メソッド: [index] と .get(index);
(1) jQuery オブジェクトはデータ オブジェクトであり、対応する DOM オブジェクトは [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 オブジェクトの場合、DOM オブジェクトを $() でラップするだけで jQuery オブジェクトを取得できます。 $(DOM オブジェクト)
例: var v=document.getElementById("v"); //DOM オブジェクト
var $v=$(v) //jQuery オブジェクト
変換後は、任意の jQuery メソッドを使用できます。
以上の方法により、jQueryオブジェクトとDOMオブジェクトを任意に変換することができます。もう一度強調しておく必要があるのは、DOM 内のメソッドを使用できるのは DOM オブジェクトのみであり、jQuery オブジェクトは DOM 内のメソッドを使用できないということです。
変換ケース:
JQUERY オブジェクトを取得するメソッド
var jqueryObject = $("#test"); //jqeuryObject は jquery のすべてのメソッドを使用できますが、 は使用できません。
var jqueryObject = $("#test"); //jqeuryObject はすべての jquery メソッドを使用できますが、
は使用できません。
DOM オブジェクトのメソッド
var DOMObject = document.getElementById("test");//DOMObject は DOM のすべてのメソッドを使用できますが、jquery メソッドは使用できません。
var DOMObject = document.getElementById("test");//DOMObject は DOM のすべてのメソッドを使用できますが、jquery メソッドは使用できません
jqueryオブジェクト->DOMオブジェクト
var jqueryObject = $("#test");//jquery オブジェクトを取得
var DOMObject = jqueryObject[0];//jquery オブジェクトを DOM オブジェクトに変換します
var jqueryObject = $("#test");//jquery オブジェクトを取得
var DOMObject = jqueryObject[0];//jquery オブジェクトを DOM オブジェクトに変換します
DOM オブジェクト -> jquery オブジェクト
var DOMObject = document.getElementById("test");//DOM オブジェクトを取得します
var jqueryObject = $(DOMObject);//DOM オブジェクトを jquery オブジェクトに変換します
jquery を使用する場合、元の DOM オブジェクトのメソッドを使用する必要がある場合があります。たとえば、Activex コントロールの特定のメソッドを呼び出す場合、jquery オブジェクトを DOM オブジェクトに変換する必要があります。変換方法は次のとおりです。 :
方法 1: $("xxx")[index]
方法 2: $("xxx").get(index)
方法 3: $("xxx").eq(index)[0]