jquery オブジェクトと DOM object_jquery 間の変換-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 15:14:40

オリジナル

1188 人が閲覧しました

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 を操作するためのより完全なツールセットを提供します。

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