JavaScriptオブジェクト、DOMオブジェクト、jqueryオブジェクトの違いと変換の詳しい説明

1. JavaScript オブジェクト

JavaScript は、String、Date、Array などの複数の組み込みオブジェクトを提供します。

オブジェクトは、プロパティとメソッドを備えた特別なデータ型にすぎません。

オブジェクトのプロパティにアクセスします:

[javascript]

var message="Hello World!";

var x=message.length;

JavaScriptオブジェクトを作成します:

[javascript]

person =new Object();

person.lastname=56;

を使用します。オブジェクト コンストラクター :

[javascript] view plaincopy

関数 person(firstname,lastname,age,eyecolor)

{

this.firstname=firstname;

this.age=age;

this.eyecolor=eyecolor;

}

[javascript]

var myFather=新しい人("ビル","ゲイツ",56,"ブルー");

var myMother=新しい人("スティーブ") ," Jobs",48,"green");

2. DOM オブジェクト

DOM は、実際にはオブジェクト指向で記述されたドキュメント モデルです。 DOM は、ドキュメントを表現および変更するために必要なオブジェクト、これらのオブジェクトの動作とプロパティ、およびこれらのオブジェクト間の関係を定義します。

W3C DOM 仕様によれば、DOM は HTML と XML のアプリケーション プログラミング インターフェイス (API) です。

DOM を通じて、すべての HTML 要素と、それに含まれるテキストおよび属性にアクセスできます。コンテンツは変更および削除でき、新しい要素を作成することもできます。

HTML DOM はプラットフォームやプログラミング言語に依存しません。 Java、JavaScript、VBScript などのあらゆるプログラミング言語で使用できます。

DOM オブジェクトは、従来の方法 (JavaScript) を使用して取得したオブジェクトです。

3. jQuery オブジェクト

jquery オブジェクトは実際には JavaScript 配列です

この配列オブジェクトには 125 のメソッドと 4 つの属性が含まれています

4 つの属性は

jquery 現在の jQuery フレームワークのバージョン番号

length の数を示します配列オブジェクトの要素

context は通常、HtmlDocument オブジェクトを指します

selector #yourId や .yourClass など、渡されるセレクターの内容

$("#yourId") を渡す場合jquery オブジェクトを取得するメソッド

、ページ内に id yourId を持つ要素は 1 つだけあります

そして $("#yourId")[0] が HtmlElement 要素です

document.getElementById(" によって取得される要素) yourId") は同じです

簡単に理解すると、jQueryで作成されたオブジェクトです

jQueryオブジェクトとは、DOMオブジェクトをjQueryでラップして生成されるオブジェクトです。 jQuery オブジェクトは jQuery に特有のものです。jQuery のメソッドは使用できますが、DOM オブジェクトと jquery オブジェクトの違い

[javascript]

var domObj = document.getElementById(") id"); //DOM オブジェクト

var $obj = $("#id"); //jQuery オブジェクト;

[javascript]

$("#img").attr("src","test) .jpg"); //$("#img") ここに jQuery オブジェクトを取得します;

[javascript]

document.getElementById("img").src="test.jpg";// ここにドキュメントを記述します.getElementById("img") は DOM オブジェクトです。

別の例: これは、jQuery を書くときによく次のように書きます:

this.attr("src","test.jpg");

しかし、ただ何か間違っている。実際、これは DOM オブジェクトであり、

.attr("src", "test.jpg")

は jQuery メソッドなので、何か問題が発生しました。この問題を解決するには、DOM オブジェクトを jQuery オブジェクトに変換する必要があります。例:

$(this).attr("src","test.jpg");

5.および jquery オブジェクト

DOM オブジェクトを jQuery オブジェクトに変換します:

すでに DOM オブジェクトである DOM オブジェクトの場合、DOM オブジェクトを $() でラップするだけで jQuery オブジェクトを取得できます。

メソッド: $(DOM オブジェクト)

[javascript]

var v=document.getElementById(“v”); //DOM オブジェクト

var $v=$(v); //jQuery オブジェクト

;

jQuery オブジェクトから DOM オブジェクトへ:

jQuery オブジェクトを DOM オブジェクトに変換する 2 つの変換メソッド: [index] と .get(index)

(1) jQuery オブジェクトはデータ オブジェクトであり、[index] を渡すことができます。 ] メソッドを使用して、対応する DOM オブジェクトを取得します。

[javascript]

var $v =$(“#v”); //jQuery オブジェクト

var v=$v[0]; //DOM オブジェクト

alert(v.checked) //これを検出チェックボックスが選択されているかどうか

(2) jQuery 自体は、.get(index) メソッドを通じて対応する DOM オブジェクトを提供します。

[javascript]

var $v=$(“#v”); //jQuery オブジェクト

var v=$v.get(0); //DOM オブジェクト

alert(v.checked);このチェックボックスが選択されているかどうかを確認してください