12 Most Helpful jQuery Methods and Functions
Tags: javascript, jquery, tutorial
Published: 2023-02-02 10:48:11

<p class="paragraph"> In last tutorial, you learned&nbsp;some basics of <a href="https://jquery.com">jQuery </a>and its awesome features. </p><p class="paragraph"> So let’s go ahead, In this&nbsp;tutorial, I will demonstrate 12 Most Helpful&nbsp;jQuery Methods and Functions&nbsp;which really useful&nbsp;to learn advanced&nbsp;jQuery. </p><p class="paragraph"> Let’s begin: </p><h2>12 Most Helpful jQuery Methods and Functions</h2><h3>1.Each Function():</h3><p class="paragraph"> Uses: The&nbsp;<code>$.each()</code>&nbsp;Use as for loop, and&nbsp;<code>$(this)</code>&nbsp;refer the current object of the loop </p><p class="paragraph"> For Example: </p><pre><code class="code-block">//Show text value of each 'one' attribute one by one
$('li.one').each(function(){
   alert($(this).text());
});</code></pre><h3>2.Map Function():</h3><p class="paragraph"> Uses: The&nbsp;$.map()&nbsp;method applies a function to each item in an array. </p><p class="paragraph"> Example: </p><pre><code class="code-block">function sampleFunction(ele) {
    return ele * 2;
}
var item = [1,2,3,4];
var newitem2 = $.map(item, sampleFunction);
console.log(newitem2); // [2,4,6,8]</code></pre><h3>3.append Function():</h3><p class="paragraph"> Uses:&nbsp;Append&nbsp;inserts content at the end&nbsp;of the selected elements.Example: </p><pre><code class="code-block">//inserts content at the end of the selected elements
$('p.one').append('Hello!this is append...');</code></pre><h3>4.prepend Function():</h3><p class="paragraph"> Uses: Prepend inserts content at the beginning of the selected elements. </p><p class="paragraph"> Example: </p><pre><code class="code-block">//Prepend  inserts content at the beginning of the selected elements.
$('p.two').prepend('Hello!this is prepend...');</code></pre><p class="paragraph"> Read, <a href="https://www.tutscoder.com/post/how-to-check-uncheck-checkbox-with-jquery">How to check-uncheck all checkbox With jQuery</a> </p><h3>5.After Function():</h3><p class="paragraph"> Uses:&nbsp;After&nbsp;inserts content after the selected elements. </p><p class="paragraph"> Example: </p><pre><code class="code-block">//inserts content after the selected elements.
$('p.two').after('Hello!this is prepend...');</code></pre><h3>6.Before Function():</h3><p class="paragraph"> Uses: Before inserts content before the selected elements. </p><p class="paragraph"> Example: </p><pre><code class="code-block">//before inserts content before the selected elements.
$('p.one').before('Hello!this is append...');</code></pre><h3>7.Find Function():</h3><p class="paragraph"> Uses: Find Function is used to find any element from Html. </p><p class="paragraph"> Example: </p><pre><code class="code-block">//Find 'h1' attribute inside 'one class'
$('.one').find('h1').css('background','blue');</code></pre><h3>8.Load function():</h3><p class="paragraph"> Uses: Load Function is used to load any external content from another file. </p><p class="paragraph"> Example: </p><pre><code class="code-block">//it loads test.html file from external source
$('#content').load('test.html');</code></pre><h3>9.Channing method ():</h3><p class="paragraph"> Uses: Chaining allows us to run multiple jQuery methods (on the same element) within a single statement. </p><p class="paragraph"> Example: </p><pre><code class="code-block">&lt;!-- Use of chainning method Start--&gt;   
$('li').click(function(){
&lt;!-- Channing method used for perform diffrent effect by selecting one element once--&gt;
   $(this).fadeOut().fadeIn().slideUp().slideDown();
});
&lt;!-- Use of chainning Method Ends--&gt;   </code></pre><h3>&nbsp;10.Remove method() :</h3><p class="paragraph"> Uses: Remove method() is used to removes the selected elements and its child elements. </p><p class="paragraph"> Example: </p><pre><code class="code-block">$("#btnremove").click(function(){
   //it will removes elemnts which have box id and its child elements.
   $("#box").remove();
});
</code></pre><h3>11.Empty Method():</h3><p class="paragraph"> Uses:&nbsp; Empty() method is used to removes the child elements of the selected elements. </p><p class="paragraph"> Example: </p><pre><code class="code-block">$("#btnempty").click(function(){
   //it will removes the child elements of box id.
   $("#box").empty();
});</code></pre><h3>12.Css Method():</h3><p class="paragraph"> Uses:&nbsp;css()&nbsp;method are used for sets or returns css (style) property on selected elements. </p><pre><code class="code-block">//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"));</code></pre><p class="paragraph"> Also Read:&nbsp;<a href="https://www.tutscoder.com/8-most-useful-jquery-selectors/">8 most useful jquery selectors</a> </p><p class="paragraph"> <b>Conclusion:</b> </p><p class="paragraph"> So, This is some basic example of Jquery Methods. Thanks for reading. </p><p class="paragraph"> 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. </p><p class="paragraph"> Don’t forget to share this tutorial with your friends on&nbsp;<a href="https://www.facebook.com/TutsCoder">Facebook</a>&nbsp;and&nbsp;<a href="https://twitter.com/tutscoder">Twitter</a> </p>