jQuery syntax was designed to allow developers to easily select DOM element(s) and then perform some action on the element(s). The rudimentary syntax is as follows:

$(selector).action()

The $ sign references jQuery, (selector) queries the DOM element or elements, and .action() performs an action on the element.

Examples of jQuery syntax:

• $(this).hide() hides the current element.
• $("p").hide() hides all paragraphs.
• $("p.wow").hide() hides all paragraphs of the class "wow".
• $("#wow").hide() hides an element with the id of "wow".

jQuery Selectors

Before you start using jQuery, it’s crucial to understand the concept of jQuery selectors. jQuery selectors utilize CSS syntax, thus allowing developers to precisely select elements to apply effects to. Using these selectors, you can select specific DOM elements or groups of elements by attribute name, tag name, ID, or even by content. The different types of selectors are as follows:

jQuery Element Selectors

jQuery Attribute Selectors

jQuery CSS Selectors

$("div").css("background-color","red");

Document Ready Function

To prevent jQuery code from running before the document is completely loaded, all jQuery functions should be placed within the $(document).ready function. For example:

To create a document ready function

$(document).ready(function(){   
// Do something on document ready.  
});

To use a shortened version of the document ready function

$(function() {
// do something on document ready
});
                        

All scripts residing inside of the $(document).ready function will load as soon as the DOM is loaded and before the page contents are loaded.

jQuery Options

jQuery options are properties passed into a widget as arguments. Each widget option has a default configuration. You can override these defaults to customize the widget.

For example, assume that the wijprogressbar widget has a maxValue option with a default value of 100, but you want this value to be 85. Changing the maxValue option from its default to a value of 85 is as simple as passing an argument to the wijprogressbar:

To pass a maxValue argument to wijprogressbar

$(‘#progressbar’).wijprogressbar({
    maxValue: 85
});     

With the maxValue option set to 85, the range of values on the wijprogressbar widget is 0 – 85, as the minValue property is set to 0 by default. If you want to change the minValue option to 25, just add a comma after the maxValue argument and then write your minValue argument:

To pass a second argument

$(‘#progressbar’).wijprogressbar({
    maxValue: 85,
    minValue: 25
});                     

You can pass as many options to the widget as you want – just remember your commas!