ホームページ >ウェブフロントエンド >フロントエンドQ&A >jqueryオブジェクトとdomオブジェクト間の変換方法は何ですか
メソッド: 1. "obj[index]" メソッドと "obj.get(index)" メソッド。これら 2 つのメソッドは、jQuery オブジェクトを dom オブジェクトに変換できます。Index は、jQuery オブジェクト内の DOM オブジェクトのインデックスです。 ; 2. dom オブジェクトを jquery オブジェクトに変換できる「$(DOM object)」メソッド。
このチュートリアルの動作環境: Windows10 システム、jquery3.2.1 バージョン、Dell G3 コンピューター。
1. jQuery オブジェクトを DOM オブジェクトに変換
jQuery オブジェクトが属するclass 配列オブジェクト。内部で DOM オブジェクトを配列要素として使用します。 jQuery オブジェクトを DOM オブジェクトに変換するには、「obj[index]」と「obj.get(index)」の 2 つの方法があります。ここで、index は jQuery オブジェクト内の DOM オブジェクトのインデックスを表します。これら 2 つの変換方法については、以下で説明します。
(1)obj[index]
obj[index]メソッドによりjQueryオブジェクトをDOMオブジェクトに変換するサンプルコードは以下の通りです。
<div>第1个div</div> <div>第2个div</div> <script> //获取jQuery对象 var divs = $('div'); //通过索引的方式,将jQuery对象转换成DOM对象 var div1 = divs[0]; var div2 = divs[1]; //输出div元素的内容 alert(div1.innerHTML); //输出结果:第1个div alert(div2. innerHTML); //输出结果:第2个div </script>
上記のコードからわかるように、jQuery オブジェクトには複数の DOM 要素を含めることができ、インデックス作成を通じて特定の DOM オブジェクトを取得できます。
(2) obj.get(index)
obj.get(index)メソッドによりjQueryオブジェクトをDOMオブジェクトに変換するサンプルコードは以下の通りです。
<div>第1个div元素</div> <script> var result = $('div').get(0).innerHTML; alert(result); //输出结果:第1个div元素 </script>
2. DOM オブジェクトを jQuery オブジェクトに変換します
var name = $(DOM对象)
DOM オブジェクトを $() 関数のパラメーターとして使用して、 jQueryオブジェクトに変換した場合のサンプルコードは以下の通りです。
<button id="btn">say hello</button> <script> //获取DOM对象btn var btn = document.getElementById('btn'); //将DOM对象转换成jQuery对象 var btnl = $(btn); //验证转换结果 alert(btn === btnl[0]); //输出结果: true </script>
上記のコードからわかるように、DOM オブジェクトと jQuery オブジェクトは開発中に柔軟に相互に変換できます。
ビデオ チュートリアルの推奨: jQuery ビデオ チュートリアル
以上がjqueryオブジェクトとdomオブジェクト間の変換方法は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。