Converting jQuery to JavaScript

1. 셀렉터

jQuery	JavaScript
$("body")	document.body
$("html")	document.documentElement
$(selector)	document.querySelector(selector)
$elem.find(selector)	elem.querySelector(selector)
$elem.parent()	elem.parentNode
$elem.closest(.'country')	elem.closest('.country')
$input.closest('form')	input.form
siblings:$el.prev() and $el.next()	el.previousElementSibling and el.nextElementSibling

2. 입력값 셋팅

jQuery	JavaScript
$input.val()	input.value
$input.val("hello")	input.value

3. 이벤트 리스너

jQuery	JavaScript
$elem.on(eventName,handler)	elem.addEventListener(eventName, handler)
$elem.off(eventName)	elem.removeEventListener(eventName, handler)

4. 조상 요소 핸들링 차이점

• jQuery

$ancestorElem.on(eventName, elemSelector, handler)

• JavaScript

var handler = function(e) {
    var elem = e.target.closest(elemSelector);
    if(elem) {
        ...
    }
}
ancestorElem.addEventListener(eventName, handler, false)

5. 클래스 조작

jQuery	JavaScript
$elem.addClass(c)	elem.classList.add(c)
$elem.removeClass(c)	elem.classList.remove(C)
$elem.toggleClass(c)	elem.classList.toggle(c)
$elem.hasClass(c)	elem.classList.contains(c)
$elem.attr('clsss') = 'some classes'	elem.className = 'some classes'

6. CSS 스타일링

jQuery	JavaScript
$el.css({top:"10px"})	el.style.top = "10px"

7. 스크롤 위치

jQuery	JavaScript
$el.scrollTop()	el.scrollTop
$el.scrollTop(10)	el.scrollTop = . 0

8. 유틸

jQuery	JavaScript
$.inArray(item,arr) > -1	arr.indexOf(item) > -1
$.extend({},defaults,options)	Object.assign(defaults, options)
$.trim(s)	s.trim()
$input.val()	input.value

9. 원소 생성 및 추가

• jQuery

$("<div>",{"class":c}).appendTo(parent);

• JavaScript

var elem = document.createElement("div");
elem.className = c;
container.appendChild(elem);

10. 카피 추가

• jQuery

$elem.text(S)

• JavaScript

var elemText = document.createTextNode(text);
elem.appendCHild(elemText)

11. HTML string 추가

• jQuery

$elem.append(htmlString)

• JavaScript

elem.insertAdjacentHTML('beforeend',htmlString);

12. Attributes

jQuery	JavaScript
$elem.attr("placeholder")	elem.getAttribute("placeholder")
$elem.attr("placeholder",p)	elem.setAttribute("placeholder")

13. Properties

jQuery	JavaScript
$el.props("disabled")	el.disabled
$el.props("readonly")	el.readOnly