너는 jQuery 필요 없어(5)

뭐가 jQuery를 안 써요?왜냐하면 그것은 당신의 사이트 부피를 비대하게 만들기 때문이다.당신의 사이트는 정말로 jQuery가 필요하지 않습니다. 추가 부피, 대역폭, 불러오는 시간이 필요하지 않습니다.
기본 JavaScript로 jQuery가 제공하는 기능과 방법을 간단히 실현
페이지 요소 찾기, 선택

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

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

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

var els = $('.el');

요소 만들기

// jQuery   
var newEl = $('<div/>');

//   JavaScript  
var newEl = document.createElement('div');

이벤트, 모니터 작업

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

});

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

  }, false);
});

속성 값 설정, 수정 및 가져오기

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

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

클래스 작업 추가/수정/삭제/반전

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

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

요소 Append 추가

// jQuery   
$('.el').append($('<div/>'));

//   JavaScript  
document.querySelector('.el').appendChild(document.createElement('div'));

복제, 요소 클론

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

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

요소 삭제

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

//   JavaScript  
remove('.el');

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

  toRemove.parentNode.removeChild(toRemove);
}

상위 요소 작업

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

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

이전/다음/근접 동년배 요소

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

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

　　
XHR aka AJAX
새 버전의 자바스크립트 API는 aax를 실현할 수 있는 새로운 API-fetch를 제공합니다. 이api는 새로운 Promise 구조를 채택하여 사용하기에 더욱 편리하고 유연합니다. 상세한 사용법은 을 참고하십시오.
다음은 전통적인 실현 방식이다.

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

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

});

//   JavaScript  

// 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});

부인할 수 없다. jQuery는 때때로 프로젝트를 개발할 때 반드시 없어서는 안 된다. 그러나 서로 다른 프로젝트, 서로 다른 장면, 프로젝트의 기술 구조는 모두 서로 다른 고려를 해야 한다. 냉정한 사고를 통해 우리는 jQuery가 필요하지 않고 원생 자바스크립트 기술을 사용하면 오히려 프로젝트가 더욱 간소화되고 효율이 높아진다는 것을 알 수 있다.