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 つを区別できれば、プログラムを書くときに明確になります。
