domオブジェクトをjqueryオブジェクトに変換する方法-フロントエンドQ&A-php.cn

domオブジェクトをjqueryオブジェクトに変換する方法

青灯夜游

リリース： 2022-03-11 15:32:41

オリジナル

4581 人が閲覧しました

dom オブジェクトを jquery オブジェクトに変換する方法: "$()" を使用して DOM オブジェクトをラップするだけです、構文は "$(DOM object)" です; 変換後、任意の jQuery メソッドを使用できます。

domオブジェクトをjqueryオブジェクトに変換する方法

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

DOM オブジェクト

DOM (Document Object Model、Document Object Model) では、各 DOM をツリーとして表すことができます。まず簡単な例を見てみましょう。コードは次のとおりです。

// ...省略其他代码
<h3>例子</h3>
<p title="选择你最喜欢的水果">你最喜欢的水果是？</p>
<ul>
    <li>苹果</li>
    <li>橘子</li>
    <li>菠萝</li>
</ul>
// ...省略其他代码

ログイン後にコピー

は、上記の HTML 構造を DOM ツリーとして記述します。

domオブジェクトをjqueryオブジェクトに変換する方法

この DOM 内のノードツリーは DOM 要素ノードです。 JS の getElementByTagName または getElementById を通じて要素ノードを取得できます。このようにして得られたDOM要素がDOMオブジェクトです。

jQuery オブジェクト

jQuery オブジェクトは、DOM オブジェクトを jQuery でラップすることで生成されるオブジェクトです。

jQuery オブジェクトは jQuery に固有のものです。オブジェクトが jQuery オブジェクトの場合は、jQuery のメソッドを使用できます。 DOM オブジェクトのメソッドを jQuery オブジェクトで使用することはできません。また、同じ DOM オブジェクトで jQuery のメソッドを使用することはできません。

dom オブジェクトを jquery オブジェクトに変換する方法

DOM オブジェクトの場合、DOM オブジェクトを $() でラップするだけで jQuery オブジェクトを取得できます。。メソッドは $(DOM object) で、変換後は jQuery の任意のメソッドを使用できます。

注: 一般的に使用される jQuery オブジェクトは、$() 関数を通じて製造されます。$() 関数は、jQuery オブジェクトの製造ファクトリーです。

jquery コードは次のとおりです:

<body>
  <p>my</p>
  <p>my</p>
<script src="jquery-1.10.2.min.js"></script>
<script>
  var cr = document.getElementsByTagName("p") //DOM对象
  var $cr = $(cr);   //jquery对象
  $cr.eq(0).("fuck"); //检测是否转换成功，可以用jquery方法 输出结果为第二个my改成了fuck
  $cr.eq(1).html("you"); //输出结果为my改成you
</script>
</body>

ログイン後にコピー

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

上記のメソッドを通じて、jquery オブジェクトと DOM オブジェクトの Web ページ効果を自由に相互に変換できます。

最後に、DOM メソッドを使用できるのは DOM オブジェクトだけであることを再度強調します。jquery オブジェクトは DOM 内のメソッドを使用できませんが、jquery オブジェクトは DOM を操作するためのより完全なツールセットを提供します。

[推奨学習: jQuery ビデオチュートリアル、Web フロントエンドビデオ ]

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