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

jQuery から JavaScriptへの変換

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

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.val() => input.value
• $input.val("hello") => input.value = "hello"

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
• $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

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

• key events: (e.which === 45) => (e.key === "Tab") - docs

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

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

Scroll position

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

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

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

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

Properties

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

元記事

参考