Found 8591 Articles for Front End Technology

jQuery height() with Examples

AmitDiwan
Updated on 30-Dec-2019 09:19:31

189 Views

The height() method in jQuery is used to set or return the height of the selected elements. It does not include padding, border, or margin.SyntaxThe syntax is as follows −$(selector).height() $(selector).height(val)Above, Val in the 2nd syntax is used to specify the height in px, em, pt, etc.ExampleLet us now see an example to implement the jQuery height() method− Live Demo    $(document).ready(function(){       $("button").click(function(){          document.getElementById("demo").innerHTML = "Height of DIV = " + $("div").height()       });    }); Rectangular Box Height of div OutputThis will produce the following output−Click “Height of div”−

jQuery outerWidth() Method

AmitDiwan
Updated on 30-Dec-2019 09:16:28

182 Views

The outerWidth() method in jQuery is used to return the width of an element. The method includes padding and border.OutputThe syntax is as follows−$(selector).outerWidth(margin)Above, the margin is a Boolean value to specify whether or not to include the margin. TRUE is to include the margin.ExampleLet us now see an example to implement the jQuery outerWidth() method− Live Demo    $(document).ready(function(){       $("button").click(function(){          document.getElementById("demo").innerHTML = "Outer Width of DIV = " + $("div").outerWidth()       });    }); Rectangular Box Outer width of div OutputThis ... Read More

jQuery outerHeight() Method

AmitDiwan
Updated on 30-Dec-2019 09:13:20

229 Views

The outerHeight() method in jQuery is used to return the height of an element. The method includes padding and border.SyntaxThe syntax is as follows−$(selector).outerHeight(margin)Above, the margin is a Boolean value to specify whether or not to include the margin. TRUE is to include the margin.ExampleLet us now see an example to implement the jQuery outerHeight() method− Live Demo    $(document).ready(function(){       $("button").click(function(){          document.getElementById("demo").innerHTML = "Outer Height of DIV = " + $("div").outerHeight()       });    }); Rectangular Box Outer height of div OutputThis ... Read More

jQuery Misc param() Method

AmitDiwan
Updated on 30-Dec-2019 08:17:43

156 Views

The param() method in jQuery is used to create a serialized representation of an array or object.SyntaxThe syntax is as follows −$.param(obj, val)Above, obj is the object to serialize, whereas Val specifies whether or not to use the traditional style of param serialization.ExampleLet us now see an example to implement the jQuery param() method− Live Demo    $(document).ready(function(){       ob = new Object();       ob.stdid = "S01";       ob.roll = 3;       $("button").click(function(){          $("p").text($.param(ob));       });    }); Student Details Serialized Representation OutputThis will produce the following output−Click on the button to get serialized representation−

jQuery last() with Examples

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

205 Views

The last() method in jQuery is used to return the last element of the selected elements.SyntaxThe syntax is as follows −$(selector).last()ExampleLet us now see an example to implement the jQuery last() method − Live Demo    $(document).ready(function(){       $("div p").last().css("color", "orange");    }); Demo Heading This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. OutputThis ... Read More

jQuery hasClass() with Examples

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

270 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

316 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

184 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

124 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

387 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

Advertisements