ホームページ > 記事 > ウェブフロントエンド > jquery オブジェクトと DOM object_jquery 間の変換

jquery オブジェクトと DOM object_jquery 間の変換

WBOYオリジナル: 2016-05-16 15:14:401116ブラウズ

jQuery オブジェクトとは何ですか?
---DOMオブジェクトをjQueryでラップして生成されたオブジェクトです。 jQuery オブジェクトは jQuery に固有であり、jQuery のメソッドを使用できます。
例:
$("#test").html() は、ID test を持つ要素内の HTML コードを取得することを意味します。このうち、html() は jQuery
のメソッドですこのコードは、DOM を使用してコードを実装するのと同じです:

document.getElementById("id").innerHTML;

jQuery オブジェクトは DOM オブジェクトをラップすることによって生成されますが、jQuery では DOM オブジェクトのメソッドを使用できません。同様に、DOM オブジェクトをむやみに使用するとエラーが報告されます。例: $("#test").innerHTML、document.getElementById("id").html() などの記述方法は間違っています。
もう 1 つ注意すべき点は、#id をセレクターとして使用して取得した jQuery オブジェクトと document.getElementById("id") で取得した DOM オブジェクトは同等ではないことです。以下の 2 つの間の変換を参照してください。
jQuery は異なるものですが関連しているため、jQuery オブジェクトと DOM オブジェクトを相互に変換することもできます。 2 つを変換する前に、まず規則を作成します。jQuery オブジェクトが取得された場合は、次のように変数の前に $ を追加します。DOM オブジェクトが取得された場合は、次と同じです。通常. : var variab = DOM object; この規則は説明と区別の便宜のためだけであり、実際の使用では規定されていません。

jquery オブジェクトと DOM オブジェクト間の相互変換について説明する前に、まず変数の定義スタイルについて合意します。たとえば、

のように、jquery オブジェクトを取得する場合は、変数の前に $ を追加します。

var $variable = jquery オブジェクト

DOM オブジェクトが取得された場合は、次のように定義されます:

var 変数 = DOM オブジェクト

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

Jquery オブジェクトは DOM 内のメソッドを使用できませんが、jquery オブジェクトが提供するメソッドに慣れていない場合、または jquery がカプセル化したいメソッドがない場合は、DOM オブジェクト、つまり [index] と get[インデックス].

(1) jqueryオブジェクトは配列オブジェクトであり、対応するDOMオブジェクトは[index]メソッドで取得できます。

jQuery コードは次のとおりです

<body>
  <p>my</p>
  <p>my</p>
<script src="jquery-2.1.4.min.js"></script>
<script>
  var $cr = $("p");  //jquery对象
  var cr = $cr[1];  //dom对象
  var ct = $cr.get(0)  //第二种转换为DOM对象的方式
  cr.innerHTML = "you"  //检测是否转换成功，可以用DOM方法 输出结果为第二个my改成了you
  ct.innerHTML = 'fuck'  //输出结果第一个my改成了fuck
</script>
</body>

(2).DOM オブジェクトを jquery オブジェクトに変換:

DOM オブジェクトの場合は、DOM オブジェクトを $() でラップするだけで、$(DOM object) というメソッドで jquery オブジェクトを取得できます。

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

<body>
  <p>my</p>
  <p>my</p>
<script src="jquery-2.1.4.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オブジェクトを任意に相互変換することができます。

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

皆さんがこの記事を気に入ってくれることを願っています。

声明：

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

前の記事：完璧なjquery処理機構_jquery次の記事：完璧なjquery処理機構_jquery

続きを見る

jquery オブジェクトと DOM object_jquery 間の変換

関連記事