jQuery 객체와 DOM 객체는 서로 변환됩니다.
jQuery 객체와 DOM 객체
jQuery 객체는 DOM 객체를 jQuery로 래핑하여 생성된 객체입니다. jQuery 객체는 jQuery에 고유합니다. 예를 들어 $("#img").attr("src","test.jpg"); img")는 jQuery 객체입니다.
DOM 객체는 Javascript에 내재된 일부 객체 작업입니다. DOM 객체는 Javascript에 고유한 메서드를 사용할 수 있지만 jQuery에서는 메서드를 사용할 수 없습니다. 예: document.getElementById("img").src="test.jpg"; document.getElementById("img") 여기 DOM 개체가 있습니다.
$("#img").attr( " src","test.jpg"); 및 document.getElementById("img").src="test.jpg"는 동일하고 정확하지만 $("#img").src="test .jpg" ; 또는 document.getElementById("img").attr("src","test.jpg"); 둘 다 잘못되었습니다.
예를 들어보겠습니다. 저는 jQuery를 작성할 때 종종 다음과 같이 씁니다. this.attr("src","test.jpg") 그런데 오류가 발생했습니다. 사실 이건 DOM 객체이고, .attr("src","test.jpg") 는 jQuery 메소드라서 뭔가 잘못됐네요. 이 문제를 해결하려면 DOM 객체를 $(this).attr("src","test.jpg")와 같은 jQuery 객체로 변환해야 합니다.
1. jQuery 객체:
이미 DOM 객체인 DOM 객체의 경우 DOM 객체를 $()로 래핑하기만 하면 jQuery 객체를 얻을 수 있습니다. $(DOM object)
예: var v=document.getElementById("v"); //DOM object
var $v=$(v) //jQuery object
변환 가능 jQuery의 메소드를 자유롭게 사용할 수 있습니다.
2. jQuery 객체를 DOM 객체로 변환:
두 가지 변환 방법은 jQuery 객체를 DOM 객체로 변환합니다: [index] 및 .get(index)
(1) jQuery 객체는 데이터 객체인 경우, 해당 DOM 객체는 [index] 메소드를 통해 얻을 수 있습니다.
예: var $v =$("#v"); //jQuery 객체
var v=$v[0] //DOM 객체
alert(v.checked) //감지 this 확인란 선택 여부
(2) jQuery 자체는 .get(index) 메서드를 통해 다음과 같이 해당 DOM 개체
를 얻습니다. var $v=$("#v"); //jQuery object
var v=$v.get(0); //DOM object
alert(v.checked) //이 확인란이 선택되었는지 감지