- Trending Categories
- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- 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 766 Articles for JQuery
289 Views
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
282 Views
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
559 Views
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 −
195 Views
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
121 Views
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 −
161 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 −
149 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
227 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
877 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 −
131 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