Found 766 Articles for JQuery

jQuery one() with Examples

AmitDiwan
Updated on 30-Dec-2019 09:46:07

200 Views

The one() method in jQuery is used to add one or more event handlers to selected elements. Remember, the event handler function runs only once for each element.SyntaxThe syntax is as follows −$(selector).one(event, data, function)Above, the event parameter is used to specify one or more events to attach to the elements, whereas function is used to specify the function to run when the event occurs.ExampleLet us now see an example to implement the jQuery one() method − Live Demo    $(document).ready(function(){       $("h2").one("click", function(){          $(this).animate({fontSize: "+=10px"});       });   ... Read More

jQuery on() with Examples

AmitDiwan
Updated on 30-Dec-2019 09:43:07

158 Views

The on() method in jQuery is used to attach event handlers to elements.SyntaxThe syntax is as follows −$(selector).on(event, childSelector, data, function, map)Above, the event parameter specifies one or more events or namespaces to attach to the selected element(s), childSelector is used to specify that the event handler should be attached to the specified child elements. The function parameter is the function to run when the event triggers, whereas the map parameter is the event map.ExampleLet us now see an example to implement the jQuery on() method − Live Demo    $(document).ready(function(){       $("button").click(function(){       ... Read More

jQuery off() Method

Yaswanth Varma
Updated on 19-Jan-2024 16:00:44

352 Views

The majority of the time, programmers are worried about binding event handlers, or specifying a JavaScript function that will be called when an event takes place. Any user action on the website, including mouse clicks, hovers, scrolls, and pretty much anything else, can be considered an event. Event binding is made simple by using the jQuery. There may be instances where you decide that you no longer want your event handler function to be called for whatever reason. A situation where the user is not verified and you wish to stop him from executing further activities can arise, for instance. ... Read More

jQuery keydown() with Examples

AmitDiwan
Updated on 30-Dec-2019 09:34:51

612 Views

The keydown() method in jQuery is used to trigger the keydown event. It occurs when a keyboard key is pressed down (on its way down).SyntaxThe syntax is as follows −$(selector).keydown(function)ExampleLet us now see an example to implement the jQuery keydown() method − Live Demo    $(document).ready(function(){       $("input").keydown(function(){          $("input").css("color", "red");       });       $("input").keyup(function(){          $("input").css("color", "blue");       });    }); Registeration Enter username of the student: Username: OutputThis will produce the following output −Now, when a keyboard ... Read More

jQuery mouseover() with Examples

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

524 Views

The mouseover() method in jQuery is used to trigger the mouseover event. It occurs when the mouse pointer is over the selected element.SyntaxThe syntax is as follows −$(selector).mouseover(func)ExampleLet us now see an example to implement the jQuery mouseover() method − Live Demo    $(document).ready(function(){       $("h1").mouseover(function(){          $("h1").css("color", "green");       });       $("h1").mouseout(function(){          $("h1").css("color", "orange");       });    }); Demo Heading1 OutputThis will produce the following output −Now, when the mouse pointer is over the selected element −Now, when the mouse pointer leaves the selected element, the text color changes again −

jQuery mouseout() with Examples

AmitDiwan
Updated on 30-Dec-2019 09:23:47

264 Views

The mouseout() method in jQuery is used to trigger the mouseout event. It occurs when the mouse pointer leaves the selected element.SyntaxThe syntax is as follows −$(selector).mouseout(func)ExampleLet us now see an example to implement the jQuery mouseout() method − Live Demo    $(document).ready(function(){       $("h1").mouseover(function(){          $("h1").css("color", "green");       });       $("h1").mouseout(function(){          $("h1").css("color", "orange");       });    }); Demo Heading1 OutputThis will produce the following output −Now, when the mouse pointer is over the selected element −Now, when the mouse pointer leaves the selected element, the text color changes again −

jQuery height() with Examples

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

127 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

118 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

159 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

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

Advertisements