jquery 객체와 DOM 객체를 서로 변환하는 방법에 대한 자세한 예제 코드

jQuery 객체는 jQuery를 통해 DOM 객체를 래핑하여 생성된 객체입니다. 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") 그러나 실제로는 DOM 개체이고 .attr입니다. ("src", "test.jpg")는 jQuery 메서드이므로 오류가 발생했습니다. 이 문제를 해결하려면 DOM 개체를 $(this).attr("src","test.jpg");

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

이미 DOM 개체의 경우 DOM 개체를 $()로 래핑하면 $(DOM 개체) 참고: var는 다음과 같이 정의된 변수

입니다.

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

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

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

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

(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의 메소드를 사용할 수 없다는 점을 다시 한 번 강조할 필요가 있습니다.

위 내용은 jquery 객체와 DOM 객체를 서로 변환하는 방법에 대한 자세한 예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!