jQuery become the most popular and famous JavaScript framework because of its robustness and simplicity. I was used to JavaScript but jQuery take over as it saves lot of time to develop interactive front-end interface.

Best Media jQuery Plugins

jQuery has detailed documentation that’s cover’s all fundamentals of jQuery. I have gone through documentation many times and some useful jQuery method that we might have missed. Some of them are very common but some of them are not so. So, just check out the list and revise you knowledge. Enjoy!

1.attr() / .prop()

The .attr() method provide a convenient way to set the value of attributes while .prop() method provides a way to explicitly retrieve property values.

The .prop() method is a convenient way to set the value of properties—especially when setting multiple properties, using values returned by a function, or setting values on multiple elements at once. It should be used when setting selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, or defaultSelected.

Example:
$( "input" ).prop( "disabled", false );
$( "input" ).prop( "checked", true );

The .attr() method is a convenient way to set the value of attributes—especially when setting multiple attributes or using values returned by a function. Consider the following image example:

<img id="photo" src="myphoto.jpg" alt="my photo" >

To change the alt attribute, simply pass the name of the attribute and its new value to the .attr() method:

$( "#photo" ).attr( "alt", "Nice Picture" );

You can add other attribute like title:

$( "#photo" ).attr( "title", "Nice Picture By Tom" );

You can also add several attributes at once:

$( "#photo" ).attr({
alt: "Nice Picture",
title: "Nice Picture By Tom"
});

Source:jQuery Documentation – .attr()

2.data()

jQuery.com – The .data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks.

We can set several distinct values for a single element and retrieve them later:

$( "body" ).data( "foo", 52 );
$( "body" ).data( "bar", { myType: "test", count: 40 } );
$( "body" ).data( { baz: [ 1, 2, 3 ] } );
$( "body" ).data( "foo" ); // 52
$( "body" ).data(); // { foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }

With the introduction of HTML5, we can use it as attribute as well. For example

The following jQuery code will work.

$( "div" ).data( "role" ) === "page";
$( "div" ).data( "lastValue" ) === 43;
$( "div" ).data( "hidden" ) === true;
$( "div" ).data( "options" ).name === "Tom";

The following will work as the above example too:

$("div").data("role", "page");
$("div").data("hidden", "true");
$("div").data("role", {name: "Tom"});

Source:jQuery Documentation – .data()

3 .wrap() / .wrapAll() / .wrapInner()

These three functions can be used to wrap elements in other elements. Here I’ll explain how to use these functions.

First, we’ll discuss .wrap() method that wraps each item in the collection with the assigned element.

For example considering the following HTML:

<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>

Using .wrap(), we can insert an HTML structure around the inner <div> elements like so:

$( ".inner" ).wrap( "<div class='new'></div>" );

The new <div> element is created and added to the DOM. The result is a new <div> wrapped around each matched element:

<div class="container">
<div class="new">
<div class="inner">Hello</div>
</div>
<div class="new">
<div class="inner">Goodbye</div>
</div>
</div>

The .wrapAll() will insert or wrap one element around all the elements in the collection; it means that the elements in the collection will be moved to a new spot in the DOM; they’ll line up at the place of the first element in the collection and be wrapped there:

Using .wrapAll(), we can insert an HTML structure around the inner <div> elements like so:

$( ".inner" ).wrapAll( "<div class='new' />");

The new <div> element is created and added to the DOM. The result is a new <div> wrapped around all matched elements:

<div class="container">
<div class="new">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
</div>

Finally, the .wrapInner() method wraps everything inside each element in the collecting with the given element:

Using .wrapInner(), we can insert an HTML structure around the content of each inner <div> elements like so:

$( ".inner" ).wrapInner( "<div class='new' />");

The new <div> element is created and added to the DOM. The result is a new <div> wrapped around the content of each matched element:

<div class="container">
<div class="inner">
<div class="new">Hello</div>
</div>
<div class="inner">
<div class="new">Goodbye</div>
</div>
</div>

Source:jQuery Documentation – .wrap()

4.siblings()

