Working on Selectors in JQuery Tasks.
Description: Working on Selectors in JQuery Tasks. Best Dot Net Training.
Day: 1
1. working on Selectors in JQuery
How to show another div using the button on click?
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#button").click(function(){ $(".show").show(); }); }); </script> </head> <body> <input id="button" type="button" value="read more"> <div class="show" style="display:none">hi, I am here </div> </body> </html> |
The above example discussed only $(” #button”).hide() – hides the element with using id=”button”.
If you want to hide or show the class or elements for example:
- Class: $(“.someclassName”).hide() – hides all elements with class=”someclassName”.
- Elements: $(“p”).hide() – hides all <p> elements.
Note: for class(“.ClassName”), for elements(“ElementName”),for id(“#IdName”)
2. Working on events in JQuery
The given example you will learn how to jQuery events are working and also this is a simple example for testing in your Application JQuery reference is working or not.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#alert").click(function(){ alert("hi, In your Application JQuery is working !"); }); }); </script> </head> <body> <input id="alert" type="button" value="Submit"> </body> </html> |
Some of the Important Events on JQuery
- Click()
- Dblclick()
- On()
- Hover()
You will practice the above events for example
|
1 2 3 |
$("#alert").dblclick(function(){ alert("hi, In your Application JQuery is working !"); }); |
|
1 2 3 |
$("#alert").on(“click”,function(){ alert("hi, In your Application JQuery is working !"); }); |
|
1 2 3 |
$("#alert").hover(function(){ alert("hi, In your Application JQuery is working !"); }); |
Get Virtual Training on jQuery and Ajax
