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

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

Nov 20, 2020 pm 04:40 PM
document HTML 요소 jquery

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

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

onclick을 사용하여 PHP 함수 실행 onclick을 사용하여 PHP 함수 실행 Feb 29, 2024 pm 04:31 PM

또한 Jquery 라이브러리를 사용하여 onclick() 이벤트를 통해 PHP 함수를 실행하는 또 다른 방법도 다룹니다. 이 메소드는 웹 페이지에 PHP 함수의 내용을 출력하는 javascript 함수를 호출합니다. 또한 onclick() 이벤트를 사용하여 PHP 함수를 실행하는 또 다른 방법, 즉 순수 JavaScript를 사용하여 PHP 함수를 호출하는 방법도 보여 드리겠습니다. 이번 글에서는 PHP 함수를 실행하는 방법, GET 메소드를 이용해 URL로 데이터를 보내는 방법, isset() 함수를 이용해 GET 데이터를 확인하는 방법을 소개하겠습니다. 이 메소드는 데이터가 설정되고 함수가 실행되면 PHP 함수를 호출합니다. jQuery를 사용하여 onclick() 이벤트를 통해 PHP 함수를 실행하는 데 사용할 수 있습니다.

HTML로 Excel 데이터를 읽는 방법 HTML로 Excel 데이터를 읽는 방법 Mar 27, 2024 pm 05:11 PM

HTML로 Excel 데이터를 읽는 방법: 1. JavaScript 라이브러리를 사용하여 Excel 데이터를 읽습니다. 2. 서버측 프로그래밍 언어를 사용하여 Excel 데이터를 읽습니다.

jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요. jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요. Feb 28, 2024 pm 09:06 PM

제목: jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요. 웹 개발에서는 페이지의 요소를 수정하고 조작해야 하는 경우가 많습니다. jQuery를 사용할 때 페이지에 있는 모든 태그의 텍스트 내용을 한 번에 수정해야 하는 경우가 있는데, 이는 시간과 에너지를 절약할 수 있습니다. 다음은 jQuery를 사용하여 페이지의 모든 태그 텍스트를 빠르게 수정하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 jQuery 라이브러리 파일을 도입하고 다음 코드가 페이지에 도입되었는지 확인해야 합니다. &lt

jQuery를 사용하여 모든 태그의 텍스트 내용 수정 jQuery를 사용하여 모든 태그의 텍스트 내용 수정 Feb 28, 2024 pm 05:42 PM

제목: jQuery를 사용하여 모든 태그의 텍스트 내용을 수정합니다. jQuery는 DOM 작업을 처리하는 데 널리 사용되는 인기 있는 JavaScript 라이브러리입니다. 웹 개발을 하다 보면 페이지에 있는 링크 태그(태그)의 텍스트 내용을 수정해야 하는 경우가 종종 있습니다. 이 기사에서는 jQuery를 사용하여 이 목표를 달성하는 방법을 설명하고 구체적인 코드 예제를 제공합니다. 먼저 페이지에 jQuery 라이브러리를 도입해야 합니다. HTML 파일에 다음 코드를 추가합니다.

드림위버 줄 바꿈이란 무엇입니까? 드림위버 줄 바꿈이란 무엇입니까? Apr 08, 2024 pm 09:54 PM

Dreamweaver에서 <br> 태그를 사용하여 메뉴, 단축키 또는 직접 입력을 통해 삽입할 수 있는 줄 바꿈을 만듭니다. CSS 스타일과 결합하여 특정 높이의 빈 행을 만들 수 있습니다. 어떤 경우에는 <br> 태그 대신 <p> 태그를 사용하는 것이 문단 사이에 자동으로 빈 줄을 만들고 스타일 제어를 적용하므로 더 적합합니다.

jQuery 요소에 특정 속성이 있는지 어떻게 알 수 있나요? jQuery 요소에 특정 속성이 있는지 어떻게 알 수 있나요? Feb 29, 2024 am 09:03 AM

jQuery 요소에 특정 속성이 있는지 어떻게 알 수 있나요? jQuery를 사용하여 DOM 요소를 조작할 때 요소에 특정 속성이 있는지 확인해야 하는 상황이 자주 발생합니다. 이 경우 jQuery에서 제공하는 메소드를 사용하여 이 기능을 쉽게 구현할 수 있습니다. 다음은 jQuery 요소에 특정 속성이 있는지 확인하기 위해 일반적으로 사용되는 두 가지 방법을 특정 코드 예제와 함께 소개합니다. 방법 1: attr() 메서드와 typeof 연산자를 // 사용하여 요소에 특정 속성이 있는지 확인

GTA 6 문서는 모든 누출에 대한 자세한 개요를 제공합니다. GTA 6 문서는 모든 누출에 대한 자세한 개요를 제공합니다. Sep 08, 2024 am 06:37 AM

9월 3일, 현재까지 게임에 대해 알려진 모든 것에 대한 자세한 개요를 제공하는 Grand Theft Auto VI 문서 버전 1.5입니다. 문서의 업데이트된 버전은 X(이전의 Twitter)에 게시된 예고편에서 발표되었습니다.

jQuery를 사용하여 테이블에 새 행을 추가하는 방법 소개 jQuery를 사용하여 테이블에 새 행을 추가하는 방법 소개 Feb 29, 2024 am 08:12 AM

jQuery는 웹 개발에 널리 사용되는 인기 있는 JavaScript 라이브러리입니다. 웹 개발 중에 JavaScript를 통해 테이블에 새 행을 동적으로 추가해야 하는 경우가 많습니다. 이 기사에서는 jQuery를 사용하여 테이블에 새 행을 추가하는 방법을 소개하고 특정 코드 예제를 제공합니다. 먼저 HTML 페이지에 jQuery 라이브러리를 도입해야 합니다. jQuery 라이브러리는 다음 코드를 통해 태그에 도입될 수 있습니다.

See all articles