JQuery 에 지나치게 의존하지 마십시오 (1)

의심할 여지없이 JQuery는 매우 우수한 JavaScript 라이브러리로 우리가 프로젝트를 더욱 편리하고 쉽게 개발할 수 있게 한다.
그러나 프로젝트(특히 모바일 프로젝트)에서 JQuery를 사용할 준비를 할 때, JQuery의 어떤 기능을 사용할 것인지, JQuery가 정말 필요한지 잘 생각해 봐야 한다.자바스크립트가 끊임없이 개선되고 진화함에 따라 현재 내장된 기능은 이미 매우 강력하기 때문에 어느 정도에 이전에 JQuery에서 실현해야 했던 기술을 실현할 수 있다. (만약 프로젝트가 IE8 이전의 브라우저에서 사용해야 한다면, JQuery를 사용하면 많은 호환성 문제를 줄일 수 있다.)
JavaScript를 사용하여 JQuery 기능을 수행할 수 있는 코드는 다음과 같습니다.
1. 검색 선택기 찾기
ID별로 찾기:

$('#test')  =>  document.getElementById('test');

클래스 이름으로 찾기:

$('.test')  =>  document.getElementsByClassName('test')

이름표로 찾기:

$('div')  =>  document.getElementsByTagName('div')

물론 너도 통일적으로 찾을 수 있다.

$('#test')

document.querySelector('#test')
$('#test div')  =>  document.querySelectorAll('#test div')
$('#test').find('span')  => document.querySelectorAll('#test span');

개별 요소 가져오기

$('#test div').eq(0)[0]  =>  document.querySelectorAll('#test div')[0] 

HTML, 헤드, 바디를 가져오려면 다음과 같이 하십시오.

$('html')  =>  document.documentElement
$('head')  =>  document.head
$('body')  =>  document.body

노드의 존재 여부를 판단하다

$('#test').length > 0  =>  document.getElementById('test') !== null

$('div').length > 0  => document.querySelectorAll('div').length > 0

노드를 옮겨다니기:

$('div').each(function(i, elem) {})

function forEach(elems, callback) {
  if([].forEach) {
    [].forEach.call(elems, callback);
  } else {
    for(var i = 0; i < elems.length; i++) {
      callback(elems[i], i);
    }
  }
}

var div = document.querySelectorAll('div');
forEach(div, function(elem, i){

});

노드 비우기

$('#test').empty()  =>  document.getElementById('test').innerHTML = '';

노드 비교

$('div').is($('#test'))  =>  document.querySelector('div') === document.getElementById('test')

2, 컨텐트 가져오기/설정(값)
요소 내의 컨텐트 가져오기/설정

$('div').html()  =>  document.querySelecotr('div').innerHTML

$('div').text()  =>  var t = document.querySelector('div');
t.textContent  || t.innerText;

$('div').html('abc');  =>  document.querySelecotr('div').innerHTML = 'abc';

