Found 10483 Articles for Web Development

jQuery event.timeStamp property with Example

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

300 Views

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 −

jQuery event.pageY property

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

114 Views

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 −

jQuery event.pageX property

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

157 Views

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 − 

jQuery event.delegateTarget Property

AmitDiwan
Updated on 11-Nov-2019 13:04:43

127 Views

The event.delegateTarget property in jQuery is used to return the element where the currently-called jQuery event handler was attached.SyntaxThe syntax is as follows −event.delegateTargetExampleLet us now see an example to implement the jQuery event.delegateTarget property −    $(document).ready(function(){       $("div").on("click", "button", function(event){          $(event.delegateTarget).css("color", "red");       });    }); Demo Heading Change color by clicking on below button. This is demo text. Click to change color OutputThis will produce the following output −Above, click on the button to change the text color −

jQuery nextAll() method

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

154 Views

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

jQuery next() method

AmitDiwan
Updated on 11-Nov-2019 12:50:49

237 Views

The next() selector in jQuery is used to return the next sibling element of the selected element.SyntaxThe syntax is as follows −$(selector).next(filter)Above, the parameter filter is a selector expression to narrow down the next sibling searchExampleLet us now see an example to implement the jQuery next() selector −    .demo * {       display: block;       border: 3px dashed red;       padding: 3px;       margin: 25px;    }    .one {       border: 2px solid yellow;    }    $(document).ready(function(){       $("span.test").next().addClass("one"); ... Read More

jQuery contents()

AmitDiwan
Updated on 11-Nov-2019 12:47:11

185 Views

The contents() method in jQuery is used to return all direct children, including text and comment nodes, of the selected element.SyntaxThe syntax is as follows −$(selector).contents()ExampleLet us now see an example to implement the jQuery contents() method −    $(document).ready(function(){       $("button").click(function(){          $("div").contents().filter("p").wrap("");       });    }); Products 90% of the products are sold. 10% of the products are still waiting to get dispatched. Text Nodes OutputThis will produce the following output −Now, click on the “Text Nodes” button −

jQuery children() method

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

215 Views

The children() method in jQuery is used to return all direct children of the selected element.ExampleLet us now see an example to implement the jQuery children() method −    .demo * {       display: block;       border: 2px solid blue;       padding: 10px;       margin: 25px;    }    .one {       border: 2px solid yellow;    }    $(document).ready(function(){       $("div").children().addClass("one");    }); Heading One This is our demo text in div. child grandchild grandchild child grandchild ... Read More

jQuery add() method with Example

AmitDiwan
Updated on 11-Nov-2019 12:41:47

103 Views

The add() method in jQuery is used to add elements to an existing group of elements.SyntaxThe syntax is as follows −$(selector).add(ele, context)Above, ele is the selector expression, whereas context specifiesfrom where the selector expression should begin matching.ExampleLet us now see an example to implement the jQuery add() method −    .one {       color: white;       background-color: blue;    }    $(document).ready(function(){       $("h2").add("p").addClass("one");    }); Products Out-of-stock products Let us now see some products. We had Accessories We also had Books, which are now ... Read More

jQuery before() Method

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

210 Views

The before() method in jQuery is used to insert specified content before the selected elements.ExampleLet us now see an example to implement the before() method in jQuery −    $(document).ready(function(){       $("#btndemo").click(function(){          $("img").before("Text inserted before!");       });    }); Insert specified content OutputThis will produce the following output −Click on “Insert specified content” −

Advertisements