The position() method in jQuery is used to return the position of the first matched element. It returns the top and left positions in pixels.SyntaxThe syntax is as follows −$(selector).position()ExampleLet us now see an example to implement the jQuery position() method − Live Demo    $(document).ready(function(){       $("button").click(function(){          alert("Top position: " + ($("h3").position()).top + " Left position: " + ($("h3").position()).left);       });    }); Heading One Heading Two Heading Three Position of h3 element OutputThis will produce the following output −Click the button to get left and top position of element −

The replaceWith() method in jQuery is used to replace selected elements with new content.SyntaxThe syntax is as follows −$(selector).replaceWith(content, function(index))Above, the content parameter is the content to insert, whereas function is to return the content to replace.ExampleLet us now see an example to implement the jQuery replaceWith() method − Live Demo    $(document).ready(function(){       $("button").click(function(){          $("h2").replaceWith("This is it!");       });    }); div {    margin: 10px;    width: 60%;    border: 2px dashed orange;    padding: 5px;    text-align:justify; } Demo Heading Demo ... Read More

The fadeout() method in jQuery is used to give a fading effect by changing the opacity for the selected elements. The fading effect changes from visible to hidden.SyntaxThe syntax is as follows −$(selector).fadeOut(speed, easing, callback)Above, the parameter speed is the speed of the fading effect. Here, easing is the speed of the element in different points of the animation, whereas callback is a function to be executed after fadeOut() completes.ExampleLet us now see an example to implement the jQuery fadeout() method − Live Demo    $(document).ready(function(){       $("button").click(function(){          $("h2").fadeOut();       ... Read More

The hide() method in jQuery is used to hide selected elements.SyntaxThe syntax is as follows −$(selector).hide(speed, easing, callback)Above, the parameter speed is the speed of the hide effect, whereas easing is the speed of the element in different points of the animation. The callback function is a function that executes after hide() method completes.ExampleLet us now see an example to implement the jQuery hide() method  − Live Demo    $(document).ready(function(){       $(".btnhide").click(function(){          $("p").hide();       });       $(".btnshow").click(function(){          $("p").show();       });   ... Read More

The delay() method in jQuery is used to set a delay to delay the execution of the next item in the queue.SyntaxThe syntax is as follows −$(selector).delay(speed, queue)Above, the parameter speed is the speed of delay, whereas the queue is the name of the queue.Let us now see an example to implement the jQuery delay() method −Example Live Demo    $(document).ready(function(){       $("button").click(function(){          $(".demo1").delay("slow").fadeIn();          $(".demo2").delay(500).fadeIn();       });    }); .demo1 {    margin:20px;    width:300px;    height:100px;    display:none;    background-color:red; } .demo2 { ... Read More

The eq() method in jQuery is used to select an element with a specific index number. The index number begins at 0.SyntaxThe syntax is as follows −$(":eq(index)")Above, the parameter index is the index of the element.ExampleLet us now see an example to implement the jQuery eq() method − Live Demo    $(document).ready(function(){       $("button").click(function(){          $("p:eq(2)").css("color", "orange");       });    }); Student Info This is a demo text. Exam Info This is a demo text. Teacher's Info This is a demo text. Click me OutputThis will produce ... Read More

The element selector in jQuery is used to select all elements with the specific element name.SyntaxThe syntax is as follows −$("ele")Above, ele is the element to select.ExampleLet us now see an example to implement the jQuery element selector − Live Demo    $(document).ready(function(){       $("button").click(function(){          $("h2").css("color", "orange");       });    }); Student Info This is a demo text. Exam Info This is a demo text. Teacher's Info This is a demo text. Click me OutputThis will produce the following output −Above, click the button “Click me” to update heading color −

The parent descendant selector in jQuery is used to select all elements that are descendants of a specified element.SyntaxThe syntax is as follows −("parent descendant")ExampleLet us now see an example to implement the jQuery parent descendent selector − Live Demo    $(document).ready(function(){       $("div span").css("color", "red");    }); div {    border:1px solid black;    padding:10px; } Demo Heading span outside p element This is demo text This is demo text This is demo text. span inside p element. This is demo text. OutputThis will produce the following output −

The queue() method in jQuery is used to display the queue of functions to be executed on the selected elements.SyntaxThe syntax is as follows −$(selector).queue(queue)Above, the parameter queue is the name of the queue.ExampleLet us now see an example to implement the jQuery queue() method − Live Demo    $(document).ready(function(){       $("button").click(function(){          var div = $("div");          div.animate({height: 250}, "slow");          div.animate({left: "+=200", top: "+=100" }, "slow");          $("span").text(div.queue().length);       });    }); div {    width:100px;    height:100px; ... Read More

The slideUp() method in jQuery is used to slide up the selected element i.e. to hide them.SyntaxThe syntax is as follows −$(selector).slideUp(speed, easing, callback)Above, the parameter speed is the speed of the slide effect. Here, easing is the speed of the element in different points of the animation, whereas callback is a function to be executed after slideUp() completes.ExampleLet us now see an example to implement the jQuery slideUp() method − Live Demo    $(document).ready(function(){       $(".button1").click(function(){          $("p").slideUp();       });       $(".button2").click(function(){          $("p").slideDown();   ... Read More