jQuery オブジェクトと DOM オブジェクト間の変換方法の紹介_jquery

jQuery オブジェクトと DOM オブジェクトの交換について議論する前に、まず変数を定義するスタイルについて合意します。取得したオブジェクトが jQuery オブジェクトの場合は、変数の前に $ を追加します。例:

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

var $variable = jQuery オブジェクト;

DOM オブジェクトを取得した場合は、次のように定義されます:

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

var 変数 = DOM オブジェクト;

1. jQuery オブジェクトを DOM オブジェクトに変換します

jQuery オブジェクトは DOM 内のメソッドを使用できませんが、jQuery オブジェクトが提供するメソッドに慣れていない場合、または jQuery が目的のメソッドをカプセル化していないため、DOM オブジェクトを使用する必要がある場合は、以下の 2 つのメソッドがあります。 jQuery には、jQuery オブジェクトを DOm オブジェクトに変換する 2 つのメソッド、[index] と get(index) が用意されています。

(1) jQueryオブジェクトは配列オブジェクトであり、対応するDOMオブジェクトは[index]メソッドで取得できます。

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

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

var $cr = $("#cr") //jQuery オブジェクト
var cr = $cr[0] //DOM オブジェクト
alert(cr.checked) //このチェックボックスがチェックされているかどうかを確認します

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

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

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

[js]var $cr = $("#cr");
var cr = $cr.get(0);
アラート(cr.checked)

2. DOM オブジェクトを jQuery オブジェクトに変換します

DOM オブジェクトの場合、$() で DOM オブジェクトをラップするだけで jQuery オブジェクトを取得できます。メソッドは $(DOM object) です。

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

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

var cr = document.getElementByID("cr"); //DOM オブジェクト
var $cr = $(cr);

変換後は、jQuery の任意のメソッドを使用できます。

上記のメソッドにより、jQueryオブジェクトとDOMオブジェクトを任意に相互変換することができます。

最後に、DOM オブジェクトのみが DOM 内のメソッドを使用できることを強調します。jQuery オブジェクトは DOM 内のメソッドを使用できませんが、jQuery オブジェクトは DOM を操作するためのより完全なツールのセットを提供します