ホームページ >ウェブフロントエンド >jsチュートリアル >jQueryオブジェクトとDOMオブジェクト間の相互変換の実装コード_jquery
jQuery オブジェクトと DOM オブジェクトは相互に変換されます。
jQuery オブジェクトと DOM オブジェクト
jQuery オブジェクトは、DOM オブジェクトを jQuery でラップして生成されるオブジェクトです。 jQuery オブジェクトは jQuery に固有のものです。ただし、$("#img").attr("src","test.jpg"); などの DOM メソッドは使用できません。 img") は jQuery オブジェクトです。
DOM オブジェクトは Javascript に固有のオブジェクト操作です。 DOM オブジェクトは JavaScript 固有のメソッドを使用できますが、jQuery のメソッドは使用できません。例: document.getElementById("img").src="test.jpg"; document.getElementById("img") は DOM オブジェクトです。 " src","test.jpg"); と document.getElementById("img").src="test.jpg"; は同等で正しいですが、 $("#img").src="test .jpg" ; または document.getElementById("img").attr("src","test.jpg"); は両方とも間違っています。
例について説明します。これは、jQuery を書くとき、よく次のように書きます: this.attr("src","test.jpg"); しかし、これはエラーです。実際、これは DOM オブジェクトであり、.attr("src","test.jpg") は jQuery メソッドであるため、何か問題が発生しました。この問題を解決するには、DOM オブジェクトを $(this).attr("src","test.jpg");
1 のように jQuery オブジェクトに変換する必要があります。 jQuery オブジェクト:
すでに DOM オブジェクトである DOM オブジェクトの場合、DOM オブジェクトを $() でラップするだけで jQuery オブジェクトを取得できます。 $(DOM object)
例: var v=document.getElementById("v"); //DOM オブジェクト
var $v=$(v); //jQuery オブジェクト
を変換できますjQueryのメソッドを自由に使用できます。
2. jQuery オブジェクトを DOM オブジェクトに変換します:
jQuery オブジェクトを DOM オブジェクトに変換する 2 つの方法: [index] と .get(index)
(1) jQuery オブジェクトはdata オブジェクトに対応する DOM オブジェクトは、[index] メソッドを通じて取得できます。
例: var $v =$("#v"); //jQuery オブジェクト
var v=$v[0]; //DOM オブジェクト
alert(v.checked); this チェックボックスが選択されているかどうか
(2) jQuery 自体は、.get(index) メソッドを通じて、次のような対応する DOM オブジェクト
を取得します。 //jQuery object
var v=$v.get(0) //DOM object
alert(v.checked) //このチェックボックスが選択されているかどうかを検出します