- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Found 766 Articles for JQuery
![AmitDiwan](https://www.tutorialspoint.com/assets/profiles/123055/profile/60_187394-1565938756.jpg)
422 Views
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 −
![AmitDiwan](https://www.tutorialspoint.com/assets/profiles/123055/profile/60_187394-1565938756.jpg)
145 Views
The event.which property in jQuery is used to return which keyboard key or mouse button was pressed for the event.SyntaxThe syntax is as follows −event.whichExampleLet us now see an example to implement the jQuery event.which property − $(document).ready(function(){ $("input").keydown(function(event){ $("div").html("Which key pressed? = " + event.which); }); }); Student Details Student Name: Student Address: Note: The key pressed in the any of the above input would be visible below. OutputThis will produce the following output −Let us now enter a value and press a key in the input −
![AmitDiwan](https://www.tutorialspoint.com/assets/profiles/123055/profile/60_187394-1565938756.jpg)
61 Views
The event.type property in jQuery is used to return which event type was triggered.SyntaxThe syntax is as follows −event.typeExampleLet us now see an example to implement the jQuery event.type property − .demo { color: blue; background-color: orange; } .test { color: white; background-color: black; } $(document).ready(function(){ $("p").on("click dblclick mouseover", function(event){ $("div").html(event.type+" event"); }); }); Heading Two Click here and let's see whether it ... Read More
![AmitDiwan](https://www.tutorialspoint.com/assets/profiles/123055/profile/60_187394-1565938756.jpg)
247 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 −
![AmitDiwan](https://www.tutorialspoint.com/assets/profiles/123055/profile/60_187394-1565938756.jpg)
69 Views
The event.result property in jQuery has the last/previous value returned by an event handler triggered by the specified event.SyntaxThe syntax is as follows −event.resultExampleLet us now see an example to implement the jQuery event.result property − .demo { color: orange; background-color: black; } $(document).ready(function(){ $("button").click(function(){ return "New text generated!"; }); $("button").click(function(event){ $("p").html(event.result); }); }); Heading Two Click me This is a demo line. OutputThis will produce the following output. This is before clicking the button −Click the button above −
![AmitDiwan](https://www.tutorialspoint.com/assets/profiles/123055/profile/60_187394-1565938756.jpg)
115 Views
The event.relatedTarget property in jQuery is used to return which element being entered or exited on mouse movement.SyntaxThe syntax is as follows −event.relatedTargetExampleLet us now see an example to implement the jQuery event.relatedTarget property − .demo { border:2px solid yellow; } $(document).ready(function(){ $("div, p").mouseenter(function(event){ $("#demo").html("Related target = " + event.relatedTarget.nodeName); }); }); Demo Heading This is a demo text. This is a demo line. OutputThis will produce the following output −Now, place the mouse cursor inside the div (box) −
![AmitDiwan](https://www.tutorialspoint.com/assets/profiles/123055/profile/60_187394-1565938756.jpg)
90 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 −
![AmitDiwan](https://www.tutorialspoint.com/assets/profiles/123055/profile/60_187394-1565938756.jpg)
126 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 −
![AmitDiwan](https://www.tutorialspoint.com/assets/profiles/123055/profile/60_187394-1565938756.jpg)
117 Views
The event.namespace property in jQuery is used to return the custom namespace when the event was triggered.SyntaxThe syntax is as follows −event.namespaceExampleLet us now see an example to implement the jQuery event.namespace property − $(document).ready(function(){ $("p").on("custom.demoNamespace", function(event){ alert(event.namespace); }); $("p").click(function(event){ $(this).trigger("custom.demoNamespace"); }); $("button").click(function(){ $("p").off("custom.demoNamespace"); }); }); Demo Heading This is demo paragraph. This is demo paragraph. Remove namespace Click on any ... Read More
![AmitDiwan](https://www.tutorialspoint.com/assets/profiles/123055/profile/60_187394-1565938756.jpg)
97 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 −