jQuery オブジェクトと DOM オブジェクト

前書き

JavaScript プログラムを作成するときは、まずオブジェクトを取得する必要があります。jQuery セレクターは、通常のオブジェクトの取得方法を完全に変えることができます。たとえば、「title 属性を持ち、次の内容を含む」など、ほぼすべてのセマンティクスを持つオブジェクトを取得できます。 value< a> 要素でテストする場合、これらのタスクを完了するには、jQuery セレクター文字列を記述するだけです。jQuery セレクターを学習することは、jQuery を学習する上で最も重要なステップです。

Dom オブジェクトと jQuery ラッパー セット

プログラムを書くときでも、API ドキュメントを読むときでも、Dom オブジェクトと jQuery ラッパー セットの区別に常に注意を払う必要があります。

1. Dom オブジェクト

従来の JavaScript 開発では、次のように常に最初に Dom オブジェクトを取得します。

var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div");

ID に基づいて単一の Dom オブジェクトを取得するために document.getElementById メソッドをよく使用します。 document.getElementsByTagName メソッド HTML タグ名に基づいて Dom オブジェクト コレクションを取得します。

また、イベント関数では、メソッド関数で this を使用してイベントトリガーオブジェクトを参照することもできます (ただし、IE6 ではマルチキャストイベント関数に問題があります)、または target (Firefox) または srcElement ( IE6) トリガーを取得するイベントオブジェクト イベントの Dom オブジェクト。

ここで取得するのはすべて Dom オブジェクトであることに注意してください。Dom オブジェクトには、input、div、span などのさまざまなタイプもあります。 Dom オブジェクトには限られたプロパティとメソッドがあります。

2. jQueryラッパーセット

jQueryラッパーセットはDomオブジェクトの拡張版と言えます。 jQuery の世界では、1 つであってもグループであっても、すべてのオブジェクトは jQuery ラッパー セットにカプセル化されます。たとえば、要素を含む jQuery ラッパー セットを取得すると、

var jQueryObject = $("#testDiv");

jQuery ラッパー セットがオブジェクトとしてまとめて呼び出されます。 jQuery ラッパー セットには、豊富なプロパティとメソッドのセットが含まれています。

3. DomオブジェクトとjQueryオブジェクトの変換

(1) DomからjQueryのパッケージ化セット

jQuery が提供する関数を使用したい場合は、まず jQuery ラッパー セットを構築する必要があります。この記事で紹介する jQuery セレクターを使用して、次のような jQuery ラッパー セットを直接構築できます。

$("#testDiv");

上記のステートメントによって構築されたラッパー セットには、id が testDiv である要素が 1 つだけ含まれています。

または、次のような Dom 要素をすでに取得している場合:

var div = document.getElementById("testDiv");

上記のコードでは、div は Dom 要素であり、Dom 要素を jQuery ラッパー セットに変換できます:

var domToJQueryObject = $(div);

(2) jQuery ラッパー セットDom オブジェクトへの変換

jQuery ラッパー セットはコレクションなので、インデクサーを通じてその中の要素にアクセスできます:

var domObject = $("#testDiv")[0];

インデクサーを通じて返されるものは jQuery ラッパー セットではなく、Dom オブジェクトであることに注意してください!

jQuery ラッパー each() などのセットの一部のトラバーサル メソッドでは、次のようなトラバーサル関数を渡すことができます。

$("#testDiv").each(function() {
  alert(this)
});

を使用したい場合はどうすればよいですか。 Dom オブジェクトを操作するための jQuery メソッドを使用しますか? 上記の導入方法を使用してください: 変換方法に従ってください:

$("#testDiv").each(function() {
  $(this).html("修改内容")
});

概要: まず、皆さんに Dom オブジェクトと jQuery パッケージ セットの概念を明確にしてもらいます。これにより、学習が大幅に短縮されます。この 2 つを区別できれば、プログラムを書くときに明確になります。