12 Most Helpful jQuery Methods and Functions

In last tutorial, you learned some basics of jQuery and its awesome features.

So let’s go ahead, In this tutorial, I will demonstrate 12 Most Helpful jQuery Methods and Functions which really useful to learn advanced jQuery.

Let’s begin:

12 Most Helpful jQuery Methods and Functions

1.Each Function():

Uses: The $.each() Use as for loop, and $(this) refer the current object of the loop

For Example:

//Show text value of each 'one' attribute one by one
$('li.one').each(function(){
   alert($(this).text());
});

2.Map Function():

Uses: The $.map() method applies a function to each item in an array.

Example:

function sampleFunction(ele) {
    return ele * 2;
}
var item = [1,2,3,4];
var newitem2 = $.map(item, sampleFunction);
console.log(newitem2); // [2,4,6,8]

3.append Function():

Uses: Append inserts content at the end of the selected elements.Example:

//inserts content at the end of the selected elements
$('p.one').append('Hello!this is append...');

4.prepend Function():

Uses: Prepend inserts content at the beginning of the selected elements.

Example:

//Prepend  inserts content at the beginning of the selected elements.
$('p.two').prepend('Hello!this is prepend...');

Read, How to check-uncheck all checkbox With jQuery

5.After Function():

Uses: After inserts content after the selected elements.

Example:

//inserts content after the selected elements.
$('p.two').after('Hello!this is prepend...');

6.Before Function():

Uses: Before inserts content before the selected elements.

Example:

//before inserts content before the selected elements.
$('p.one').before('Hello!this is append...');

7.Find Function():

Uses: Find Function is used to find any element from Html.

Example:

//Find 'h1' attribute inside 'one class'
$('.one').find('h1').css('background','blue');

8.Load function():

Uses: Load Function is used to load any external content from another file.

Example:

//it loads test.html file from external source
$('#content').load('test.html');

9.Channing method ():

Uses: Chaining allows us to run multiple jQuery methods (on the same element) within a single statement.

Example:

<!-- Use of chainning method Start-->   
$('li').click(function(){
<!-- Channing method used for perform diffrent effect by selecting one element once-->
   $(this).fadeOut().fadeIn().slideUp().slideDown();
});
<!-- Use of chainning Method Ends-->   

 10.Remove method() :

Uses: Remove method() is used to removes the selected elements and its child elements.

Example:

$("#btnremove").click(function(){
   //it will removes elemnts which have box id and its child elements.
   $("#box").remove();
});

11.Empty Method():

Uses:  Empty() method is used to removes the child elements of the selected elements.

Example:

$("#btnempty").click(function(){
   //it will removes the child elements of box id.
   $("#box").empty();
});

12.Css Method():

Uses: css() method are used for sets or returns css (style) property on selected elements.

//Set CSS Property
 $("#para").css("background-color", "cyan");
//Set Multiple CSS Property
$(".para").css({"background-color": "green", "color":"blue",  "font-size": "150%"});
//Return CSS Property
alert("Background color = " + $("#para").css("background-color"));

Also Read: 8 most useful jquery selectors

Conclusion:

So, This is some basic example of Jquery Methods. Thanks for reading.

Do let me know If you face any difficulties please feel free to comment below we love to help you.if you have any feedback suggestion then please inform us by commenting.

Don’t forget to share this tutorial with your friends on Facebook and Twitter