JQuery를 기본 js로 대체하는 방법에 대한 16가지 방법의 자세한 예

일부 JQuery 메소드를 대체하는 네이티브 JS의 간단한 구현을 제공합니다. 꽤 좋은 것 같아서 여러분과 공유하고 참고용으로 드리고 싶습니다.

1. 요소 선택

// jQuery
var els = $('.el');

// Native
var els = document.querySelectorAll('.el');

// Shorthand
var $ = function (el) {
 return document.querySelectorAll(el);
}

querySelectorAll 메소드는 배열로 변환해야 하는 NodeList 객체를 반환합니다.

myList = Array.prototype.slice.call(myNodeList)

re2 클래스를 조작하는 데 사용할 수 있는 읽기 및 쓰기 가능한 className 특성입니다.

HTML 5는 또한 더 강력한 기능을 갖춘 classList 객체를 제공합니다(IE 9에서는 지원되지 않음).

// jQuery
var newEl = $(&#39;<p/>&#39;);

// Native
var newEl = document.createElement(&#39;p&#39;);

6. 요소 추가

꼬리에 요소 추가:

// jQuery
$('.el').on('event', function() {

});

// Native
[].forEach.call(document.querySelectorAll('.el'), function (el) {
 el.addEventListener('event', function() {

 }, false);
});

머리에 요소 추가:

// jQuery
$('.el').filter(':first').attr('key', 'value');
$('.el').filter(':first').attr('key');

// Native
document.querySelector('.el').setAttribute('key', 'value');
document.querySelector('.el').getAttribute('key');

7. 요소 복제

// jQuery
$('.el').addClass('class');
$('.el').removeClass('class');
$('.el').toggleClass('class');

// Native
document.querySelector('.el').classList.add('class');
document.querySelector('.el').classList.remove('class');
document.querySelector('.el').classList.toggle('class');

8. 요소 제거

// jQuery
$(&#39;.el&#39;).append($(&#39;<p/>&#39;));

// Native
document.querySelector(&#39;.el&#39;).appendChild(document.createElement(&#39;p&#39;));

9. 부모 찾기 레벨 요소

//jQuery
$(‘.el&#39;).prepend(&#39;<p></p>&#39;)

//Native
var parent = document.querySelector(&#39;.el&#39;);
parent.insertBefore("<p></p>",parent.childNodes[0])

10. 이전/다음 요소 가져오기(이전/다음 요소)

// jQuery
var clonedEl = $('.el').clone();

// Native
var clonedEl = document.querySelector('.el').cloneNode(true);

11. 하위 요소가 있는지 여부

Remove
// jQuery
$('.el').remove();

// Native
remove('.el');

function remove(el) {
 var toRemove = document.querySelector(el);

 toRemove.parentNode.removeChild(toRemove);
}

14.$(document).ready

DOM 로딩이 완료되면 jQuery의 $(document).ready 메소드와 동일한 DOMContentLoaded 이벤트가 트리거됩니다.

// jQuery
$('.el').parent();

// Native
document.querySelector('.el').parentNode;

15. 데이터 저장

jQuery 객체는 데이터를 저장할 수 있습니다.

// jQuery
$('.el').prev();
$('.el').next();

// Native
document.querySelector('.el').previousElementSibling;
document.querySelector('.el').nextElementSibling;

HTML 5에는 비슷한 기능을 가진 데이터 세트 개체가 있지만(IE 10은 지원하지 않음) 문자열만 저장할 수 있습니다.

// jQuery
$.get('url', function (data) {

});
$.post('url', {data: data}, function (data) {

});

// Native

// get
var xhr = new XMLHttpRequest();

xhr.open('GET', url);
xhr.onreadystatechange = function (data) {

}
xhr.send();

// post
var xhr = new XMLHttpRequest()

xhr.open('POST', url);
xhr.onreadystatechange = function (data) {

}
xhr.send({data: data});

16. Animation

jQuery의 animate 메소드를 사용하여 애니메이션 효과를 생성합니다.

//jQuery
$("#elementID").empty()

//Native
var element = document.getElementById("elementID")
while(element.firstChild) element.removeChild(element.firstChild);

jQuery의 애니메이션 효과는 주로 DOM을 기반으로 합니다. 그러나 현재 CSS 3 애니메이션은 DOM보다 훨씬 강력하므로 CSS에 애니메이션 효과를 작성한 다음 DOM 요소의 클래스를 조작하여 애니메이션을 표시할 수 있습니다.

//jQuery
if (!$("#elementID").is(":empty")){}

//Native
if (document.getElementById("elementID").hasChildNodes()){}

애니메이션에 콜백 함수를 사용해야 하는 경우 CSS 3에서는 해당 이벤트도 정의합니다.

아아아아

위 내용은 JQuery를 기본 js로 대체하는 방법에 대한 16가지 방법의 자세한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!