Jquery 객체와 Dom 객체의 차이점 분석_jquery

논의하기 전에 변수 정의 스타일에 대해 합의해 보겠습니다.

획득한 개체가 jQuery 개체인 경우 변수 앞에 $를 추가합니다. 예:

코드 복사 코드는 다음과 같습니다.

var $변수 = jQuery 객체

DOM 객체를 얻으면 다음과 같이 정의됩니다.

코드 복사 코드는 다음과 같습니다.

var 변수 = DOM 객체

jQuery 객체는 DOM에서 메소드를 사용할 수 없지만, jQuery 객체가 제공하는 메소드에 익숙하지 않거나, jQuery가 원하는 메소드를 캡슐화하지 않아 DOM 객체를 사용해야 하는 경우에는 아래 두 가지 메소드가 있습니다. jQuery는 jQuery 객체를 DOm 객체로 변환하는 두 가지 방법, 즉 [index] 및 get(index)를 제공합니다.

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

코드 복사 코드는 다음과 같습니다.

var $cr = $("#cr"); //jQuery 객체
var cr = $cr[0] //DOM 객체
Alert(cr.checked) //체크박스가 체크되어 있는지 확인

2. get(index) 메소드를 통해 해당 DOM 객체를 얻습니다.

코드 복사 코드는 다음과 같습니다.

var $cr = $("#cr");
var cr = $cr.get(0);
경고(cr.checked)

DOM 객체의 경우 jQuery 객체를 얻으려면 DOM 객체를 $()로 래핑하기만 하면 됩니다. 메소드는 $(DOM 객체)입니다.

코드 복사 코드는 다음과 같습니다.

var cr = document.getElementByID("cr"); //DOM 객체
var $cr = $(cr)

요약:

1. jQuery의 get 메소드는 실제로 Dom 요소($(this).get(0) 및 $(this)[0])를 가져옵니다.

2. jQuery 메소드의 eq, first, last 및 기타 메소드는 모두 Jquery 객체를 반환합니다

3. DOM 객체만 DOM의 메소드를 사용할 수 있습니다. jQuery 객체는 DOM의 메소드를 사용할 수 없습니다. jQuery 객체는 DOM 조작을 위한 보다 완전한 도구 세트를 제공합니다.