Learn jQuery

jQuery Syntax

The jQuery syntax is made by using HTML elements selector and perform some action on the elements.

Syntax

The basic jQuery syntax is given below.

$(selector).action()

However, we can also apply multiple action like below.This is known as statement chaining.

$(selector).action().action().action().action()

Specification

  • "$" sign to define/access jQuery
  • (selector) to find HTML elements. jQuery selector is similar to CSS selector.To select ID we use "#selector" and to class we use ".selector". There are some filters for further refining our selection on element like :first-child, :last-child etc.we will discuss it in other chapter of this tutorial.
  • jQuery "action()" define the action performed on the elements.

Example

Below example will change the “background-color” of a DIV .

HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script>
<title>jQuery Syntax Example </title>
</head>
<body>
<div id="container-fluid">
Change background color of div
</div>
</body>
</html>
Javascript
$(document).ready(function(){
  $("#container-fluid").css({
    "background-color" : "blue",
      });
});

Specification

In the above code $(“#container-fluid”) is a selector, which selects the element with ID "container-fluid" and applies action. In this case we used jQuery css() method.

What is Document Ready Event ?

We writes all jQuery methods inside a document ready event.It allow a function to excute when the DOM is fully loaded.
$(document).ready(function(){
  // Our jQuery methods go here...
}); 

All three of the following syntaxes are equivalent:

  • $(document).ready(handler)
  • $().ready(handler) (this is not recommended)
  • $(handler)

Declaring Variables

In jQuery, we can delcare variable two styles. they are given below.

First Style $.name = 'maxy'; Second Style var name = $("#name").text();