Comparison of jQuery methods and their native JavaScript counterparts; jQuery and core JS performance comparison; and ways to use only the parts of jQuery you need.

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

6. $('#my-id')
versus
document.querySelector('#my-id')

7. http://jsperf.com/node-selectors-2

8. SELECTING MULTIPLE DOM NODES

9. $('.my-class')
versus
document.querySelectorAll('.my-class')

10. http://jsperf.com/node-selectors/3

11. BONUS CORE SELECTOR SHOWDOWN

12. document.querySelector('#my-id')
versus
document.getElementById('my-id')

13. http://jsperf.com/core-selector

14. document.querySelectorAll('.my-class')
versus
document.getElementsByClassName('my-class')

15. http://jsperf.com/core-class-selectors

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

17. CLASS MANIPULATION

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;
}

21. http://jsperf.com/hasclass-performance

22. ADDCLASS
.addClass()
versus
el.classList.add()

23. $el.addClass()
$('#item').addClass('added');

24. el.classList.add()
document.getElementById('item').classList.add('added');

25. http://jsperf.com/turnureaddclass

26. REMOVECLASS
.removeClass()
versus
el.classList.remove()

27. $el.removeClass()
$('#item').removeClass('added');

28. el.classList.remove()
document.getElementById('item').classList.remove('added');

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

32. $.each()
versus
arr.forEach()

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
});

35. http://jsperf.com/turnure-loops

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

38. $el.on()
versus
el.addEventListener()

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);

41. http://jsperf.com/event-model/2

42. BROWSER SUPPORT
>= IE9
https://developer.mozilla.org/en-
US/docs/Web/API/EventTarget.addEventListener

43. ANIMATION
CSS3 Transitions

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