Intro to jQuery

What is jQuery?

  • A javascript library

  • Offers a simple way to acheive a variety of common javascript tasks

  • Consistent across all browsers

  • Does not do anything pure javascript cannot do, just does it with a more intuitive syntax

Benefits of jQuery?

  • Uses CSS selectors

  • Accomplishes more with less code

CSS selectors means less code


	// selecting an element using native/pure javascript
	document.getElementById('flavors');

vs


	// using jQuery (same as above but with much more intuitive syntax)
	$('#flavors');

Use of CSS selectors to ‘select’ elements is one of the main reasons jQuery is so popular today

CSS selectors means less code (continued)


	// selecting an element using native/pure javascript
	document.getElementsByTagName('body')[0].style.backgroundColor = 'white';

vs


	// using jQuery (same as above but with much more intuitive syntax)
	$('body').css('backgroundColor', 'white');

Note: best practice is to use camel case when referencing css properties that have mutliple words i.e. ‘backgroundColor’ instead of ‘background-color’

Mental Model for using jQuery

1) Select an element using CSS selectors 2) Do something with that element using jQuery methods


// selects an element with the id of 'flavor' and then
// adds the 'favorite' class to that element using 
// the addClass() method
$('#flavor').addClass('favorite');

Documentation

You will be here very often so get familar with it!

api.jquery.com