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”.
READ Jquery Javascript
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.
READ New jQuery Interview Questions and Answers for beginners
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
- Trying
to hide an element that doesn’t exist.
- Trying
to get the size of an image that is not loaded.
No comments:
Post a Comment