> 웹 프론트엔드 > JS 튜토리얼 > jquery 객체와 DOM 객체를 서로 변환하는 방법에 대한 자세한 예제 코드

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

伊谢尔伦
풀어 주다: 2017-07-20 10:48:53
원래의
1384명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