Found 8591 Articles for Front End Technology

jQuery parent > child Selector

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

994 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

220 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

247 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

239 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

229 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

141 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

144 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

Setting up Background Color using CSS

AmitDiwan
Updated on 30-Dec-2019 12:49:36

214 Views

To set background color using CSS, use the background-color property.ExampleLet us now see an example − Live Demo .demo {    text-decoration: overline underline;    background-color: red; } Details Examination Center near ABC College. Exam begins at 9AM. OutputExampleLet us now see another example − Live Demo .demo {    text-decoration: overline underline; } Details Examination Center near ABC College. Exam begins at 9AM. Output

Relative Positioning in CSS

AmitDiwan
Updated on 30-Dec-2019 12:44:26

273 Views

With relative positioning, the element is positioned relative to its normal position. For this, use position: relativeExampleLet us now see an example − Live Demo div.demo {    position: relative;    color: white;    background-color: orange;    border: 2px dashed blue;    left: 50px; } Demo Heading This is demo text. This is demo text. position: relative; This is another demo text. Output

Static Positioning in CSS

AmitDiwan
Updated on 30-Dec-2019 12:19:26

165 Views

With static positioning, the elements are not affected by the top, bottom, left, and right properties. For this, use position: static.ExampleLet us now see an example − Live Demo div.static {    position: static;    color: white;    background-color: orange;    border: 2px dashed blue; } Demo Heading This is demo text. This is demo text. position: static; This is another demo text. Output

Advertisements