The Pluralsight course entitled 'jQuery 3: Getting Started' served as a great little refresher, and also cleared up a few things which I probably skipped over whilst I was building my demo projects as I was at times running before I could walk.
Cheat sheet
Firstly, here's a great jQuery cheat sheet I found (not part of the course): jQuery cheat sheet
Compatibility
jQuery is available in 2 versions:
- 3.x Compat
- select if you need to support IE 6, 7, or 8
- 3.x
- select if users are running IE 9+
The API is identical between both versions. 3.x is a smaller file size as doesn't need all the code for compatibility.
Structure
Example:
$(function () {
console.log('hello world');
});
- $ is a shortcut variable to jQuery. You can write the jQuery if you want. $ == jQuery.
- function () is an anonymous function and runs after the jQuery statement executes.
Chaining
Functions can be chained in a statement.
Example:
$('#sectionId li').width('50%').height('200px').addClass('highlight bordered');
Naming conventions
For jQuery variables, it's best to use a $ sign at the beginning of the variable name, opposed to just variable name when using regular JavaScript.
Example:
var h2 = document.getElementByTagName('h2');
var $h2 = $('h2');