> 웹 프론트엔드 > 프런트엔드 Q&A > jquery 객체와 dom 객체 간의 변환 방법은 무엇입니까

jquery 객체와 dom 객체 간의 변환 방법은 무엇입니까

WBOY
풀어 주다: 2022-06-02 15:40:50
원래의
7361명이 탐색했습니다.

메서드: 1. "obj[index]" 및 "obj.get(index)" 메서드. 이 두 메서드는 jquery 개체를 dom 개체로 변환할 수 있습니다. Index는 jQuery 개체에 있는 DOM 개체의 인덱스입니다. $(DOM 객체)' 메서드를 사용하면 dom 객체를 jquery 객체로 변환할 수 있습니다.

jquery 객체와 dom 객체 간의 변환 방법은 무엇입니까

이 튜토리얼의 운영 환경: windows10 시스템, jquery3.2.1 버전, Dell G3 컴퓨터.

jquery 객체와 dom 객체 간의 변환 방법

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

jQuery 객체는 내부적으로 DOM 객체를 배열 요소로 사용하는 배열 유사 객체입니다. jQuery 객체를 DOM 객체로 변환하는 방법에는 "obj[index]"와 "obj.get(index)"라는 두 가지 방법이 있습니다. 여기서 index는 jQuery 객체에 있는 DOM 객체의 인덱스를 나타냅니다. 이 두 가지 변환 방법은 아래에 설명되어 있습니다.

(1)obj[index]

obj[index] 메소드를 통해 jQuery 객체를 DOM 객체로 변환합니다. 샘플 코드는 다음과 같습니다.

<div>第1个div</div>
<div>第2个div</div>
<script>
//获取jQuery对象
var divs = $(&#39;div&#39;);
//通过索引的方式,将jQuery对象转换成DOM对象
var div1 = divs[0];
var div2 = divs[1];
//输出div元素的内容
alert(div1.innerHTML);    //输出结果:第1个div
alert(div2. innerHTML);    //输出结果:第2个div
</script>
로그인 후 복사

위 코드에서 볼 수 있듯이 jQuery 객체는 여러 DOM 요소를 포함할 수 있으며, 인덱싱을 통해 특정 DOM 객체를 검색할 수 있습니다.

(2) obj.get(index)

obj.get(index) 메소드를 통해 jQuery 객체를 DOM 객체로 변환합니다. 샘플 코드는 다음과 같습니다.

<div>第1个div元素</div>
<script>
var result = $(&#39;div&#39;).get(0).innerHTML;
alert(result);    //输出结果:第1个div元素
</script>
로그인 후 복사

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

var name = $(DOM对象)
로그인 후 복사

DOM 객체를 $() 함수의 매개변수로 사용하여 jQuery 객체로 변환합니다.

<button id="btn">say hello</button>
<script>
//获取DOM对象btn
var btn = document.getElementById(&#39;btn&#39;);
//将DOM对象转换成jQuery对象
var btnl = $(btn);
//验证转换结果
alert(btn === btnl[0]);    //输出结果: true
</script>
로그인 후 복사

위 코드에서 볼 수 있듯이 개발 중에 DOM 객체와 jQuery 객체를 서로 유연하게 변환할 수 있습니다.

동영상 튜토리얼 추천: jQuery 동영상 튜토리얼

위 내용은 jquery 객체와 dom 객체 간의 변환 방법은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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