ホームページ > ウェブフロントエンド > jsチュートリアル > jqueryオブジェクトとdomオブジェクトの違いは何ですか?

jqueryオブジェクトとdomオブジェクトの違いは何ですか?

青灯夜游
リリース: 2020-12-01 10:07:20
オリジナル
3452 人が閲覧しました

違い: jQuery オブジェクトは、jQuery クラス ライブラリのセレクターを使用して取得されるオブジェクトです。これは jQuery に固有です。jQuery 内のメソッドは使用できますが、DOM オブジェクトのメソッドは使用できません。 DOM オブジェクトは JavaScript を使用して取得されます。オブジェクトはメソッドによって取得されます。DOM オブジェクトは jQuery メソッドを使用できません。

jqueryオブジェクトとdomオブジェクトの違いは何ですか?

#関連する推奨事項: 「

jQuery ビデオ チュートリアル #」

1. Dom オブジェクト、jQuery オブジェクト

1.1 Dom オブジェクト

DOM と呼ばれるドキュメント オブジェクト モデルは、W3C 組織が推奨する拡張可能なマークアップ言語を処理するための標準プログラミング インターフェイスです。

    DOM は、実際にはオブジェクト指向で記述されたドキュメント モデルです。 DOM は、ドキュメントを表現および変更するために必要なオブジェクト、これらのオブジェクトの動作とプロパティ、およびこれらのオブジェクト間の関係を定義します。
  • DOM を通じて、すべての HTML 要素と、それに含まれるテキストおよび属性にアクセスできます。コンテンツは変更および削除でき、新しい要素を作成することもできます。
  • DOM はプラットフォームやプログラミング言語に依存しません。 Java、JavaScript、VBScript などのあらゆるプログラミング言語で使用できます。
  • DOM オブジェクトは、従来の方法 (JavaScript) を使用して取得したオブジェクトです。
  • DOM はまさにドキュメント オブジェクト (Document Object Model) の仕様標準であり、この標準ではプロパティとメソッドの動作のみが定義されています。

1.2 jQuery オブジェクト

1) 概要

jQuery オブジェクトは実際には JavaScript 配列であり、この配列オブジェクトには 125 個のメソッドと 4 個のメソッドが含まれています属性

4 つの属性は次のとおりです:

    jquery 現在の jquery フレームワークのバージョン番号
  • length は、配列オブジェクトの要素の数を示します。
  • context は通常、HtmlDocument オブジェクトを指します
  • selector セレクター コンテンツに渡される
jquery オブジェクトは、jQuery を介して DOM オブジェクトをラップすることによって生成されるオブジェクトです。 jQuery オブジェクトは jQuery に固有のもので、jQuery のメソッドを使用できますが、DOM メソッドは使用できません。逆に、Dom オブジェクトは jquery メソッドを使用できません。

2) jQuery オブジェクトと js オブジェクトの違い

    jQuery オブジェクトは js 配列に属します
  • jQuery オブジェクトは、jQuery でラップされた DOM オブジェクトによって生成されます
  • jQuery オブジェクトは DOM オブジェクトのメソッドとプロパティを使用できません
  • DOM オブジェクトは jQuery オブジェクトのメソッドとプロパティを使用できません
3) jQuery オブジェクト間の相互変換と js オブジェクト

    js から jQuery オブジェクト$(js オブジェクト)
  • jQuery オブジェクトから js オブジェクト
var doc2=$("#idDoc2")[0];   //转换jQuery对象为DOM对象  
doc2.innerHTML="这是jQuery的第一个DOM对象"  
  //使用jQuery对象本身提供的get函数来返回指定集合位置的DOM对象  
var doc2=$("#idDoc2").get(0);  
doc2.innerHTML="这是jQuery的第二个DOM对象"
ログイン後にコピー

2. の詳細な説明jQuery オブジェクトと DOM オブジェクトの違いと使い方

2.1 jQuery オブジェクトと DOM オブジェクト

DOM オブジェクトは、従来の方法 (JavaScript) を使用して取得するオブジェクトです。 )、jQuery オブジェクトはjQueryクラスライブラリのセレクタを利用して取得したオブジェクトです。

var domObj = document.getElementById("id"); //DOM对象
var $obj = $("#id"); //jQuery对象;
ログイン後にコピー
jQuery オブジェクトは、DOM オブジェクトを jQuery でラップして生成される、jQuery 独自のオブジェクトです。オブジェクトが jQuery オブジェクトの場合は、jQuery のメソッドを使用できます。

$("#foo").html(); //获取id为foo的元素内的html代码,html()是jQuery特有的方法
ログイン後にコピー
js と同等:

document.getElementById("foo").innerHTML;
ログイン後にコピー
注意: DOM オブジェクトのメソッドは、jQuery オブジェクトでは使用できません。

例:

$("#id").innerHTML 和$("#id").checked之类的写法都是错误的
ログイン後にコピー

$("#id").html()和$("#id").attr ("checked")之类的 jQuery方法来代替。
ログイン後にコピー
を使用できます。同様に、DOM オブジェクトでは jQuery メソッドを使用できません。 jQuery を学習するときは、正しい概念を確立し、jQuery オブジェクトと DOM オブジェクトの違いを区別する必要があります。その後、jQuery を学習するのがはるかに簡単になります。

2.2 jQuery オブジェクトと DOM オブジェクト間の変換

2.2.1 jquery オブジェクトから dom オブジェクトへの変換

jquery が提供するものjquery オブジェクトを dom オブジェクトに変換するには、[index] と get(index) という 2 つのメソッドがあります。

なぜ添字が使われるのか疑問に思う人もいるかもしれませんが、はい、jquery オブジェクトは配列オブジェクトです。
例:

var $cr=$("#cr"); //jquery对象
var cr = $cr[0]; //dom对象 也可写成 var cr=$cr.get(0);
alert(cr.checked); //检测这个checkbox是否给选中
ログイン後にコピー

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

dom オブジェクトの場合、$() を使用して dom をラップするだけです。

メソッドは $(dom object);
例:

var cr=document.getElementById("cr"); //dom对象
var $cr = $(cr); //转换成jquery对象
ログイン後にコピー
変換後は、jquery の任意のメソッドを使用できます。

3. 要約すると、

dom オブジェクトのみが dom 内のメソッドを使用できます。jquery オブジェクトは dom 内のメソッドを使用できませんが、jquery オブジェクトはより完全なセットを提供します。ドムを操る。

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

注:

取得したオブジェクトが jquery オブジェクトの場合は、どれが jquery オブジェクトであるかを簡単に識別できるように、変数の前に $ を追加します。

例:

var $variable = jquery对象;
ログイン後にコピー
DOM オブジェクトが取得された場合、定義は次のようになります:

var variable = dom对象
ログイン後にコピー
プログラミング関連の知識の詳細については、こちらを参照してください:

プログラミング ビデオ ! !

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

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