Found 730 Articles for JQuery

jQuery hasClass() with Examples

AmitDiwan
Updated on 30-Dec-2019 07:48:11

259 Views

The hasClass() method in jQuery is used to check if any of the selected elements is having a specified class name.SyntaxThe syntax is as follows −$(selector).hasClass(classname)Above, the parameter class name is the class name to search for in the selected elements.ExampleLet us now see an example to implement the jQuery hasClass() method− Live Demo    $(document).ready(function(){       $("button").click(function(){          alert($("h2").hasClass("demo"));       });    }); Student Info Teacher Info Click me OutputThis will produce the following output− Click the “Click me” button to display whether any element has class “demo”: 

jQuery has() with Examples

AmitDiwan
Updated on 30-Dec-2019 07:45:27

310 Views

The has() method in jQuery is used to return elements having one or more elements inside them, that matches the specified selector.SyntaxThe syntax is as follows−$(selector).has(ele)Above, the parameter ele is used to specify a selector expression or an element to match elements against.ExampleLet us now see an example to implement the jQuery has() method − Live Demo    $(document).ready(function(){       $("button").click(function(){          $("p").has("span").css("color", "orange");       });    }); h2 {    color: blue; } Student Info This is a demo text. Exam Info This is ... Read More

jQuery Traversing Siblings

AmitDiwan
Updated on 30-Dec-2019 07:36:19

180 Views

With jQuery, you can easily find siblings of an element using the following methods: next(), nextAll(), prev(), prevAll(), siblings(), etc. Let us see some of them traverse siblings−next() methodThe next() method is used to return the next sibling element of the selected element. Let us see an example−Example Live Demo div {    width:600px; } .demo * {    display: block;    border: 2px solid orange;    color: blue;    padding: 10px;    margin: 10px; }    $(document).ready(function(){       $("h3").next().css({"color": "gray", "border": "3px dashed blue"});    }); parent sibling ... Read More

jQuery Traversing Descendants

AmitDiwan
Updated on 30-Dec-2019 07:30:10

122 Views

To traverse and find descendants of an element, jQuery has the following methods: children() and find().children() methodThe childreb() method in jQuery is used to return the direct children of the selected element (only a single level of direct children). Let us see an example−Example Live Demo div {    width:600px; } .demo * {    display: block;    border: 2px solid orange;    color: blue;    padding: 10px;    margin: 10px; }    $(document).ready(function(){       $("div").children().css({"color": "gray", "border": "3px dashed blue"});    }); great-great-grandparent great-grandparent grandparent parent span ... Read More

jQuery mouseup() with Examples

AmitDiwan
Updated on 30-Dec-2019 07:19:20

383 Views

The mouseup() method in jQuery is used to trigger the mouseup event. The event occurs when the left mouse button is releases over the selected element.SyntaxThe syntax is as follows−$(selector).mousedown(func)Above, func is the function to run when mouseup event triggers.ExampleLet us now see an example to implement the jQuery mouseup() method − Live Demo    $(document).ready(function(){       $("h2").mouseup(function(){          $(this).after("Mouse up (mouse button is released).");       });       $("h2").mousedown(function(){          $(this).after("Mouse down (mouse button is pressed down).");       });    }); ... Read More

jQuery Traversing Filtering

AmitDiwan
Updated on 30-Dec-2019 07:08:44

226 Views

Filtering methods in jQuery include eq(), filter(), not(), etc. Let us see some of them here−not() methodThe not() method in jQuery is used to return elements that do not match specific criteria.ExampleLet us see an example to implement the jQuery not() method− Live Demo    $(document).ready(function(){       $("button").click(function(){          $("h2").not(".demo").css("color", "orange");       });    }); h2 { color: blue; } 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 ... Read More

Difference between Backbone.js and Jquery

Ayush Gupta
Updated on 27-Nov-2019 10:00:04

278 Views

Backbone is an MV* framework while jQuery is a DOM toolkit.With Backbone, you represent data as Models, which can be created, validated, destroyed, and saved to the server. Whenever a UI action causes an attribute of a model to change, the model triggers a "change" event; all the Views that display the model's state can be notified of the change so that they are able to respond accordingly, re-rendering themselves with the new information.While jQuery is a solid API for querying the DOM with support for event handling, deferred objects, and animations. It is best suited for things like querying ... Read More

jQuery addClass() with Example

AmitDiwan
Updated on 12-Nov-2019 12:48:53

542 Views

The addClass() method in jQuery is used to add one or more class names to the selected elements.ExampleLet us now see an example to implement the jQuery addClass() method −    .demo * {       display: block;       border: 3px dashed red;       padding: 3px;       margin: 25px;    }    .one {       border: 2px solid yellow;    }    $(document).ready(function(){       $("span.test").next().addClass("one");    }); Heading One This is our demo text in div. child grandchild grandchild grandchild ... Read More

jQuery finish() with Example

AmitDiwan
Updated on 12-Nov-2019 12:44:51

200 Views

The finish() method in jQuery is used to stop the currently-running animations. It removes all queued animations and completes all animations for the selected elements.SyntaxThe syntax is as follows −$(selector).finish(queue)Above, the queue parameter is the name of the queue to stop animation.ExampleLet us now see an example to implement the jQuery finish() method −    div {       background:orange;       height:200px;       width:200px;       padding: 5px;    }    $(document).ready(function(){       $("#begin").click(function(){          $("div").animate({height: 450}, 2000);       });   ... Read More

jQuery focusin() with Example

AmitDiwan
Updated on 12-Nov-2019 12:40:28

197 Views

The focusin() method in jQuery occurs when an element gets focus.SyntaxThe syntax is as follows −$(selector).focusin(function)ExampleLet us now see an example to implement the jQuery focusin() method −    .demo {       color: blue;    } $(document).ready(function(){    $("input").focusin(function(){       $("p").html("focusin event triggered");    });    $("input").focusout(function(){       $("p").html("focusout event triggered");    }); }); Student Details Student Name: OutputThis will produce the following output −Now, click inside to get focus −Click outside to lose focus −

Advertisements