jquery オブジェクトと javascript オブジェクト (DOM オブジェクト) を相互に変換する_jquery

jQuery オブジェクトは、DOM オブジェクトを jQuery でラップすることによって生成されるオブジェクトです。 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"); は両方とも間違っています。

もう 1 つの例として、jQuery を書くときに this.attr("src","test.jpg"); と書きますが、これは実際には DOM オブジェクトです。 attr("src" ,"test.jpg") は jQuery メソッドであるため、エラーが発生しました。この問題を解決するには、DOM オブジェクトを $(this).attr("src","test.jpg");

などの jQuery オブジェクトに変換する必要があります。

1. DOM オブジェクトを jQuery オブジェクトに変換します

DOM オブジェクトの場合、DOM オブジェクトを $() でラップするだけで jQuery オブジェクト $(DOM object) を取得できます。 注: var は定義された変数です

例:

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

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

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

jQuery オブジェクトを DOM オブジェクトに変換する 2 つの変換メソッド: [index] と .get(index)

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

例:

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 内のメソッドを使用できません。