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

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

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

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 −

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

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 −

The appendTo() method in jQuery is used to insert HTML elements at the end of the selected elements.SyntaxThe syntax is as follows −$(content).appendTo(selector)Above, content is the content to be inserted.ExampleLet us now see an example to implement the jQuery appendTo() method −    $(document).ready(function(){       $("button").click(function(){          $("New").appendTo("h3");       });    }); Blog Posts How to install Java? How to install Ruby? Click me to check new and old post status OutputThis will produce the following output −Now, click on the button above −

The event.timeStamp property in jQuery is used to return the number of milliseconds since January 1, 1970, when the event is triggered.SyntaxThe syntax is as follows −event.timeStampExampleLet us now see an example to implement the jQuery event.timeStamp property −    .demo {       color: white;       background-color: black;    }    $(document).ready(function(){       $("button").click(function(event){          $("span").text(event.timeStamp);       });    }); Milliseconds January 1, 1970 Event occurred 0 milliseconds after January 1, 1970. Milliseconds OutputThis will produce the following output −Click on the button “Milliseconds” above −

The event.pageY property in jQuery is used to return the position of the mouse pointer, relative to the top edge of the document.SyntaxThe syntax is as follows −event.pageYExampleLet us now see an example to implement the jQuery event.pageY property −    $(document).ready(function(){       $(document).mousemove(function(event){          $("span").text("X: " + event.pageX + ", Y: " + event.pageY);       });    }); Mouse Pointer Position Mouse pointer position coordinates = Place mouse cursor anywhere on the document OutputThis will produce the following output. Before placing mouse cursor on the document −After placing mouse cursor anywhere on the document −

The event.pageX property in jQuery is used to return the position of the mouse pointer, relative to the left edge of the document.SyntaxThe syntax is as follows −event.pageXExampleLet us now see an example to implement the jQuery event.pageX property −    $(document).ready(function(){       $(document).mousemove(function(event){          $("span").text("X: " + event.pageX + ", Y: " + event.pageY);       });    }); Mouse Pointer Position Mouse pointer position coordinates = Place mouse cursor anywhere on the document OutputThis will produce the following output. Before placing mouse cursor on the document −After placing mouse cursor anywhere on the document −