So long, jQuery, and thanks for all the fish!
0 likes•310 views
The document discusses the advantages of using native JavaScript over jQuery for modern web development, citing performance, browser support, and specific use cases. It includes comparisons of various jQuery functions with their native counterparts, highlighting selector methods, class manipulation, loops, event modeling, and AJAX. The author encourages developers to utilize core JavaScript to enhance efficiency and provides resources for further reading.
So long, jQuery, and thanks for all the fish!
- 1. SO LONG, JQUERY, AND THANKS FOR ALL THE FISH! MATT TURNURE github.com/MattTurnure @MattTurnure mattturnure.com
- 2. I LOVE NATIVE, CORE JAVASCRIPT BECAUSE … 1. We are living in modern times. Support for older browsers are dwindling. 2. It’s more performant. Core JavaScript is faster than jQuery in many cases. 3. jQuery uses it.
- 3. THINGS I HAVE USED JQUERY FOR 1. Selectors 2. Class Manipulation 3. Loops 4. Event Modeling 5. Animation 6. Ajax
- 4. SELECTORS
- 5. SELECTING INDIVIDUAL DOM NODES
- 8. SELECTING MULTIPLE DOM NODES
- 11. BONUS CORE SELECTOR SHOWDOWN
- 16. BROWSER SUPPORT < IE8 is not supported. IE8 has partial support. Partial support in IE8 is due to being limited to CSS 2.1 selectors. Additionally, it will have trouble with selectors including unrecognized tags (for example HTML5 ones). http://caniuse.com/#search=querySelectorAll http://caniuse.com/#search=getElementsByClassName FURTHER READING https://developer.mozilla.org/en- US/docs/Web/API/Document.querySelectorAll https://developer.mozilla.org/en- US/docs/Web/API/document.getElementsByClassName https://developer.mozilla.org/en- US/docs/Web/API/document.getElementById
- 18. HASCLASS .hasClass() versus el.classList.contains()
- 19. $el.hasClass() var $el = $('#item'); if ($el.hasClass('item')) { return true; } else { return false; }
- 20. el.classList.contains() var el = document.getElementById('item'); if (el.classList.contains('item')) { return true; } else { return false; }
- 22. ADDCLASS .addClass() versus el.classList.add()
- 26. REMOVECLASS .removeClass() versus el.classList.remove()
- 29. http://jsperf.com/removeclass-vs-classlist-remove
- 30. BROWSER SUPPORT <= IE9 and Opera Mini not supported http://caniuse.com/#search=classList FURTHER READING https://developer.mozilla.org/en- US/docs/Web/API/Element.classList
- 31. LOOPS
- 33. $.each() var $list = $('ul li'); $.each($list, function (i, val) { // do something with val });
- 34. arr.forEach() var list = document.querySelectorAll('ul li'), ary = Array.prototype.slice.call(list); ary.forEach(function (item) { // do something with item });
- 36. BROWSER SUPPORT >= IE9 http://kangax.github.io/compat-table/ es5/#Array.prototype.forEach FURTHER READING https://developer.mozilla.org/en- US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
- 37. EVENT MODELING
- 39. $el.on() var $list = $('#list'); function func() {} $list.on('click', func); $list.off('click', func);
- 40. el.addEventListener() var list = document.getElementById('list'); function func() {} list.addEventListener('click', func, false); list.removeEventListener('click', func, false);
- 42. BROWSER SUPPORT >= IE9 https://developer.mozilla.org/en- US/docs/Web/API/EventTarget.addEventListener
- 44. AJAX Only use the parts of jQuery that you need. https://github.com/jquery/jquery $ grunt custom:-core/ready,-css,-effects,-deprecated,-dimensions,-event/alias,-offset,-wrap
- 45. MATT TURNURE github.com/MattTurnure @MattTurnure mattturnure.com