JQUERY 개체와 DOM 개체 간의 변환_jquery

처음 jQuery를 배우기 시작하면 어떤 것이 jQuery 객체이고 어떤 것이 DOM 객체인지 구분하지 못할 수도 있습니다. DOM 객체에 대해서는 설명이 많지 않습니다. jQuery와 둘 사이의 변환에 집중하겠습니다.

지난 며칠 동안 jQuery 초보자에게 도움이 되길 바라면서 jQuery를 사용하는 몇 가지 방법을 요약하겠습니다.

오늘은 jQuery 객체와 dom 객체 간의 상호 변환에 대해 주로 살펴보겠습니다.

1. 메소드 이름 충돌에 대해 jQuery를 사용하기 시작하면 먼저 jQuery와 다른 클래스 라이브러리 또는 사용자 정의 js 간의 충돌을 피해야 합니다. 먼저 가장 간단한 코드를 살펴보겠습니다.

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

jQuery(문서).ready(함수() {
Alert("환영합니다!");
});

여기서는 $(document)를 사용하지 않습니다. 요소를 얻기 위해 $(id) 메서드를 직접 정의하는 경우가 많고 $() 메서드도 프로토타입과 같은 클래스 라이브러리에 정의되어 있기 때문입니다. 따라서 충돌을 피하기 위해 jQuery("#id")도 사용하는 것이 좋습니다.

2. jQuery 객체와 dom 객체 간 jQuery 객체를 dom 객체로 변환: jQuery("#id")는 일반적인 dom 객체와는 다른 jQuery 객체를 얻기 때문에 dom 객체 메소드를 사용하여 직접 정의할 수 없습니다. . jQuery 객체 자체는 컬렉션이므로 인덱싱을 통해 jQuery 객체를 dom 객체로 변환할 수 있습니다. 예를 들어 jQuery("#id")[0]는 dom 객체입니다. 아래 예를 살펴보세요.

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

표시할 콘텐츠 1
표시할 콘텐츠 2
표시할 콘텐츠 3

콘텐츠를 범위 내로 가져오려면 다음 방법이 정확합니다.

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

//jQuery 메서드, 첫 번째 범위 콘텐츠 가져오기
jQuery("#showspan").html();
//세 번째 범위 콘텐츠 가져오기
jQuery("#showspan")[2].innerHTML;
//eq()는 eq(0)부터 시작하여 jQuery 객체를 반환합니다. 두 번째 스팬 콘텐츠 받기
jQuery("#표시 범위").eq(1)[0].innerHTML;
//get()은 get(0)부터 시작하여 DOM 객체를 직접 반환합니다. 세 번째 범위 콘텐츠 받기
jQuery("#showspan").get(2).innerHTML;

dom 객체를 jQuery 객체로 변환: jQuery()를 사용하여 dom 객체를 jQuery 객체로 변환합니다. 예:

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

jQuery(document.getElementById("show")).html();

출력 결과는 다음과 같습니다.

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

표시할 콘텐츠 1
표시할 콘텐츠 2
표시할 콘텐츠 3

이렇게 하면 jQuery 객체와 dom 객체 간의 상호 변환이 실현됩니다. 예를 들어 focus ID가 있는 텍스트 상자에 포커스를 유지하려는 경우입니다. 그냥:

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

jQuery("#focus")[0].focus();

jQuery 객체란 무엇인가요?

---JQuery를 통해 DOM 객체를 래핑하여 생성된 객체입니다. jQuery 개체는 jQuery에 고유하며 jQuery에서 메서드를 사용할 수 있습니다.

예:

$("#test").html()은 ID가 test인 요소에서 html 코드를 가져오는 것을 의미합니다. 그 중 html()은 jQuery의 메소드입니다

이 코드는 DOM을 사용하여 코드를 구현하는 것과 같습니다.

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

document.getElementById("id").innerHTML

