jqueryオブジェクトとdomオブジェクト間の変換方法は何ですか

WBOY
リリース: 2022-06-02 15:40:50
オリジナル
7330 人が閲覧しました

メソッド: 1. "obj[index]" メソッドと "obj.get(index)" メソッド。これら 2 つのメソッドは、jQuery オブジェクトを dom オブジェクトに変換できます。Index は、jQuery オブジェクト内の DOM オブジェクトのインデックスです。 ; 2. dom オブジェクトを jquery オブジェクトに変換できる「$(DOM object)」メソッド。

jqueryオブジェクトとdomオブジェクト間の変換方法は何ですか

このチュートリアルの動作環境: Windows10 システム、jquery3.2.1 バージョン、Dell G3 コンピューター。

jQuery オブジェクトと dom オブジェクトの変換方法

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 = $(&#39;div&#39;);
//通过索引的方式,将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 = $(&#39;div&#39;).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(&#39;btn&#39;);
//将DOM对象转换成jQuery对象
var btnl = $(btn);
//验证转换结果
alert(btn === btnl[0]);    //输出结果: true
</script>
ログイン後にコピー

上記のコードからわかるように、DOM オブジェクトと jQuery オブジェクトは開発中に柔軟に相互に変換できます。

ビデオ チュートリアルの推奨: jQuery ビデオ チュートリアル

以上がjqueryオブジェクトとdomオブジェクト間の変換方法は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート