JavaScript 객체, DOM 객체, jquery 객체의 차이점과 자세한 변환 설명

1. JavaScript 객체

JavaScript는 String, Date, Array 등과 같은 여러 내장 객체를 제공합니다.

객체는 속성과 메서드를 가진 특별한 데이터 유형입니다.

객체 속성에 액세스:

[javascript]

var message="Hello World!"

var x=message.length;

JavaScript 개체 만들기:

[javascript]

person=new Object()

person.firstname="Bill ";

person.lastname="Gates";

person.age=56;

person.eyecolor="blue";

객체 생성자 사용:

[javascript] view plaincopy

function person(firstname,lastname,age,eyecolor)

{

this . 이름=이름;

this.lastname=성;

this.eyecolor=eyecolor;

var myFather=새 사람("Bill","Gates",56,"blue");

var myMother=새 사람("Steve"," Jobs",48,"green") ;

2. DOM 객체

DOM은 실제로 객체지향 방식으로 기술된 문서 모델입니다. DOM은 문서를 표현하고 수정하는 데 필요한 개체, 이러한 개체의 동작 및 속성, 이러한 개체 간의 관계를 정의합니다.

W3C DOM 사양에 따르면 DOM은 HTML과 XML의 API(애플리케이션 프로그래밍 인터페이스)입니다.

DOM을 통해 모든 HTML 요소와 해당 요소에 포함된 텍스트 및 속성에 액세스할 수 있습니다. 콘텐츠를 수정 및 삭제할 수 있으며, 새로운 요소를 생성할 수도 있습니다.

HTML DOM은 플랫폼과 프로그래밍 언어에 독립적입니다. Java, JavaScript, VBScript 등 모든 프로그래밍 언어에서 사용할 수 있습니다.

DOM 객체는 전통적인 방법(자바스크립트)을 사용하여 얻은 객체입니다.

3. jQuery 객체

jquery 객체는 실제로 자바스크립트 배열입니다

이 배열 객체에는 125개의 메서드와 4개의 속성이 포함되어 있습니다

네 가지 속성은

jquery 현재 jquery 프레임워크 버전 번호

length 배열 객체의 요소 수를 나타냅니다.

컨텍스트 일반적으로 HtmlDocument 객체를 가리킵니다

selector #yourId 또는 .yourClass 등과 같은 선택기 콘텐츠에 전달됩니다.

$("#yourId") 메서드를 통해 jquery 객체를 얻는 경우

그리고 페이지에 ID가 yourId인 요소가 하나만 있습니다

그러면 $("#yourId")[0]는 HtmlElement 요소

이고 document.getElementById("yourId입니다. ") 얻은 요소는 동일

간단히 이해하면 jQuery

jQuery 객체로 생성된 객체는 jQuery를 통해 DOM 객체를 래핑하여 생성된 객체라는 것입니다. jQuery 객체는 jQuery에서만 사용할 수 있는 고유한 객체이지만, DOM 메소드는 사용할 수 없습니다.

4. DOM 객체와 jquery 객체의 차이점

[ javascript ]

var domObj = document.getElementById("id"); //DOM 개체

var $obj = $("#id")

[javascript]

$("#img").attr("src","test.jpg"); //$("#img") 여기서는 jQuery 객체를 가져옵니다. 🎜>

[javascript]

document.getElementById(“img”).src=”test.jpg”;//여기에 있는 document.getElementById(“img”)는 DOM 개체입니다.

또 다른 예: 저는 jQuery를 작성할 때 다음과 같이 자주 씁니다.

this.attr(“src”,”test.jpg”);

그런데. 오류입니다. 사실 이건 DOM객체이고,

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

는 jQuery 메소드라서 뭔가 잘못됐네요. 이 문제를 해결하려면 DOM 개체를 jQuery 개체로 변환해야 합니다. 예:

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

5. DOM 개체 및 jquery 개체 변환

DOM 개체를 jQuery 개체로 변환:

이미 DOM 개체인 DOM 개체의 경우 $()를 사용하면 됩니다. DOM 객체를 래핑하기 위해 jQuery 객체를 얻을 수 있습니다.

메서드: $(DOM 객체)

[javascript]

var v=document.getElementById(“v”) //DOM 객체

var $v=$(v); //jQuery 객체

jQuery 객체를 DOM 객체로:

jQuery 객체를 DOM 객체로 변환하는 두 가지 변환 방법: [index] 및 .get(index);

(1) jQuery 객체는 데이터 객체이며, 해당 DOM 객체는 [index] 메소드를 통해 얻을 수 있습니다.

[javascript]

var $v =$(“#v”); //jQuery 객체

var v=$v[0];

alert(v.checked) //이 체크박스가 선택되었는지 감지

(2) jQuery 자체는 .get(index) 메서드를 통해 해당 DOM 객체.

[javascript]

var $v=$(“#v”); //jQuery 객체

var v=$v.get(0) // DOM 객체

alert(v.checked) //이 확인란이 선택되었는지 감지