jQuery オブジェクトと DOM オブジェクトの使用手順_jquery

1. jQuery オブジェクトと DOM オブジェクト
初めて jQuery を学習する場合、どれが jQuery オブジェクトでどれが DOM オブジェクトであるかを区別するのが難しいことが多いため、jQuery オブジェクトと DOM オブジェクトを理解することに重点を置く必要があります。 DOM オブジェクトとそれらの違い:
DOM オブジェクトは従来のメソッド (JavaScript) を使用して取得されるオブジェクトであり、jQuery オブジェクトは jQuery クラス ライブラリのセレクターを使用して取得されます。 >

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

var domObj = document.getElementById("id"); // DOM object

var $obj = $( "#id"); //jQuery object;


jQuery オブジェクトは、jQuery によって DOM オブジェクトをラップすることによって生成されるオブジェクトです。 。オブジェクトが jQuery オブジェクトの場合は、次のような jQuery のメソッドを使用できます。

$("#foo").html(); // foo の ID を持つ要素の HTML コードを取得します。 html() は jQuery 固有のメソッドです。
上記のコードは次と同等です:
document.getElementById("foo").innerHTML;

注: DOM オブジェクトのメソッドは使用できません。 jQueryオブジェクト内で。
たとえば、$("#id").innerHTML と $("#id").checked は間違っています。$("#id").html() と $("# id") を使用できます。代わりに .attr (「チェック済み」) を使用します。同様に、DOM オブジェクトでは jQuery メソッドを使用できません。 jQuery を学習するときは、正しい概念を確立し、jQuery オブジェクトと DOM オブジェクトの違いを区別する必要があります。その後、jQuery を学習するのがはるかに簡単になります。


2. jQuery オブジェクトと DOM オブジェクト間の変換

上記の最初の点で述べたように、jQuery オブジェクトと dom オブジェクトは異なります。たとえば、jquery オブジェクトは dom メソッドを使用できず、dom オブジェクトは jquery メソッドを使用できません。では、jquery が必要なメソッドをカプセル化していない場合はどうすればよいでしょうか。 現時点では、jquer オブジェクトを dom オブジェクトに変換できます

jquery オブジェクトを dom オブジェクトに変換します
jquery には、jquery オブジェクトを dom オブジェクトに変換するための 2 つのメソッドが用意されています。 ] と get(index) を実行します。なぜ添字が使用されるのか疑問に思う人もいるかもしれません。はい、jquery オブジェクトは配列オブジェクトです。
次のコードは、jquery オブジェクトを dom オブジェクトに変換し、dom オブジェクト メソッドを使用する方法を示します。

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

var $cr=$("#cr"); //jquery object

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


dom オブジェクトを jquery オブジェクトに変換します

dom オブジェクトの場合、jquery オブジェクトを取得するには、dom オブジェクトを $() でラップするだけです。メソッドは $(dom object); です。

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

var cr=document.getElementById("cr "); //dom Object

var $cr = $(cr); // jquery オブジェクトに変換


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

上記の方法により、jquery オブジェクトと dom オブジェクトを相互に任意に変換できます。
最後に、dom オブジェクトのみが dom 内のメソッドを使用できることはできませんが、jquery オブジェクトは、 dom を操作するためのより完全なツール セット。jquery の dom 操作については後の記事で詳しく説明します。


ps: 一般的に使用される jquery オブジェクトはすべて $() 関数を通じて作成されます。
提案: 取得したオブジェクトが jquery オブジェクトの場合、どれが jquery オブジェクトであるかを識別しやすくするために、変数の前に $() を追加します。 :
var $variable = jquery object;
dom オブジェクトが取得された場合は、次のように定義されます:
var variable = dom object