> 웹 프론트엔드 > JS 튜토리얼 > jquery 객체와 dom 객체의 차이점은 무엇입니까?

jquery 객체와 dom 객체의 차이점은 무엇입니까?

青灯夜游
풀어 주다: 2020-12-01 10:07:20
원래의
3445명이 탐색했습니다.

차이점: jQuery 개체는 jQuery 클래스 라이브러리의 선택기를 사용하여 얻은 개체입니다. jQuery에서는 메서드를 사용할 수 있지만 DOM 개체는 어떤 메서드도 사용할 수 없습니다. javascript 메소드를 사용하여 얻은 객체, DOM 객체는 jQuery 메소드를 사용할 수 없습니다.

jquery 객체와 dom 객체의 차이점은 무엇입니까?

관련 추천: "jQuery Video Tutorial"

1. Dom 객체, jQuery 객체

1.1 Dom 객체

Document Object Model, 즉 DOM은 확장 가능한 처리 방법입니다. W3C 조직에서 권장하는 마크업 언어용 표준 프로그래밍 인터페이스입니다.

  • DOM은 실제로 객체 지향 방식으로 설명된 문서 모델입니다. DOM은 문서를 표현하고 수정하는 데 필요한 개체, 이러한 개체의 동작 및 속성, 이러한 개체 간의 관계를 정의합니다.
  • DOM을 통해 모든 HTML 요소와 해당 요소에 포함된 텍스트 및 속성에 액세스할 수 있습니다. 콘텐츠를 수정 및 삭제할 수 있으며, 새로운 요소를 생성할 수도 있습니다.
  • DOM은 플랫폼과 프로그래밍 언어에 독립적입니다. Java, JavaScript, VBScript 등 모든 프로그래밍 언어에서 사용할 수 있습니다.
  • DOM 개체는 전통적인 방법(자바스크립트)을 사용하여 얻은 개체입니다.
  • DOM은 정확하게 문서 개체(Document Object Model)에 대한 사양 표준입니다. 이 표준은 속성과 메서드 동작만 정의합니다.

1.2 jQuery 개체

1) 개요

jQuery 개체는 실제로 JavaScript 배열입니다. 이 배열 개체에는 125개의 메서드와 4개의 속성이 포함되어 있습니다.

4개의 속성은 다음과 같습니다.

  • jquery 현재 jquery 프레임워크 버전 번호
  • length는 배열 객체의 요소 수를 나타냅니다.
  • context는 일반적으로 HtmlDocument 객체를 가리킵니다.
  • selector 전달된 선택기 콘텐츠

jquery 객체는 jQuery 객체를 통해 DOM 객체를 래핑하여 생성됩니다. jQuery 개체는 jQuery의 메서드를 사용할 수 있지만 반대로 DOM 메서드는 사용할 수 없습니다. Dom 개체는 jquery 메서드를 사용할 수 없습니다.

2) jQuery 객체와 js 객체의 차이점

  • jQuery 객체는 js 배열에 속합니다
  • jQuery 객체는 jQuery로 래핑된 DOM 객체에 의해 생성됩니다.
  • jQuery 객체는 DOM 객체의 메서드와 속성을 사용할 수 없습니다
  • DOM 객체 jQuery 객체의 메소드와 속성을 사용할 수 없습니다

3) jQuery 객체와 js 객체 간의 상호 변환

  • js에서 jQuery 객체$(js 객체)
  • jQuery 객체에서 js 객체
var doc2=$("#idDoc2")[0];   //转换jQuery对象为DOM对象  
doc2.innerHTML="这是jQuery的第一个DOM对象"  
  //使用jQuery对象本身提供的get函数来返回指定集合位置的DOM对象  
var doc2=$("#idDoc2").get(0);  
doc2.innerHTML="这是jQuery的第二个DOM对象"
로그인 후 복사

로 상호 변환 2. 세부 사항 jQuery 객체와 DOM 객체의 차이점과 사용

2.1 jQuery 객체와 DOM 객체

DOM 객체는 전통적인 방법(javascript)을 사용하여 얻은 객체이고, jQuery 객체는 jQuery 클래스 라이브러리의 선택자에서 얻은 객체입니다.

var domObj = document.getElementById("id"); //DOM对象
var $obj = $("#id"); //jQuery对象;
로그인 후 복사

jQuery 객체는 jQuery를 통해 DOM 객체를 래핑하여 생성된 객체입니다. 객체가 jQuery 객체인 경우 jQuery의 메서드를 사용할 수 있습니다.

$("#foo").html(); //获取id为foo的元素内的html代码,html()是jQuery特有的方法
로그인 후 복사

는 js의

document.getElementById("foo").innerHTML;
로그인 후 복사

과 동일합니다. 참고: DOM 개체의 모든 메서드는 jQuery 개체에서 사용할 수 없습니다.

예:

$("#id").innerHTML 和$("#id").checked之类的写法都是错误的
로그인 후 복사

를 사용할 수 있습니다.

$("#id").html()和$("#id").attr ("checked")之类的 jQuery方法来代替。
로그인 후 복사

마찬가지로 DOM 개체는 jQuery 메서드를 사용할 수 없습니다. jQuery를 배울 때 올바른 개념을 정립하고 jQuery 객체와 DOM 객체의 차이점을 구별해야 합니다. 그러면 jQuery를 배우기가 훨씬 쉬워집니다.

2.2 jQuery 개체와 DOM 개체 간 변환

2.2.1 jquery 개체를 dom 개체로 변환

jquery는 jquery 개체를 dom 개체로 변환하는 두 가지 메서드, 즉 [index] 및 get(index)을 제공합니다. ).
어떤 사람들은 왜 첨자가 사용되는지 궁금해할 수 있습니다. 예, jquery 개체는 배열 개체입니다.
예:

var $cr=$("#cr"); //jquery对象
var cr = $cr[0]; //dom对象 也可写成 var cr=$cr.get(0);
alert(cr.checked); //检测这个checkbox是否给选中
로그인 후 복사

2.2.2 dom 객체를 jquery 객체로 변환

dom 객체의 경우 jquery 객체를 얻으려면 dom 객체를 $()로 래핑하기만 하면 됩니다. );
예:

var cr=document.getElementById("cr"); //dom对象
var $cr = $(cr); //转换成jquery对象
로그인 후 복사
변환 후에는 jquery에서 어떤 방법이든 사용할 수 있습니다.

3. 요약하자면

dom 개체만 dom의 메서드를 사용할 수 있습니다. jquery 개체는 dom의 메서드를 사용할 수 없지만 jquery 개체는 dom을 작동하기 위한 보다 완전한 도구 세트를 제공합니다.

우리가 일반적으로 사용하는 jquery 객체는 $() 함수를 통해 제작됩니다. $() 함수는 jquery 객체를 제조하는 공장입니다.

참고:

얻은 개체가 jquery 개체인 경우 변수 앞에 $를 추가하면 어느 것이 jquery 개체인지 쉽게 식별할 수 있습니다.

예:

var $variable = jquery对象;
로그인 후 복사
DOM 객체를 얻은 경우 정의는 다음과 같습니다.

var variable = dom对象
로그인 후 복사
더 많은 프로그래밍 관련 지식을 보려면

프로그래밍 비디오를 방문하세요! !

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

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