JQuery Syntax

The JQuery syntax helps for selecting HTML elements and performs required actions on the elements. Jquery is used heavily these days and substitute the javascript usage.

Syntax: –

<strong>$(selector).action()</strong>

In the above syntax the dollar sign ($)  is used to define the JQuery. The (selector) helps to query or find HTML elements and a JQuery action ()  is used to perform some actions or operations on the element(s). Here we are discussing some commonly used JQuery syntaxes.

1) $(this).hide():- The jQuery hide() method, hiding the current HTML element.

Eg:-

<!DOCTYPE html>
<html>
<head>
<script type=“text/javascript” src=“jquery.js”></script>
<script type=“text/javascript”>
$(document).ready(function()
{
$(“button”).click(function()
{
$(this).hide();
} );
} );
</script>
</head>
<body>
<button>Click me</button>
</body>
</html>

In the above example if we click on the “Click Me” button, the button is disappeared.

2) $(“p”).hide():- The jQuery hide() method, hiding all <p> elements.

Eg:-

<!DOCTYPE html>
<html>
<head>
<script type=“text/javascript” src=“jquery.js”></script>
<script type=“text/javascript”>
$(document).ready(function()
{
$(“button”).click(function()
{
$(“p”).hide();
} );
} );
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

In the above example if we click on the “Click me” button all the paragraphs are disappeared.

3) $(“p.test”).hide():- The jQuery hide() method, hiding all paragraph with class=“test”.

Eg:-

<!DOCTYPE html>

<html>
<head>
<script type=“text/javascript” src=“jquery.js”></script>
<script type=“text/javascript”>
$(document).ready(function()
{
$(“button”).click(function()
{
$(“p.test”).hide();
} );
} );
</script>
</head>
<body>
<h2 class=“test”> This is a heading</h2>
<p class=“test”> This is a paragraph.</p>
<p> This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

In the above example helps to hide the entire paragraph with class=“test”.

4) $(“#test”).hide():- The jQuery hide() method, hiding the element with id= “test”.

Eg:-

<!DOCTYPE html>
<html>
<head>
<script type=“text/javascript” src=“jquery.js”></script>
<script type=“text/javascript”>
$(document).ready(function()
{
$(“button”).click(function()
{
$(“#test”).hide();
} );
} );
</script>
</head>
<body>
<h2> This is a heading</h2>
<p> This is a paragraph.</p>
<p id=“test”> This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

In the above example if we click on the “Click me” button it hides the element with id=“test”.

5) data():- This function is used to attaches data to, or gets data from, selected elements.

Syntax1:- $(selector).data(name)

The “name” parameter is optional. In this method the parameter name specifies the name of data to retrieve. If no name is specified this method   will return all stored data for the element as an object.

Syntax2:- $(selector).data(name,value)

The parameter “name” specifies the name of data to set and the parameter “value” specifies the value of data to set.

Syntax3:- $(selector).data(object)

The parameter “object” specifies an object containing name/value pairs.

6)  each():-It helps to run a function for each element matched by the jQuery selector.

Syntax: – $(selector).each(function(index,element))

The parameter function(index,element) is a function to run for each matched element.

index: – The index position of the selector.

element – The current element (the “this” selector can also be used).

7) get():- It used to get the DOM (document object model)elements matched by the selector.

Syntax: – $(selector).get(index)

The parameter “index” specifies which of the matching elements to get (by index number).

8 ) index():- This method is used to search for a given element from among the matched elements It returns the index position of specified elements relative to other specified elements. The elements can be specified by jQuery selectors, or a DOM element. If the element is not found, index() will return -1.

Syntax1:- $(selector).index()

The above syntax gets the index position of the first matched selected element relative to its sibling elements.

Syntax2:- $(selector).index(element)

The above syntax gets the index position of an element, relative to the selector. The element can be specified using a DOM element, or a jQuery selector. The parameter “element” is optional. It specifies the element to get the index position. It can be a DOM element or a jQuery selector.

9) $.noConflict():- It releases jQuery’s control of the $ variable and this method also used to define a new custom name for the jQuery variable. $.noConflict() method is useful when other JavaScript libraries use the $ for their functions.

Syntax: – $.noConflict(removeAll)

The parameter “removeAll” is optional. It is a Boolean value that specifies whether or not to release jQuery’s control of ALL jQuery variables (including “jQuery”).

10) $.param():- It creates a serialized representation of an array or object. The serialized values can be used in the URL query string when making an AJAX request.

Syntax: – $.param(object,trad)

The parameter “object” defines an array or object to serialize and the parameter “trad” is optional. It is a Boolean value specifying whether or not to use the traditional style of param serialization.

11) removeData():- This method removes a previously-stored piece of data.

Syntax: – $(selector).removeData(name)

The parameter “name” is optional and it is used to Specifies the name of data to remove.

If no name is specified, this method will remove all stored data from the selected elements.

12) size():- It returns the number of DOM elements matched by the jQuery selector.

Syntax: – $(selector).size()

13) toArray():- It retrieves all the DOM elements contained in the jQuery set, as an array.

Syntax: – $(selector).toArray()

In the above examples all the JQuery methods are inside a document.ready().

Syntax: – $(document).ready(function()

{
// jQuery methods works here
} );

Advantages of using document ready function:-

It helps to prevent any jQuery code from running before the document is finished loading (is ready).

If the functions are run before the document is fully loaded it leads to some failure condition. They are

  1. Trying to hide an element that doesn’t exist.
  2. Trying to get the size of an image that is not loaded.