Found 730 Articles for JQuery

jQuery parent descendant Selector

AmitDiwan
Updated on 31-Dec-2019 06:52:50

206 Views

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 −

jQuery queue() with Examples

AmitDiwan
Updated on 31-Dec-2019 06:49:55

211 Views

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

jQuery slideUp() with Examples

AmitDiwan
Updated on 31-Dec-2019 06:46:20

286 Views

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

jQuery parent > child Selector

AmitDiwan
Updated on 31-Dec-2019 06:42:36

988 Views

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 −

jQuery siblings() with Examples

AmitDiwan
Updated on 31-Dec-2019 06:38:51

215 Views

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

jQuery stop() with Examples

AmitDiwan
Updated on 31-Dec-2019 06:35:24

244 Views

The stop() method in jQuery is used to stop an animation before it ends.SyntaxThe syntax is as follows −$(selector).stop(stopAll, goToEnd);Above, stopAll clears all animation, whereas gotoEnd is used to specify whether to complete the current animation immediately or not.ExampleLet us now see an example to implement the jQuery stop() method − Live Demo    $(document).ready(function(){       $(".button1").click(function(){          var div = $("div");          div.animate({height: 250}, "slow");          div.animate({left: "+=200", top: "+=100" }, "slow");          div.queue(function(){             div.dequeue();     ... Read More

jQuery detach() with Examples

AmitDiwan
Updated on 31-Dec-2019 06:30:33

229 Views

The detach() method in jQuery is used to remove selected elements.SyntaxThe syntax is as follows −$(selector).detach()ExampleLet us now see an example to implement the jQuery detach() method − Live Demo    $(document).ready(function(){       $("button").click(function(){          $("span").detach();       });    }); span {    background-color: red;    color: white; } Demo Heading This is a demo text. Remove element OutputThis will produce the following output −Click “Remove element” −

jQuery dequeue() with Examples

AmitDiwan
Updated on 31-Dec-2019 06:28:09

222 Views

The dequeue() method in jQuery is used to remove the next function from the queue and then execute the function.SyntaxThe syntax is as follows −$(selector).dequeue(queue)Above, the queue is the name of the queue.ExampleLet us now see an example to implement the jQuery dequeue() method − Live Demo    $(document).ready(function(){       $("button").click(function(){          var div = $("div");          div.animate({height: 250}, "slow");          div.animate({left: "+=200", top: "+=100" }, "slow");          div.queue(function(){             div.dequeue();          });       ... Read More

jQuery remove() with Examples

AmitDiwan
Updated on 31-Dec-2019 06:25:21

134 Views

The remove() method in jQuery is used to remove the selected elements.SyntaxThe syntax is as follows −$(selector).remove(selector)Above, the parameter selector is used to specify one or more elements to be removed.ExampleLet us now see an example to implement the jQuery remove() method − Live Demo    $(document).ready(function(){       $("button").click(function(){          $("span").remove();       });    }); span {    background-color: red;    color: white; } Demo Heading This is a demo text. Remove element OutputThis will produce the following output −Now, click the “Remove element” to remove the span element in red. After clicking the “Remove element” button −

jQuery clearQueue() with Examples

AmitDiwan
Updated on 31-Dec-2019 06:21:53

139 Views

The clearQueue() method in jQuery is used to remove all items from the queue.SyntaxThe syntax is as follows −$(selector).clearQueue(queue)Above, the queue is the name of the queue.ExampleLet us now see an example to implement the jQuery clearQueue() method − Live Demo    $(document).ready(function(){       $(".button1").click(function(){          var div = $("div");          div.animate({height: 250}, "slow");          div.animate({left: "+=200", top: "+=100" }, "slow");          $("span").text(div.queue().length);       });       $(".button2").click(function(){          $("div").clearQueue();       });    }); ... Read More

Advertisements