jQueryオブジェクトとDOMオブジェクトの変換方法を詳しく解説_jquery

この記事では、jquery オブジェクトと dom オブジェクト間の変換方法を例とともに分析します。参考のために全員と共有してください。詳細は次のとおりです。

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

jquery クラス ライブラリのさまざまな関数を呼び出せるのは jquery オブジェクトだけです。同様に、dom オブジェクトの一部のプロパティとメソッドは jquery 上で呼び出すことができませんが、基本的に jquery クラス ライブラリが提供する関数にはすべての dom 操作が含まれます。場合によっては、特に jquery を初めて使用し、jquery のすべての機能を覚えていない場合、jquery セレクターや独自の dom 関数を長い間開発に使用することになります。したがって、2 つのオブジェクトの変換が必要です。

jquery オブジェクトのインデックスには dom オブジェクトが保存されているため、インデックスを介して jquery オブジェクトを dom オブジェクトに変換できます (実際には、jquery オブジェクトに保存された dom オブジェクトが取得されます)。

$("#myphoto")[0];

インデックスを通じて dom オブジェクトを返した後、dom オブジェクトの src 属性の取得など、dom オブジェクトのさまざまなメソッドと属性を使用できます。

alert($("#myphoto")[0].src);

jquery オブジェクト内の各要素を反復処理する場合は、通常、 each() 関数を使用します。

echo(callback);

callback() はコールバック関数であり、この関数の this も dom 要素を指します。

$("#myphoto").each(function(i){
     this,src="test"+i+".jpg";
});

怠け者向けのちょっとしたヒントです。これが jquery オブジェクトなのか、それとも別の jquery 関数のこのオブジェクトなのかを覚えたくない場合は、「this」メソッドを使用して両方を jquery オブジェクトに変換できます。 object はすでに jquery オブジェクトです。これも間違いではありません。

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

すでに dom オブジェクトを取得している場合は、「jquery(elements)」関数を使用してそれを jquery オブジェクトに変換できます。

var img=document.getelementbyid("myphoto");
jquery(img).css("border","solid 2px #ff0000");

上記のコードでは、img は dom を使用して取得された dom オブジェクトです。 jquery オブジェクトに変換した後、jquery オブジェクトの css() メソッドを使用してスタイルを変更できます。

jquery には次の実装が内部にあるため、「jquery」の代わりに「$」を使用できます。

jquery=window.jquery=window.$

「$」文字は javascript で変数名として使用でき、プレフィックスとして表示できます。ただし、他のライブラリやプログラムによっては、すでに「$」を変数名として使用している場合があります。

jQuery(img).css("border","solid 2px #FF0000");
$(img). css("border","solid 2px #FF0000");

上記の 2 つのステートメントは同等です。

「jquery(elements)」関数の elements パラメータは、jquery オブジェクトにすることもできます。今回は jquery オブジェクトを変換することに意味はありませんが、これは、jquery オブジェクトの型が不明な場合に使用するためです。 object が jquery オブジェクトまたは dom オブジェクトである場合は、再度変換できます。変換のためにこの関数を呼び出します。これにより、このオブジェクトが jquery オブジェクトであることが保証されます。

さらに jquery 関連のコンテンツに興味がある読者は、このサイトの特別トピック「dom ノードを操作する jquery メソッドの概要」を参照してください。 " "jquery の一般的な操作スキルの概要", "jquery の一般的なイベントの使用法とテクニックの概要"、"jquery 操作の json データの概要"、"jquery xml 操作スキルの概要" および "jquery 拡張スキル概要 》

この記事が jquery プログラミングのすべての人に役立つことを願っています。