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

The ready() method in jQuery occurs when DOM has been loaded.SyntaxThe syntax is as follows −$(document).ready(func)Above, func specifies the function to run after the document is loaded.ExampleLet us now see an example to implement the jQuery ready() method − Live Demo div {    width:600px; } .demo * {    display: block;    background-color;    border: 2px solid yellow;    color: blue;    padding: 10px;    margin: 10px; }    $(document).ready(function(){       $("li.test").siblings().css({"background-color": "orange", "color": "white", "border": "3px dashed blue"});    }); Demo Heading ul (parent) previous sibling previous sibling ... Read More

The element ~ siblings selector in jQuery is used to select all elements that are siblings of the specified "element".SyntaxThe syntax is as follows −("ele ~ siblings")Above, the parameter ele is any valid selector, whereas siblings are the siblings of the ele parameter.ExampleLet us now see an example to implement the jQuery element ~ siblings selector − Live Demo    $(document).ready(function(){       $("div ~ p").css("color", "orange");    }); div {    border:1px solid black;    padding:10px; } Demo Heading This is demo text. span outside p element This is demo text. ... Read More

The not() method in jQuery is used to return elements that do not match specific criteria.SyntaxThe syntax is as follows −$(selector).not(criteria, func(index))Above, criteria are a selector expression, whereas func is the function to run for each element in the group.ExampleLet us now see an example to implement the jQuery not() method − Live Demo    $(document).ready(function(){       $("button").click(function(){          $("h2").not(".demo").css("color", "orange");       });    }); h2 {    color: blue; } Student Info This is a demo text. Exam Info This is a demo text. Teacher's ... Read More

The parentsUntil() method in jQuery is used to return all ancestor elements between the selector and stop parameter value.SyntaxThe syntax is as follows −$(selector).parentsUntil(stop, filter)Above, the stop parameter is a selector expression, element or jQuery object. The filter parameter is a selector expression that narrows down the search for ancestors between the selector and the stops parameter.ExampleLet us now see an example to implement the jQuery parentsUntil() method − Live Demo div {    width:600px; } .demo * {    display: block;    border: 2px solid yellow;    color: blue;    padding: 10px;    margin: 10px; } ... Read More

The prop() method in jQuery is used to set or return the properties and values of the selected elements.SyntaxThe syntax is as follows −$(selector).prop(property)ExampleLet us now see an example to implement the jQuery prop() method − Live Demo    $(document).ready(function(){       $("button").click(function(){          var $val = $("div");          $val.prop("font-size", "1.6em");          $val.append("Property value = " + $val.prop("font-size"));       });    }); Adding Property Property OutputThis will produce the following output −Click the button to add a property −

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