# 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

```javascript
$ancestorElem.on(eventName, elemSelector, handler)
```

* JavaScript

```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

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

* JavaScript

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

10\. 카피 추가

* jQuery

```javascript
$elem.text(S)
```

* JavaScript

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

11\. HTML string 추가

* jQuery

```javascript
$elem.append(htmlString)
```

* JavaScript

```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 |