Uses CSS selectors to help us grab or select elements programmatically (i.e. in our code)
Accomplishes more with less code vs using native Javascript
Here’s how we would programmatically select an element with an id of “flavors” using native Javascript
// selecting an element using native Javascript
document.getElementById('flavors').onClick = doSomething();
Here’s how we would programmatically select an element with an id of “flavors” using jQuery
// using jQuery (same as above but with much more intuitive syntax)
$('#flavors').click(doSomething);
In this code snippet above you can see jQuery allows us to use CSS selectors to programmatically select elements on our page
The ability to use CSS selectors to programmatically select elements is the main reason jQuery is so popular today
Here’s another example of how jQuery results in much more clear and readable DOM manipulation logic
In this code snippet, we are using native Javascript to programmatically select the <body> element and then change the background color to white
// selecting an element using native Javascript
document.getElementsByTagName('body')[0].style.backgroundColor = 'white';
Compare the snippet above with the following snippet that accomplishes the same result using jQuery
// 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 multiple words i.e. ‘backgroundColor’ instead of ‘background-color’