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

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

WBOY

リリース： 2016-05-16 18:53:49

オリジナル

1166 人が閲覧しました

初めて jQuery を学習し始めるときは、どれが jQuery オブジェクトでどれが DOM オブジェクトであるか区別できないかもしれません。 DOM オブジェクトに関してはあまり説明がありませんが、jQuery と 2 つの
間の変換に焦点を当てましょう。
ここ数日、jQuery初心者の方のお役に立てればと思い、jQueryの使い方をいくつかまとめてみました。

今回はjQueryオブジェクトとdomオブジェクトの相互変換を中心に見ていきます。これを理解しておけば今後jQueryを使うのがとても楽になります。

1. メソッド名の競合の解決方法 jQuery を使い始めるときは、まず jQuery と他のクラスライブラリまたはカスタム js との間の競合を回避する必要があります。まずは最も単純なコードを見てみましょう:

コードをコピーしますコードは次のとおりです:

jQuery(ドキュメント).ready(function() {

alert("ようこそ!");

});

$(document) は、要素を取得するために自分で $(id) メソッドを定義することが多く、$() メソッドはプロトタイプなどのクラスライブラリでも定義されているため、ここでは使用しません。したがって、競合を避けるために、jQuery("#id") も使用することをお勧めします。

2. jQuery オブジェクトと dom オブジェクトの変換 jQuery オブジェクトから dom オブジェクトへ: jQuery("#id") は通常の dom オブジェクトとは異なる jQuery オブジェクトを取得するため、dom オブジェクトのメソッドを使用して直接定義することはできません。。 jQuery オブジェクト自体はコレクションであるため、インデックス付けによって jQuery オブジェクトを dom オブジェクトに変換できます。たとえば、jQuery("#id")[0] は dom オブジェクトです。以下の例を見てください:

コードをコピーしますコードは次のとおりです:

表示内容1

表示内容2

表示内容 3

span のコンテンツを取得するには、次の方法が正しいです。

コードをコピーしますコードは次のとおりです:

//jQuery メソッド、最初のスパンのコンテンツを取得します

jQuery("#show span").html();

// 3 番目のスパンのコンテンツを取得します

jQuery("#show span")[2].innerHTML;

//eq() は、eq(0) から始まる jQuery オブジェクトを返します。 2 番目のスパンのコンテンツを取得します

jQuery("#show spain").eq(1)[0].innerHTML;

//get() は、get(0) から開始して DOM オブジェクトを直接返します。 3 番目のスパンのコンテンツを取得

jQuery("#show spain").get(2).innerHTML;

dom オブジェクトを jQuery オブジェクトに変換する: jQuery() を使用して、dom オブジェクトを jQuery オブジェクトに変換します。例:

コードをコピーしますコードは次のとおりです:

jQuery(document.getElementById("show")).html();

出力結果は次のとおりです:

コードをコピーしますコードは次のとおりです:

表示内容1

表示内容2

表示内容 3

このようにして、たとえば、フォーカスのIDを持つテキストボックスにフォーカスを置きたい場合、jQueryオブジェクトとdomオブジェクト間の相互変換が実現されます。ただ:

コードをコピーしますコードは次のとおりです:

jQuery("#focus")[0].focus();

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

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

例:

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

このコードは、DOM を使用してコードを実装するのと同じです:

コードをコピーコードは次のとおりです:

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]