>  기사  >  웹 프론트엔드  >  HTML 요소를 가져오는 데 있어서 jquery와 문서의 차이점은 무엇입니까?

HTML 요소를 가져오는 데 있어서 jquery와 문서의 차이점은 무엇입니까?

青灯夜游
青灯夜游앞으로
2020-11-20 16:40:029871검색

차이점: jquery로 얻은 html 요소는 jquery 객체이며 jquery 메서드를 실행할 수 있는 반면, 문서는 dom 객체를 얻어 dom 메서드를 실행합니다. jQuery 객체는 jQuery에 고유하며 DOM 메서드를 사용할 수 없으며 DOM 객체는 jQuery 메서드를 사용할 수 없습니다.

HTML 요소를 가져오는 데 있어서 jquery와 문서의 차이점은 무엇입니까?

관련 추천: "jQuery Tutorial"

최근에 ocx를 통해 동영상 플러그인을 만들어서 그 플러그인을 html에 넣어봤습니다. (알고 싶으시면 보시면 됩니다)

이 플러그인을 실행하고 싶기 때문에 재생, 중지 등의 요소를 가져와야합니다. 예상대로 jquery를 사용하여 가져오는데 전혀 실행되지 않습니다. 문서를 가져오면 정상적으로 실행됩니다. 세부 사항은 다음과 같습니다

//正常执行     var obj = document.getElementById("player00");
obj.testhelloworld();//无法执行var playobj = $('#player00');
playobj.testhelloworld();

그렇다면 이 둘의 차이점은 무엇입니까? 그러고 보니 다음과 같은 결론이 나왔습니다

jquery에서 얻은 html 요소는 jquery 객체이고 jquery 메서드를 실행할 수 있는 반면, 문서는 dom 객체를 얻어 dom 메서드를 실행합니다

설명:

DOM 객체 전통적인 방법(javascript)을 사용하여 얻은 객체이고, jQuery 객체는 jQuery 클래스 라이브러리 선택기를 사용하여 얻은 객체입니다. JQuery 객체는 DOM 객체를 jQuery로 래핑하여 생성된 객체입니다. JQuery 개체는 jQuery의 메서드를 사용할 수 있지만 DOM 메서드를 사용할 수는 없습니다. 나는 항상 두 메서드가 동일하다고 생각했고 DOM 메서드를 사용할 수 없는 이유를 알고 싶었습니다. 이제 생각해보면 마음이 완전히 편해졌습니다.

이 경우,

두 사람은 어떻게 서로 변신하나요?

결국 획득한 물건의 내용은 똑같습니다.

jQuery 객체를 DOM 객체로 변환:

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

(1) jQuery 객체는 데이터 객체입니다. 해당 DOM 개체를 가져오려면 [index] 메서드를 전달해야 합니다.

예:

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对象 
alert(v.checked) //检测这个checkbox是否被选中

DOM 개체는 jQuery 개체로 변환됩니다.

이미 DOM 객체가 있는 경우 jQuery 객체를 얻으려면 DOM 객체를 $()로 래핑하기만 하면 됩니다. $(DOM object)

예:

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

변환 후에는 jQuery 메소드를 마음대로 사용할 수 있습니다.

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

더 많은 프로그래밍 관련 지식을 보려면
프로그래밍 코스

를 방문하세요! !

위 내용은 HTML 요소를 가져오는 데 있어서 jquery와 문서의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 cnblogs.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제