javascript JQuery到Vanilla js指南

Posted 2021-05-04

// Element selection
document.querySelector('.someclass')    // $('.someclass')[0]
document.querySelectorAll('.someclass') // $('.someclass')

// DOM manipulation
element.remove()                        // $element.remove()
element.prepend(otherElement)           // $element.prepend(otherElement)
element.before(otherElement)            // $element.before(otherElement)
element.classList.add('some')           // $element.addClass('some')
element.classList.remove('some')        // $element.removeClass('some')
element.classList.toggle('some')        // $element.toggleClass('some')
const parent = element.parentNode       // const parent = $element.parent()
const clone = element.cloneNode(true)   // const clone = $element.clone()

// Events
element.addEventListener('click', e => { }) // $element.on('click', function(e){ })

// Utillities (or use https://lodash.com/docs)
Array.isArray(a)                  // $.isArray(a)
arr.indexOf(item) > -1            // $.inArray(item, arr)
arr.forEach((value, index) => {}) // $.each(arr, (i, v) => {})
arr.map((value, index) => {})     // $.map(arr, (v, i) => {})
arr.filter((value, index) => {})  // $.grep(arr, (v, i) => {})
JSON.parse(str)                   // $.parseJSON(str)

// Ajax calls(use https://github.com/github/fetch)
fetch('http://test.com').then(res => res.json())

// Details: https://www.youtube.com/watch?v=pk3tsynNZ0w