Front End Technology Articles - Page 477 of 860

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 − 

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 −

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

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

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 −

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