ホームページ >ウェブフロントエンド >フロントエンドQ&A >domオブジェクトをjqueryオブジェクトに変換する方法

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

青灯夜游
青灯夜游オリジナル
2022-03-11 15:32:414693ブラウズ

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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。