[Javascript][Jquery]jQuery から JavaScriptへの変換



# jQuery から JavaScriptへの変換

`Jquery` から Native の`Javascript` (Vanilla JS/ Pure JS)
に変換するときの参考。


### [](#selectors)Selectors

*   $("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

### [](#input-values-getting-and-setting)Input values: getting and setting

*   $input.val() => input.value
*   $input.val("hello") => input.value = "hello"

### [](#event-listeners)Event Listeners

*   $elem.on(eventName, handler) => elem.addEventListener(eventName, handler)
    *   Note: 3rd arg of `false` (for `useCapture`) not needed as not supporting IE8 - see [addEventListener docs](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Browser_compatibility)
*   $elem.off(eventName) => elem.removeEventListener(eventName, handler) // note you must keep a ref to handler for this
*   Key event listeners: use `e.key === "+"` instead of `e.which === 43`
    *   See [key docs](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key)

**To defer event handling to some ancestor**

    $ancestorElem.on(eventName, elemSelector, handler)

=>

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

### [](#event-handlers)Event handlers

*   key events: (e.which === 45) => (e.key === "Tab") - [docs](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values)

### [](#class-manipulation)Class manipulation

*   $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('class') = 'some classes' => elem.className = 'some classes'

### [](#styling)Styling

*   $el.css({ top: "10px" }) => el.style.top = "10px"

### [](#scroll-position)Scroll position

*   $el.scrollTop() => el.scrollTop
*   $el.scrollTop(10) => el.scrollTop = 10

### [](#utils)Utils

*   $.inArray(item, arr) > -1 => arr.indexOf(item) > -1 // note: could use arr.includes(item) but would require polyfill for IE11
*   $.extend({}, defaults, options) => Object.assign(defaults, options)
*   $.trim(s) => s.trim()
*   $input.val() => input.value

### [](#creatingappending-elements)Creating/appending elements

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

=>

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

**To add copy:**

    $elem.text(s)

=>

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

**To append a HTML string:**

*   $elem.append(htmlString) => elem.insertAdjacentHTML('beforeend', htmlString);

### [](#attributes)Attributes

*   $elem.attr("placeholder") => elem.getAttribute("placeholder")
*   $elem.attr("placeholder", p) => elem.setAttribute("placeholder", p)

### [](#properties)Properties

*   $el.props("disabled") => el.disabled
*   $el.props("readonly") => el.readOnly


# 元記事

https://github.com/jackocnr/intl-tel-input/wiki/Converting-jQuery-to-JavaScript

# 参考

https://wemo.tech/2101

https://www.webprofessional.jp/dom-manipulation-vanilla-javascript-no-jquery/

https://www.willstyle.co.jp/blog/1025/

https://qiita.com/nightyknite/items/668c112c40931515ed67

https://qiita.com/tyoukan__/items/e4582c6774748b7f96cd