$('div;).text('abc')  =>  document.querySelecotr('div').textContent = 'abc'

요소 자체를 포함하는 내용 가져오기

$('
').append($('#test').clone()).html() => document.getElementById('test').outerHTML

$('
').append($('#test').clone()).html('abc') => document.getElementById('test').outerHTML = 'abc' 
 
 
     
 
 
$('input').val()  =>  document.querySelector('input').value

$('input').val('abc') => document.querySelector('input').value = 'abc'
  
3. class 클래스 이름 조작
클래스 이름 추가
$('#test').addClass('a')

function addClass(elem, className) {
  if(elem.classList) {
    elem.classList.add(className);
  } eles {
    elem.className += ' ' + className;
  }
}
addClass(document.getElementById('test'), 'a');
  
클래스 이름 삭제
$('#test').removeClass('a');

function removeClass(elem, className) {
  if(elem.classList) {
    elem.classList.remove(className);
  } else {
    elem.className = elem.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
  }
}

removeClass(document.getElementById('test'), 'a');
  
클래스 이름은 다음과 같습니다.
$('#test').hasClass('a')

function hasClass(elem, className) {
  if(elem.classList) {
    return elem.classList.contains(className);
  } else {
    return new RegExp('(^| )' + className + '( |$)', 'gi').test(elem.className);
  }
}
hasClass(document.getElementById('test'), 'a');
  
4. 노드 작업
노드 생성
$('
')  =>  document.createElement('div')
 
 
    ：
 
 
$('div').clone()  =>  document.querySelector('div').cloneNode(true)
  
노드 삽입하기
$('div').append('')

var span = document.createElement('span');
document.querySelector('div').appendChild(span);
  
노드를 지정하기 전에 새 하위 노드를 삽입합니다.
$('').insertBefore('#test'); 

var t = document.getElementById('test');
var span = document.createElement('span');
t.parentNode.insertBefore(span, t);

/*    */
t.insertAdjacentHTML('beforeBegin', '');
  
노드를 지정한 후 새 하위 노드를 삽입하려면 다음과 같이 하십시오.
$('').insertAfter('#test')

function insertAfter(elem, newNode){
  if(elem.nextElementSibling) {
    elem.parentNode.insertBefore(newNode, elem.nextElementSibling);
  } else {
    elem.parentNode.appendChild(newNode);
  }
}

var t = document.getElementById('test');   
var span = document.createElement('span');   
insertAfter(t, span);

/*    */
t.insertAdjacentHTML('afterEnd', '');
  
부모 노드 가져오기
$('#test').parent()  =>  document.getElementById('test').parentNode
  
노드 삭제
$('#test').remove()  

var t = document.getElementById('test');
t.parentNode(t);
  
Element 서브노드 가져오기
$('#test').children()

function children(elem) {
  if(elem.children) {
    return elem.children;
  } else {
    var children = [];     
    for (var i = el.children.length; i--;) {       
        if (el.children[i].nodeType != 8)      
          children.unshift(el.children[i]);    
    }
    return children;
  }
}

children(document.getElementById('test'));
  
다음 형제 노드 획득:
$('#test').next()

function nextElementSibling(elem) {
  if(elem.nextElementSibling) {
    return elem.nextElementSibling;
  } else {
    do { 
       elem = elem.nextSibling; 
    } while ( elem && elem.nodeType !== 1 );   
    return elem;
  }
}

nextElementSibling(document.getElementById('test'));
  
이전 형제 노드 가져오기:
$('#test').prev()     

function previousElementSibling(elem) {    
  if(elem.previousElementSibling) {    
    return elem.previousElementSibling;    
  } else {    
    do {     
      elem = elem.previousSibling;     
    } while ( elem && elem.nodeType !== 1 );       
    return elem;    
  }   
}     

previousElementSibling(document.getElementById('test')); 
  
5. 속성 조작
속성 가져오기
$('#test').attr('class')  =>  document.getElementById('test').getAttribute('class')
  
속성 삭제
$('#test').removeAttr('class')  => document.getElementById('test').removeAttribute('class')
  
속성 설정
$('#test').attr('class', 'abc')  =>  document.getElementById('test').setAttribute('class', 'abc');
  
6, CSS 스타일 작업
스타일 설정
$('#test').css('height', '10px'); => document.getElementById('test').style.height = '10px';
  
스타일 가져오기
$('#test').css('height') 

var getStyle = function(dom, attr) {   
  return dom.currentStyle ? dom.currentStyle[attr] : getComputedStyle(dom, false)[attr];  
};

getStyle(document.getElementById('test'), 'height');
  
위조 클래스의 CSS 스타일 가져오기
window.getComputedStyle(el , ":after")[attrName];
  
참고: IE는 위조 클래스를 가져오는 것을 지원하지 않습니다.
7. 문자열 조작
공백 제거
$.trim(' abc ')  

function trim(str){
  if(str.trim) {
    return str.trim();
  } else {
    return str.replace(/^\s+|\s+$/g, '');
  }
}

trim(' abc ');
  
8. JSON 작업
JSON 서열화
$.stringify({name: "TG"})  =>  JSON.stringify({name: "TG"})
  
JSON 역서열화
$.parseJSON('{ "name": "TG" }')  =>  JSON.parse('{ "name": "TG" }')

  
텍스트 링크: JQuery에 지나치게 의존하지 마십시오(하나)
잘못이 있으면 바로잡아 주십시오!더 좋은 건의가 있으면 메시지를 남겨 주십시오!