jquery 객체와 javascript 객체(DOM 객체)를 서로 변환합니다_jquery

jQuery 객체는 DOM 객체를 jQuery로 래핑하여 생성된 객체입니다. jQuery 개체는 jQuery의 메서드를 사용할 수 있지만 DOM 메서드는 사용할 수 없습니다. 예: $("#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"); 실제로는 오류입니다. attr("src" ,"test.jpg") 는 jQuery 메서드이므로 오류가 발생했습니다. 이 문제를 해결하려면 DOM 개체를 $(this).attr("src","test.jpg");

와 같은 jQuery 개체로 변환해야 합니다.

1. DOM 객체를 jQuery 객체로 변환

DOM 객체의 경우 jQuery 객체인 $(DOM 객체)를 얻으려면 DOM 객체를 $()로 래핑하기만 하면 됩니다. 참고: var는 정의된 변수입니다

예:

var v = document.getElementById("v"); //DOM对象
var $v = $(v); //jQuery 对象

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

2. jQuery 객체를 DOM 객체로 변환

두 가지 변환 방법인 [index] 및 .get(index)는 jQuery 객체를 DOM 객체로 변환합니다.

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

예:

var $v = $("#v"); //jQuery 对象
var v = $v[0]; //DOM 对象
alert(v.checked); //检测这个checkbox是否被选中

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

예:

var $v = $("#v"); //jQuery 对象
var v = $v.get(0); //DOM对象 ( $v.get()[0] 也可以 )
alert(v.checked); //检测这个 checkbox 是否被选中

위 방법을 통해 jQuery 객체와 DOM 객체를 마음대로 서로 변환할 수 있다는 점을 다시 한 번 강조할 필요가 있습니다. DOM 객체는 DOM에서 메서드를 사용할 수 있고, jQuery 객체는 DOM에서 메서드를 사용할 수 없습니다.