DEV Community

TutsCoder
TutsCoder

Posted on • Originally published at tutscoder.com

2

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

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Heroku

This site is powered by Heroku

Heroku was created by developers, for developers. Get started today and find out why Heroku has been the platform of choice for brands like DEV for over a decade.

Sign Up

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay