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 toggle() method in jQuery is used to toggle between hide() and show() for the selected elements.SyntaxThe syntax is as follows −$(selector).toggle(speed, easing, callback)Above, the parameter speed is the speed of the hide/show effect. Here, easing is the speed of the element in different points of the animation, whereas callback is a function to be executed after toggle() completes.ExampleLet us now see an example to implement the jQuery toggle() method − Live Demo    $(document).ready(function(){       $("button").click(function(){          $("p").slideToggle();       });    }); Exam Info Examination begins on ... Read More

The change() method in jQuery is used to trigger the change event. It occurs when the value of an element has been changed.SyntaxThe syntax is as follows −$(selector).change()ExampleLet us now see an example to implement the jQuery change() method − Live Demo    $(document).ready(function() {       $(".demo").change(function() {          $(this).css("background-color", "red");       });    }); Login Enter Username: Enter Password: OutputThis will produce the following output −Write some text in the first input and press enter −

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

The parent > child selector in jQuery is used to select all elements that are a direct child of the specified element.SyntaxThe syntax is as follows −("parent > child")ExampleLet us now see an example to implement the jQuery parent > child selector − Live Demo    $(document).ready(function(){       $("div > span").css("color", "red");    }); div {    border:1px solid black;    padding:10px; } Demo Heading This is demo text. 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 siblings() method in jQuery is used to return all sibling elements of the selected element.SyntaxThe syntax is as follows −$(selector).siblings(filter)Above, the filter specifies a selector expression to narrow down the search for sibling elements.Let us now see an example to implement the jQuery siblings() method −Example 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 ... Read More