jQuery function_jquery의 동등한 네이티브 함수 코드 예
- WBOY원래의
- 2016-05-16 17:33:241001검색
일반적으로 사용되는 jQuery 메서드와 그에 상응하는 네이티브 메서드(1, 2, 3)의 성능에 대해 몇 가지 테스트를 수행했습니다.
당신이 무슨 생각을 하는지 알아요. jQuery 메서드는 브라우저 호환성 및 기타 사항을 처리해야 하기 때문에 기본 메서드는 분명히 jQuery 메서드보다 빠릅니다. 네, 전적으로 동의합니다. jQuery 사용에 반대하여 이 글을 쓰는 것은 아니지만, 최신 브라우저를 대상으로 하는 경우 기본 메서드를 사용하면 성능이 크게 향상될 것입니다.
많은 개발자는 자신이 사용하는 대부분의 jQuery 메서드가 기본 메서드나 더 가벼운 메서드로 대체될 수 있다는 사실을 인식하지 못합니다. 다음은 일반적으로 사용되는 일부 jQuery 메서드와 해당 기본 메서드를 보여주는 몇 가지 코드 예제입니다.
번역자 주: 아래 기본 메소드 중 일부는 HTML5에서 참조되며 일부 브라우저에서는 사용되지 않을 수 있습니다.
Selector
jQuery의 핵심 중 하나는 DOM 요소를 쉽게 얻을 수 있다는 점입니다. CSS 선택 문자열을 입력하고 일치하는 요소를 가져오기만 하면 됩니다. 그러나 대부분의 경우 간단한 네이티브 코드로 동일한 효과를 얻을 수 있습니다.
코드 복사 코드는 다음과 같습니다.
//----모든 div 가져오기 페이지- --------
/* jQuery */
$("div")
/* 기본*/
document.getElementsByTagName("div")
//- ---지정된 클래스의 모든 요소 가져오기---------
/* jQuery */
$(".my-class")
/* 기본* /
document .querySelectorAll(".my-class")
/* 더 빠른 기본 메서드*/
document.getElementsByClassName("my-class")
//--다음을 통해 요소 가져오기 CSS 선택- ---------
/* jQuery */
$(".my-class li:first-child")
/* 기본*/
문서. querySelectorAll(" .my-class li:first-child")
//----지정된 clsss의 첫 번째 요소 가져오기----
/* jQuery */
$(". my-class ").get(0)
/* Native*/
document.querySelector(".my-class")
번역자 주: 사실 여기에는 몇 가지 문제가 있습니다. , document.querySelectorAll과 jQuery 선택기 사이에는 차이점이 있습니다. 전자는 NodeList를 반환하고 후자는 배열과 같은 객체를 반환합니다.
DOM 작업
jQuery는 요소 삽입이나 삭제와 같은 DOM 작업에도 자주 사용됩니다. 이러한 작업을 수행하려면 기본 메서드를 사용할 수도 있습니다. 물론 추가 코드를 작성하여 사용하기 쉽게 만들 수도 있습니다. 다음은 페이지에 요소를 삽입하는 몇 가지 예입니다.
코드 복사 코드는 다음과 같습니다.
//----요소 삽입- ---
/* jQuery */
$(document.body).append("
" ); /* 네이티브 접근 방식이 좋지 않음*/
document.body.innerHTML = "
< /div> ;"; /* 더 나은 기본 방법*/
var frag = document.createDocumentFragment();
var myDiv = document.createElement("div");
myDiv.id = " myDiv";
var im = document.createElement("img");
im.src = "im.gif";
myDiv.appendChild(im);
frag.appendChild(myDiv) ;
document.body.appendChild(frag);
//----선행 요소----
// 마지막 줄 제외
document.body.insertBefore(frag, document .body.firstChild);
CSS 클래스
jQuery에서는 DOM 요소의 CSS 클래스를 쉽게 추가, 삭제, 확인할 수 있습니다. 다행히도 기본 메서드를 사용하면 쉽게 수행할 수 있습니다.
코드 복사 코드는 다음과 같습니다.
// DOM 요소 참조 가져오기
var el = document.querySelector(".main-content");
//----클래스 추가------
/* jQuery */
$(el) .addClass("someClass ");
/* 기본 메서드 */
el.classList.add("someClass")
//----클래스 삭제----
/* jQuery */
$(el).removeClass("someClass");
/* 네이티브 메서드*/
el.classList.remove("someClass")//-- --클래스인가---
/* jQuery */
if($(el).hasClass("someClass"))
/* 네이티브 메소드*/
if(el. classList.contains(" someClass"))
CSS 속성 수정 항상 jQuery CSS 함수를 사용하는 것보다 더 간단하고 빠른 Javascript를 통해 CSS 속성을 수정하고 검색합니다. 불일치가 없습니다. 필요한 코드입니다.
코드 복사 코드는 다음과 같습니다.
// DOM 요소 참조 가져오기
var el = document.querySelector(".main-content")
//----CSS 속성 설정----
/ * jQuery */
$(el).css({
배경: "#FF0000",
"box-shadow": "1px 1px 5px 5px 빨간색",
너비: "100px" ,
높이: "100px",
디스플레이: "블록"
})
/* 기본*/
el.style.Background = "#FF0000"
el .style.width = "100px";
el.style.height = "100px";
el.style.display = "block";
el.style.boxShadow = "1px 1px 5px 5px ";
// DOM 요소 참조 가져오기
var el = document.querySelector(".main-content")
//----CSS 속성 설정----
/ * jQuery */
$(el).css({
배경: "#FF0000",
"box-shadow": "1px 1px 5px 5px 빨간색",
너비: "100px" ,
높이: "100px",
디스플레이: "블록"
})
/* 기본*/
el.style.Background = "#FF0000"
el .style.width = "100px";
el.style.height = "100px";
el.style.display = "block";
el.style.boxShadow = "1px 1px 5px 5px ";
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.