
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Found 730 Articles for JQuery

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 −

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

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

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 −

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

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

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” −

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

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 −

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