jqueryオブジェクトとDOMオブジェクトを相互に変換する方法の詳細なサンプルコード

jQuery オブジェクトは、jQuery を介して DOM オブジェクトをラップすることによって生成されるオブジェクトです。 jQuery オブジェクトは jQuery に固有のものです。ただし、DOM メソッドは使用できません。例: $("#img").attr("src","test.jpg"); img") は jQuery オブジェクトです。

DOM オブジェクトは、JavaScript に固有のオブジェクト操作の一部です。 DOM オブジェクトは JavaScript 固有のメソッドを使用できますが、jQuery のメソッドは使用できません。例: document.getElementById("img").src = "test.jpg"; document.getElementById("img") は DOM オブジェクトです。

$("#img").attr("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 メソッドなのでエラーが発生しました。この問題を解決するには、$(this).attr("src","test.jpg");

1 のように、DOM オブジェクトを jQuery オブジェクトに変換する必要があります。

DOM オブジェクトの場合、$(DOM オブジェクト) を取得するには、DOM オブジェクトを $() でラップするだけです。 注: var は、次のような定義済み変数

です。

var v = document.getElementById("v"); //DOM对象
var $v = $(v); //jQuery 对象

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

2. jQuery オブジェクトを DOM オブジェクトに変換する

jQuery オブジェクトを DOM オブジェクトに変換する方法については、[index] と .get(index) の 2 つの変換メソッドで説明します

(1) jQuery オブジェクトはデータ オブジェクトです。 、[index] メソッドを通じて対応する DOM オブジェクトを取得できます。

例:

var $v = $("#v"); //jQuery 对象
var v = $v[0]; //DOM 对象
alert(v.checked); //检测这个checkbox是否被选中

(2) jQuery自体は、.get(index)メソッドを通じて対応するDOMオブジェクトを提供します

例:

var $v = $("#v"); //jQuery 对象
var v = $v.get(0); //DOM对象 ( $v.get()[0] 也可以 )
alert(v.checked); //检测这个 checkbox 是否被选中

上記のメソッドを通じて、任意にjQuery オブジェクトと DOM オブジェクトの間では、DOM オブジェクトのみが DOM 内のメソッドを使用でき、jQuery オブジェクトは DOM 内のメソッドを使用できないことを再度強調する必要があります。

以上がjqueryオブジェクトとDOMオブジェクトを相互に変換する方法の詳細なサンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。