jQuery Introduction | Overview | jQuery Syntax

Tags:

jQuery Syntax

With jQuery, you can select HTML elements very easily and set specific behavior on the selected elements.

$(selector).actionFunction();

The dollar sign ($) means jQuery and is an identifier that lets you access jQuery. Use a selector to select the desired HTML element, then define an action function to set the desired behavior on the selected element.

$() Function

The $() function creates selected HTML elements in a form that can be used by jQuery.

As arguments to the $() function, you can pass not only HTML tag names but also CSS selectors to select specific HTML elements. Elements created through this $() function are called jQuery objects. jQuery can set various behaviors by using methods of these generated jQuery objects.

ready() Method of the Document Object

JavaScript code should run after the web browser has loaded every element of the document. Usually this does not cause problems, but errors occur in cases like the following.

  • Trying to add an attribute to an HTML element that has not been created yet.
  • Trying to get the size of an image that has not been loaded yet.

The following example adds an attribute to an HTML element that has not yet been created.

function func() {
    addAttribute();  // Adds an attribute to the HTML element whose ID is "para".
    createElement(); // Creates the HTML element whose ID is "para".
}
function createElement() {
    var criteriaNode = document.getElementById("text");
    var newNode = document.createElement("p");
    newNode.innerHTML = "This is a new paragraph.";
    newNode.setAttribute("id", "para");
    document.body.insertBefore(newNode, criteriaNode);
}
function addAttribute() {
    document.getElementById("para").setAttribute("style", "color: red");
}

In the example above, the addAttribute() function adds a new attribute to the HTML element whose ID is "para". The createElement() function creates and adds the HTML element whose ID is "para".

In the example above, because the addAttribute() function is called before the HTML element whose ID is "para" is created, an Uncaught TypeError occurs and the running script stops. If the addAttribute() function that is called first is called after the createElement() function, it will work normally.

In a web browser, you can check errors that occur in the current HTML document by pressing F12.

Therefore, in JavaScript, the onload() method of the Window object is used so that code runs after the document has fully loaded.

window.onload = function() {
    // JavaScript code
};

Similarly, in jQuery, the ready() method of the Document object is used to guarantee the same result.

$(document).ready(function() {
   // jQuery code
});

jQuery also provides a shorter syntax that guarantees the same result.

$(function() {
   // jQuery code
});

The following example shows the difference between the time when the document is fully loaded and the time when the window is fully loaded.

$(document).ready( function() {
  // Runs when the document has fully loaded.
});
$(window).load( function() {
  // Runs when the entire window has fully loaded.
});