Download to read offline
Jquery part-II
- 1.
- 2. <html> <head> <title>jquery</title> <script src="jquery.js"> </script> <script> $(document).ready(function(){ $("p").hide(); $("h1").click(function(){ $(this).next().slideToggle(300); }); }); </script> </head> <body> <h1> Heading1</h1> <p>This is Details of Heading One!!</p> <h1> Heading 2</h1> <p>This is Details of Heading Two</p> <h1> Heading 3</h1> <p>This is Details of Heading Three</p> </body> </html>
- 3.
- 4. <html> <head> <title>jquery</title> <script src="jquery.js"> </script> <script> $(document).ready(function(){ $("h1").click(function(){ $(this).css("background-color","red"); }); }); </script> </head> <body> <h1> Heading1</h1> <h1> Heading 2</h1> <h1> Heading 3</h1> </body> </html>
- 5.
- 6. <html> <head> <title>jquery</title> <style type="text/css"> h2{background-color: orange;} </style> <scriptsrc="jquery.js"> </script> <script> $(document).ready(function(){ $("h1").click(function(){ $("h2").slideUp(1000); }); }); </script> </head> <body> <h1> Click Me</h1> <h2> Heading 2</h2> <h3> Heading 3</h3> </body> </html>
- 7.
- 8. <html> <head> <title>jquery</title> <style type="text/css"> h2{background-color: orange;} </style> <scriptsrc="jquery.js"> </script> <script> $(document).ready(function(){ $(“h2”).hide(); $("h1").click(function(){ $("h2").slideDown(1000); }); }); </script> </head> <body> <h1> Click Me</h1> <h2> Heading 2</h2> <h3> Heading 3</h3> </body> </html>
- 9.
- 10. <html> <head> <title>jquery</title> <style type="text/css"> h2{background-color: orange;} </style> <scriptsrc="jquery.js"> </script> <script> $(document).ready(function(){ $("h2").hide(); $("h1").click(function(){ $("h2").slideToggle(1000); }); }); </script> </head> <body> <h1> Click Me</h1> <h2> Heading 2</h2> <h3> Heading 3</h3> </body> </html>
- 11.
- 12. <html> <head> <title>jquery</title> <style type="text/css"> h2{background-color: orange;} </style> <scriptsrc="jquery.js"> </script> <script> $(document).ready(function(){ //$("h2").hide(); $("h1").click(function(){ $("h2").fadeOut(1000); }); }); </script> </head> <body> <h1> Click Me</h1> <h2> Heading 2</h2> <h3> Heading 3</h3> </body> </html>
- 13.