jQuery 객체와 DOM 객체

머리말

JavaScript 프로그램을 작성할 때 먼저 객체를 얻어야 합니다. jQuery 선택기는 일반적으로 객체를 얻는 방식을 완전히 바꿀 수 있습니다. 제목이 있는 "<와 같은 거의 모든 의미를 가진 객체를 얻을 수 있습니다. 속성과 해당 값에 테스트가 포함되어 있습니다." a> 요소", 이러한 작업을 완료하려면 jQuery 선택기 문자열만 작성하면 됩니다. jQuery 선택기를 학습하는 것은 jQuery 학습에서 가장 중요한 단계입니다.

Dom 개체 및 jQuery 래퍼 세트

프로그램을 작성하거나 API 문서를 읽을 때 Dom 개체와 jQuery 래퍼 세트를 구별하는 데 항상 주의를 기울여야 합니다.

1. Dom 개체

전통적인 JavaScript 개발에서는 다음과 같이 항상 Dom 개체를 먼저 가져옵니다.

var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div");

우리는 종종 document.getElementById 메서드를 사용하여 ID를 기반으로 단일 Dom 개체를 가져옵니다. document.getElementsByTagName 메소드 HTML 태그 이름을 기반으로 Dom 객체 컬렉션을 가져옵니다.

또한 이벤트 함수에서는 메소드 함수에서 이를 사용하여 이벤트 트리거 객체를 참조하거나(단, 멀티캐스트 이벤트 함수에서는 IE6에 문제가 있음) 이벤트 객체의 대상(Firefox)을 사용할 수 있습니다. 또는 srcElement(IE6)를 사용하여 트리거 이벤트의 Dom 개체를 가져옵니다.

여기서 얻는 것은 모두 Dom 개체입니다. Dom 개체에도 입력, div, 범위 등과 같은 다양한 유형이 있습니다. Dom 객체에는 제한된 속성과 메서드가 있습니다.

2.jQuery 래퍼 세트

jQuery 래퍼 세트는 Dom 객체의 확장이라고 할 수 있습니다. jQuery의 세계에서는 하나이든 그룹이든 모든 객체가 jQuery 래퍼 세트로 캡슐화됩니다. 예를 들어 요소가 포함된 jQuery 래퍼 세트를 가져오는 경우:

var jQueryObject = $("#testDiv");

jQuery 래퍼 세트는 객체로 함께 호출됩니다. jQuery 래퍼 세트에는 다양한 속성과 메서드 세트가 있습니다.

3. Dom 객체와 jQuery 객체의 변환

(1) Dom을 jQuery 패키징 세트로

jQuery에서 제공하는 기능을 사용하려면 먼저 jQuery 래퍼 세트를 구성해야 합니다. 이 기사에서 소개할 jQuery 선택기를 사용하여 다음과 같은 jQuery 래퍼 세트를 직접 구성할 수 있습니다.

$("#testDiv");

위 명령문으로 구성된 래퍼 세트에는 ID가 testDiv인 하나의 요소만 포함됩니다.

또는 다음과 같은 Dom 요소를 이미 얻었습니다.

var div = document.getElementById("testDiv");

위 코드에서 div는 Dom 요소이므로 Dom 요소를 jQuery 래퍼 세트로 변환할 수 있습니다.

var domToJQueryObject = $(div);

(2) jQuery 래퍼 세트 to Dom 객체

jQuery 래퍼 세트는 컬렉션이므로 인덱서를 통해 그 안에 있는 요소에 액세스할 수 있습니다.

var domObject = $("#testDiv")[0];

인덱서를 통해 반환되는 것은 더 이상 jQuery 래퍼 세트가 아니라 Dom 객체입니다!

jQuery 래퍼 Each()와 같은 집합의 일부 순회 메서드에서는 순회 함수에서 다음과 같은 Dom 요소도 전달할 수 있습니다.

$("#testDiv").each(function() {
  alert(this)
});

사용하려면 어떻게 해야 합니까? Dom 객체를 작동하는 jQuery 방법? 위 소개를 사용하세요. 변환 방법을 따르세요:

$("#testDiv").each(function() {
  $(this).html("修改内容")
});

요약: 먼저 모든 사람이 Dom 객체와 jQuery 패키징 세트의 개념을 명확히 하도록 하세요. 그러면 학습 속도가 크게 향상됩니다. 이 둘을 구별할 수만 있다면 프로그램을 작성할 때 명확해질 수 있습니다.