[jQuery -> javascript] 제이쿼리대신 자바스크립트 사용하기

You Don't Need jQuery!

의 글을 보고 필요한 부분을 옮겨적었을 뿐이니 원문을 읽고싶다면

아래 주소로

https://blog.garstasio.com/you-dont-need-jquery/

+ 추가 You Might Not Need jQuery http://youmightnotneedjquery.com/

1. Selecting Elements

- 제이쿼리의 dom 조작과 traversing 셀렉터들을 javascript로 변경해서 사용한다면 어떻게 사용해야할까 고민될때가 많다.

1) id / querySelector() -> ie8 이상에서 쓰인다

$('#idName')   => document.querySelector('#idName')

querySelector()

 2) class / querySelectorAll()

$('.className')   => document.querySelectorAll('.className')

     querySelectorAll()

 3) tagName /querySelectorAll()

$('input')   => document.querySelectorAll('input')

 

 4) 가상 선택 pseudo-class  / querySelectorAll()

$('.className:hover')   => document.querySelectorAll('.className:hover')

 5)  속성선택 / Attribute / querySelectorAll()

$('[data-foo-bar="someval"]')   => document.querySelectorAll('[data-foo-bar="someval"]')

*** ie 적용을 위해서는  getAttribute(), setAttribute() 사용할것

document.querySelector('.className').getAttribute('data-list-id');

     document.querySelector('.className').setAttribute('data-list-id', 'num3');

 6) .children() / .children

 

$('.parent').children()   => document.getElementById('.parent').children;

 7) 자손선택 / querySelectorAll()

$('.parent a')   => document.getElementById('.parent a');

8) 부정 선택 / .not() / querySelectorAll()

$('.className').not('.ignore') / $('.className:not('.ignore'))   => document.querySelectorAll('.className:not('.ignore'));

만능......  "querySelectorAll()"

1. create element 

 jquery는 create element보다 add element에 더 가까움,

append(), prepend(), after(), before() 메소드를 사용해서 지정 클래스의 앞 뒤로 element를 생성해줌,

 

 자바스크립트의 경우 => document.createElement('div');

2. inserting elements Before & after

[html] <div id="s1"></div> <div id="s2"></div>

     

after [html] <div id="s1"></div> <div id="s1_1"></div> <div id="s2"></div>

     

2-1) before()

      jquery

     

$("#s2").after("<div id="s1_1"></div>");

      javascript / insertAdjacentHTML()

document.getElementById("s2").insertAdjacentHTML('beforebegin', '<div id="s1_1"></div>');

2-2) after()

        jquery

     

$("#s1").after("<div id="s1_1"></div>");

      javascript / insertAdjacentHTML()

document.getElementById("s1").insertAdjacentHTML('afterend', '<div id="s1_1"></div>');

3. inserting elements as Children

[html] <div id="parent">      <div id="oldChild"></div>  </div>

 

[after html] <div id="parent">      <div id="newChild"></div>       <div id="oldChild"></div>  </div>

 

3-1) prepend()

      jquery

     

$("#parent").prepend("<div id="newChild"></div>");

      javascript / insertAdjacentHTML()

document.getElementById("parent").insertAdjacentHTML('afterbegin', '<div id="newChild"></div>');

[html] <div id="parent">      <div id="oldChild"></div>  </div>

 

[after html] <div id="parent">            <div id="oldChild"></div>       <div id="newChild"></div>  </div>

 

3-2) append()

        jquery

     

$("#parent").append("<div id="newChild"></div>");

      javascript / insertAdjacentHTML()

document.getElementById("parent").insertAdjacentHTML('beforeend', '<div id="s1_1"></div>');

 

4. relocate element

4-1) 

[html] <div id="parent">      <div id="c1"></div>  </div> <div id="move"></div>

 

[after html] <div id="parent">            <div id="c1"></div>            <div id="move"></div>  </div>

     

 jquery / append()

     

$("#parent").append($('#move'));

      javascript / appendChild()

document.getElementById("parent").appendchild(document.getElementById('move'));

  

4-2)

[html] <div id="parent">      <div id="c1"></div>  </div> <div id="move"></div>

 

[after html] <div id="parent">       <div id="move"></div>             <div id="c1"></div> </div>

     

 jquery / prepend()

     

$("#parent").append($('#move'));

      javascript / insertBefore()

document.getElementById("parent").insertBefore(document.getElementById('move'), document.getElementById('c1'));

5. remove element  

 jquery  => $('#foobar').remove();

javascript => document.getElementById('foobar').parentNode.removeChild(document.getElmentById('foobar'));

6. addClass()

 jquery  => $('#foobar').addClass('addClass');

javascript => 

1) ie 10 이상(with the exception of ie9)

document.getElementById('foobar').classList.add('addClass');

2) ie 10 이하

document.getElementById('foobar').className += 'addClass';

7. removeClass()

jquery  => $('#foobar').removeClass('addClass');

javascript => 

1) ie 10 이상

document.getElementById('foobar').classList.remove('addClass');

2) ie 10 이하

document.getElementById('foobar').className.replace(/^addClass$/, '');

8. add&changing Text content

jquery  => $('#foobar').text('goodbye');

javascript => 

1) ie 9이하

document.getElementById('foobar').innerHTML = 'goodbye';

2) ie 9이상

document.getElementById('foobar').textContent = 'goodbye';

9. css

jquery  =>  $('#foobar').css('fontWeight', 'bold');

javascript => document.getElementById('note').style.fontWeight = "bold";

  => style.속성명

10 . EVENT

      [ native dom event ->> https://developer.mozilla.org/en-US/docs/Web/Events                                                      / https://www.w3schools.com/jsref/dom_obj_event.asp ]

    10-1) .click() / .addEventListener('click', function() {}

      jquery  =>  $(someElement).on('click', function(){}

javasctipt => someElement.addEventListener('click', function() {}

    10-2) .off() / removeEventLisner('이벤트명', 'handler')

jquery  => $('some-element').off('click', myEventHandler);

javasctipt => someElement.removeEventListener('click', myEventHandler);

    10-3) .on() / addEventListener

jquery  => $(someEl).on('some-event', function(event) {}

javasctipt => someEl.addEventListener('some-event', function(event) {}

    [  .addEventListener('이벤트명',  function(){});  ]