- 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)
181 Views
The event.data property in jQuery contains the optional data passed to an event method when the current executing handler is bound.SyntaxThe syntax is as follows −event.dataExampleLet us now see an example to implement the jQuery event.data property − $(document).ready(function(){ $("p").each(function(i){ $(this).on("click", {a:i}, function(event){ alert("Line " + event.data.a); }); }); }); Demo Heading This is the 1st paragraph. This is the 2nd paragraph. Click on any of the p element above OutputThis will produce the following output −Click on any of the p element −
![AmitDiwan](https://www.tutorialspoint.com/assets/profiles/123055/profile/60_187394-1565938756.jpg)
165 Views
The event.currentTarget property in jQuery is the current DOM element within the event bubbling phase.SyntaxThe syntax is as follows −event.currentTargetExampleLet us now see an example to implement the jQuery event.currentTarget property − $(document).ready(function(){ $("h1, p").click(function(event){ alert(event.currentTarget === this); }); }); World Countries list... Click on any of the above element and witness a magic. OutputThis will produce the following output −Click on any of the element above and an alert box generates −
![AmitDiwan](https://www.tutorialspoint.com/assets/profiles/123055/profile/60_187394-1565938756.jpg)
106 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
![AmitDiwan](https://www.tutorialspoint.com/assets/profiles/123055/profile/60_187394-1565938756.jpg)
176 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
![AmitDiwan](https://www.tutorialspoint.com/assets/profiles/123055/profile/60_187394-1565938756.jpg)
113 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 −
![AmitDiwan](https://www.tutorialspoint.com/assets/profiles/123055/profile/60_187394-1565938756.jpg)
135 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
![AmitDiwan](https://www.tutorialspoint.com/assets/profiles/123055/profile/60_187394-1565938756.jpg)
52 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
![AmitDiwan](https://www.tutorialspoint.com/assets/profiles/123055/profile/60_187394-1565938756.jpg)
124 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” −
![AmitDiwan](https://www.tutorialspoint.com/assets/profiles/123055/profile/60_187394-1565938756.jpg)
166 Views
The after() method in jQuery is used to insert specified content after the selected elements.ExampleLet us now see an example to implement the jQuery after() method − $(document).ready(function(){ $("#btndemo").click(function(){ $("img").after("Text inserted after!"); }); }); Insert specified content OutputThis will produce the following output −Click on the above button to display the text −
![AmitDiwan](https://www.tutorialspoint.com/assets/profiles/123055/profile/60_187394-1565938756.jpg)
58 Views
To add elements in jQuery, let us see two methods: jQuery after() methodThe after() method in jQuery is used to insert specified content after the selected elements.ExampleLet us now see an example to implement the jQuery after() method − $(document).ready(function(){ $("#btndemo").click(function(){ $("img").after("Text inserted after!"); }); }); Insert specified content OutputThis will produce the following output −Click on the above button to display the text −jQuery before() methodThe before() method in jQuery is used to insert specified content before the ... Read More