jQuery 跟 Javascript ES6

jQuery vs ES6 （似乎 ES6 已經包含了大部分 jQuery 的主要功能）

書摘自 Traversy Media (https://www.youtube.com/watch?v=pk3tsynNZ0w)

• DOM Selection

  jQuery	ES6
  $(‘.someclass’)	document.querySelector(‘.someclass’)
  	document.querySelectorAll(‘.someclass’)

• DOM manipulation

  jquery	ES6
  $element.remove()	element.remove()
  $element.prepend(otherElement)	element.prepend(otherElement)
  $element.before(otherElement)	element.before(otherElement)
  $element.addClass(‘someclass’)	element.classList.add(‘someclass’)
  $element.removeClass(‘someclass’)	element.classList.remove(‘someclass’)
  $element.toggleClass(‘someclass’)	element.classList.toggle(‘someclass’)
  const parent = $element.parent()	const parent = element.parentNode
  const cloned = element.clone()	const cloned = element.cloneNode(true)

• Events

  jQuery	ES6
  $someElement.on(‘click’, function() {})	someElement.addEventListener(‘click’, () => {})

• Http request (ajax)

  ES6	axios
  fetch(‘http://api.some.com’)	axios.get(‘http://api.som.com’)
  .then(res=>res.json())	.then(res => console.log(res.data))
  .then(data => console.log(data))

• Utilities

  jQuery	ES6
  $.isArray(someValue)	Array.isArray(someValue)
  $.inArray(item, anArray)	someArray.indexOf(item) > -1
  $.each(someArray, (value, index) => {})	someArray.forEach((value, index) => {})
  $.map(someArray, (value, index) => {})	someArray.map((value, index) => {})
  $.grep(someArray, (value, index) => {})	someArray.filter((value, index) => {})
  $.parseJson(str)	JSON.parse(str)

• Animation
  • 在純粹 Javascript 做 Animation 還是比 jQuery 麻煩，但是已經可以使用以下來幫助
    • CSS Transition/keyframes
    • Web Animation API
    • 3rd party library Greensock