Found 766 Articles for JQuery

jQuery blur() with Example

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

377 Views

The blur() method in jQuery is used to trigger the blur event, whereas the blur event occurs when an element loses focus.SyntaxThe syntax is as follows −$(selector).blur()ExampleLet us now see an example to implement the jQuery blur() method −    .demo {       color: blue;    }    $(document).ready(function(){       $("#btn").click(function(){          $("input").blur();          $("p").html("blur event triggered");       });    }); Student Details Student Name: Student Address: Trigger Event OutputThis will produce the following output −Click on the “Trigger Event” above −

jQuery click() with Example

AmitDiwan
Updated on 12-Nov-2019 12:35:12

174 Views

The click() method in jQuery is used to initiate the click event or attach a function to run when a click event occurs.SyntaxThe syntax is as follows −$(selector).click(function);ExampleLet us now see an example to implement the jQuery click() method −    $(document).ready(function(){       $(document).ready(function() {          $("p").click(function() {             alert('Paragraph clicked!')          });       });    }); Demo Heading This is a paragraph. OutputThis will produce the following output −Now, click on the paragraph and an alert box will generate −

jQuery focus() with Example

AmitDiwan
Updated on 12-Nov-2019 12:27:02

685 Views

The focus() method in jQuery is used to trigger the focus event. The focus event occurs when an element gets focus.SyntaxThe syntax is as follows −$(selector).focus()ExampleLet us now see an example to implement the jQuery focus() method −    .demo {       color: blue;    }    $(document).ready(function(){       $("#btn").click(function(){          $("input").focus();          $("p").html("focus event triggered");       });    }); Student Details Student Name: Trigger Event OutputThis will produce the following output −Above, click “Trigger Event” to trigger the focus event −

jQuery first() with Example

AmitDiwan
Updated on 12-Nov-2019 12:19:29

112 Views

The first() method in jQuery selects the first element from the specified elements.SyntaxThe syntax is as follows −$(selector).first()ExampleLet us now see an example to implement the jQuery first() method −    $(document).ready(function(){       $("p").first().css("color", "blue");    }); Demo Heading This is a line. This is another line. This is line 3. OutputThis will produce the following output −ExampleLet us see another example −    .one {       background-color: orange;       border: 2px dashed red;    }    $(document).ready(function(){   ... Read More

jQuery fadeToggle() Method

AmitDiwan
Updated on 12-Nov-2019 11:59:17

169 Views

The fadeToggle() method in jQuery is used to toggle between the fadeIn() and fadeOut() methods.SyntaxThe syntax is as follows −$(selector).fadeToggle(speed, easing, callback)Above, speed is the speed of the fading effect. The easing can be swing or linear for speed at different animation points. Callback is the function to be executed after the method gets finished.ExampleLet us now see an example to implement the jQuery fadeToggle() method −    $(document).ready(function(){       $(".btnout").click(function(){          $("div").fadeOut();       });       $(".btnin").click(function(){          $("div").fadeIn();       });   ... Read More

jQuery fadeTo() Method

AmitDiwan
Updated on 12-Nov-2019 11:56:44

147 Views

The fadeTo() method in jQuery is used to gradually change the opacity for selected elements to a specified opacity.SyntaxThe syntax is as follows −$(selector).fadeTo(speed, opacity, easing, callback)Above, speed is the speed of the fading effect, whereas opacity specifies the opacity to fade to. The easing can be swing or linear for speed at different animation points. Callback is the function to be executed after the method gets finished.ExampleLet us now see an example to implement the jQuery fadeTo() method −    $(document).ready(function(){       $(".btnout").click(function(){          $("div").fadeOut();       });   ... Read More

jQuery find() with Example

AmitDiwan
Updated on 12-Nov-2019 11:54:18

240 Views

The find() method in jQuery is used to return descendant elements of the selected element.SyntaxThe syntax is as follows −$(selector).find(filter)Above, filter is a selector expression to filter the search for descendants.ExampleLet us now see an example to implement the jQuery find() method −    .demo * {       display: block;       border: 2px solid blue;       padding: 5px;       margin: 15px;    }    $(document).ready(function(){       $("ol").find("span").css({"background-color": "orange", "color": "black","border": "3px dashed orange"});    }); body ol ol ol li span OutputThis will produce the following output −

jQuery fadeOut() with Example

AmitDiwan
Updated on 12-Nov-2019 11:48:20

137 Views

The fadeOut() method in jQuery is used to change the opacity, for selected elements, from visible to hidden.SyntaxThe syntax is as follows −$(selector).fadeOut(speed, easing, callback)Above, speed is the speed of the fading effect. The easing can be swing or linear for speed at different animation points. Callback is the function to be executed after the method gets finished.ExampleLet us now see an example to implement the jQuery fadeOut() method −    $(document).ready(function(){       $(".btnout").click(function(){          $("div").fadeOut();       });       $(".btnin").click(function(){          $("div").fadeIn();     ... Read More

jQuery dblclick() with Example

AmitDiwan
Updated on 12-Nov-2019 11:45:00

133 Views

The dblclick() method in jQuery is used to trigger the dblclick event, which occurs when an element is double-clicked.SyntaxThe syntax is as follows −$(selector).dblclick()ExampleLet us now see an example to implement the jQuery dblclick() method −    $(document).ready(function(){       $(document).ready(function() {          $("p").dblclick(function() {             alert('Paragraph double clicked!')          });       });    }); Demo Heading This is a paragraph. Double click here. OutputThis will produce the following output −Double click on the paragraph to generate an alert box −

jQuery attr() Method

AmitDiwan
Updated on 12-Nov-2019 11:36:10

213 Views

The attr() method in jQuery is used to set or return attributes and values of the selected elements.SyntaxThe syntax is as follows −$(selector).attr(attribute)ExampleLet us now see an example to implement the jQuery attr() method −    $(document).ready(function(){       $("button").click(function(){          alert("Input Type (Student Id) = " + $("input").attr("type"));       });    }); Student Details Student Id: Click me Click on the button above to return the type of the input. OutputThis will produce the following output −Click on the above button to display the type of the input text −

Advertisements