The method .siblings() will return a collection of the siblings of the whatever items are in your original collections.

Consider the following HTML:

<div> . . . </div>
<p>. . . </p>
<span> . . .</span>

Now we’ll find its siblings:

$('p').siblings(); // returns <div>, <span>

Source:jQuery Documentation – .siblings()

5.before() / .after()

Sometimes we need to insert element into the DOM and looks for functions to fulfill requirement. The .before() and .after() functions are very useful and might be what you need. These allows you to add elements into the DOM just before or after an element, so the newly added element will be sibling of previous element.

For example consider the following HTML:
<div class="container">
<h2>Greetings</h2>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>

You can insert element before several elements at once

$( ".inner" ).before( "<p>Test</p>" );

The each new element will be added before inner <div>:

<div class="container">
<h2>Greetings</h2>
<p>Test</p>
<div class="inner">Hello</div>
<p>Test</p>
<div class="inner">Goodbye</div>
</div>

The .after() function creates and insert element after several element:

$( ".inner" ).after( ""<p>Test</p>" );

The each new element will be added after inner <div>:

<div class="container">
<h2>Greetings</h2>
<div class="inner">Hello</div>
<p>Test</p>
<div class="inner">Goodbye</div>
<p>Test</p>
</div>

Source:jQuery Documentation – .before()

6. .data() / .removeData()

If you want to attach data of any type to DOM element, then .data() method is the best solution. You can easily attach element to DOM using .data() method. It takes two parameter a key and value or just one an object.

$('#wrap').data('key', 'value');
$('#container').data({ key2 : 'value2', year : 2014 });

you can also get back you attached data element by calling method with the key of value like below:

$('#container').data('key2'); //returns 'value2'
$('#container').data('year'); //returns 2014

If you want to get the data related an element, just call .data() method without any parameter, you will get an object with all keys and values attached to that item.

If you need to delete a key/value pair after you’ve added it to an element, just call removeData():

$('#container').removeData('key2');

Source:jQuery Documentation – .data()

7.eq()

Using .eq() method, you can set an element by passing the index of an DOM element.

For example consider the following HTML:

<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>

The below code will set red background for item 3.

$( "li" ).eq( 2 ).css( "background-color", "red" );

Source:jQuery Documentation – .eq()

 

8. .parent() / .children()

These two methods are very helful to play with DOM elements. The .parent() method allows us to search through the parents of these elements in the DOM tree.

For example consider the following HTML:

<ul class="level-1">
<li class="item-i">I
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
</ul>

If we start at item A, we can find its parents:

$( "li.item-a" ).parent().css( "background-color", "red" );

The above code will set background color for level list level-2 which is parent of li.item-a element.

while the method .children() method allows us to search through the children of these elements in the DOM tree.

For example consider the following HTML:

<ul class="level-1">
<li class="item-i">I
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
</ul>

If we start at the level-2 list, we can find its children:

$( "ul.level-2" ).children().css( "background-color", "red" );

The above code will set background color for items A, B, and C

9.siblings()

The .siblings() method is very helpful that return a collection of the siblings of the whatever items are in your original collections.

For example consider the following HTML:

<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>

Here If we start at the third item, we can find its siblings:

$( "li.third-item" ).siblings().css( "background-color", "red" );

The result of this method call is a red background behind items 1, 2, 4, and 5

10.serialize() / .serializeArray()

The .serialize() method can be used for encoding the values in a form into a string. The .serialize() method creates a text string in standard URL-encoded notation.

Consider the following form HTML:

<form>
<input type="text" name="name" value="Tom" />
<input type="text" name="url" value="http://www.example.com" />
</form>

Now we will encode form values using serialize method:

console.log($('form').serialize());​​​ // logs : name=Tom&url=http%3A%2F%2Fwww.example.com

You can also use serializeArray() to convert the form values into an array of objects instead of a string:

console.log($('form').serializeArray());​​​
// logs : [{ name : 'name', value : 'Tom'} , { name : 'url', value : 'http://www.example.com' } ]

 

 

email