DOM 객체를 래핑한 후 jQuery 객체가 생성되지만 jQuery는 DOM 객체의 어떤 메소드도 사용할 수 없습니다. 마찬가지로 DOM 객체도 jQuery의 메소드를 사용할 수 없습니다. 예: $("#test").innerHTML, document.getElementById("id").html() 및 기타 작성 방법이 잘못되었습니다.

주목해야 할 또 다른 점은 #id를 선택자로 사용하여 얻은 jQuery 객체와 document.getElementById("id")로 얻은 DOM 객체가 동일하지 않다는 것입니다. 아래 둘 사이의 변환을 참조하세요.

jQuery는 다르지만 서로 관련되어 있으므로 jQuery 객체와 DOM 객체도 서로 변환될 수 있습니다. 두 가지를 변환하기 전에 먼저 규칙을 만듭니다. jQuery 객체를 얻은 경우 변수 앞에 $를 추가합니다. 예: var $variab = jQuery 객체를 얻은 경우 다음과 같습니다. : var variab = DOM object; 이 규칙은 설명과 구별의 편의를 위한 것일 뿐 실제 사용에서는 규정되지 않습니다.

jQuery 객체를 DOM 객체로 변환:

두 가지 변환 방법인 [index] 및 .get(index)는 jQuery 객체를 DOM 객체로 변환합니다.
(1) jQuery 객체는 데이터 객체이며, [index] 메소드를 통해 해당 DOM 객체를 얻을 수 있습니다.

예:

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

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

(2)jQuery 자체는 .get(index) 메소드를 통해 해당 DOM 객체를 제공합니다

예:

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

var $v=$("#v"); //jQuery 객체
var v=$v.get(0); //DOM 객체
Alert(v.checked) //이 체크박스가 선택되어 있는지 확인

DOM 객체를 jQuery 객체로 변환:

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

예: var v=document.getElementById("v"); //DOM 객체

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

변환 후에는 모든 jQuery 메서드를 사용할 수 있습니다.

위의 방법을 통해 jQuery 객체와 DOM 객체를 임의로 서로 변환할 수 있습니다. 다시 한 번 강조할 점은 DOM 객체만이 DOM에서 메소드를 사용할 수 있고, jQuery 객체는 DOM에서 메소드를 사용할 수 없다는 점입니다.



변환 사례: JQUERY 객체를 얻는 방법


var jqueryObject = $("#test"); //jqeuryObject는 Jquery의 모든 메서드를 사용할 수 있지만 을 사용할 수는 없습니다. var jqueryObject = $("#test"); //jqeuryObject는 모든 jquery 메서드를 사용할 수 있지만
은 사용할 수 없습니다.
DOM 객체의 메서드

var DOMObject = document.getElementById("test");//DOMObject는 DOM의 모든 메서드를 사용할 수 있지만 jquery 메서드는 사용할 수 없습니다. var DOMObject = document.getElementById("test");//DOMObject는 DOM의 모든 메서드를 사용할 수 있지만 jquery 메서드는 사용할 수 없습니다.
jquery 객체->DOM 객체

var jqueryObject = $("#test");//jquery 객체 가져오기
var DOMObject = jqueryObject[0];//jquery 객체를 DOM 객체로 변환
var jqueryObject = $("#test");//jquery 객체 가져오기
var DOMObject = jqueryObject[0];//jquery 객체를 DOM 객체로 변환
DOM 객체->jquery 객체
var DOMObject = document.getElementById("test");//DOM 객체 가져오기
var jqueryObject = $(DOMObject);//DOM 객체를 jquery 객체로 변환


jquery를 사용하다 보면 원래 DOM 객체의 메소드를 사용해야 하는 경우가 있습니다. 예를 들어 Activex 컨트롤의 특정 메소드를 호출할 때 jquery 객체를 DOM 객체로 변환해야 하는 경우는 다음과 같습니다. :

방법 1: $("xxx")[index]
방법 2: $("xxx").get(index)
방법 3: $("xxx").eq(index)[0]