이렇게 간단한 작업이라도 jQuery가 없으면 복잡해질 수 있습니다. 일반 JavaScript에서는 다음 코드 조각에 표시된 대로 강조 표시된 클래스를 추가할 수 있습니다.
window.onload = function() {
var divs = document.getElementsByTagName('div')
for (var i = 0; i < divs.length; i ) {
if (hasClass(divs[i], 'poem-stanza') && !hasClass(divs[i], 'highlight')) {
divs[i].className = ' 하이라이트';
}
}
function hasClass( elem, cls ) {
var reClass = new RegExp(' ' cls ' ' );
reClass.test(' ' elem.className ' ');
}
}
저희가 직접 처리하면 이렇게 간단한 작업도 되지 않습니다. jquery를 사용하면 복잡해집니다. 원시 js를 사용하면 다음 코드 조각을 사용하여 강조 표시된 클래스를 추가할 수 있습니다.
길이에도 불구하고 이 솔루션은 다음과 같이 jQuery가 목록 1.2에서 처리하는 많은 상황을 처리하지 않습니다. :
• 다른 window.onloadevent 핸들러를 적절하게 존중
• DOM이 준비되는 즉시 작동
• 최신 DOM 방법으로 요소 검색 및 기타 작업 최적화
길지만 이 솔루션은 여전히 유효합니다. 다음과 같이 목록 1.2에서 jquery가 수행하는 많은 작업을 처리하지 않습니다.
1. 다른 window.load 이벤트를 적절하게 처리합니다.
2. DOM 구조가 준비되면 작업을 시작합니다.
3. 최신 DOM 방법을 사용하여 요소 검색 및 기타 작업을 최적화합니다.
jQuery 기반 코드가 일반 JavaScript 코드보다 작성하기 쉽고, 읽기 쉽고, 실행 속도가 더 빠르다는 것을 알 수 있습니다.
쿼리 사용을 확실히 알 수 있습니다. 코드는 기본 js 코드보다 작성하기 쉽고, 읽기 쉽고, 실행하기 더 빠릅니다.