JQuery is a javascript library which works on the principle "write less, do more".
It simplifies a lot of work by using simple function calls.
The jQuery library have the following features:
Include the jquery fiel in the head section of html code so that we can use its function in our program.
Note : I have used bootstrap.min.css to beautify the look of our web page. If you don't wish to use it, you can ignore it.
Alright, now following is the code which when run will show the text "click here and it will be hidden", click the text and it will be hidden.
Here in the above code in the <script> tag we have written a javascript code which have the function call on some event. $("p").click function tells that when the text in paragraph is clicked call hide() function.
Try it this example yourself and you can continue reading and learning in the forthcoming example which i will be uploading regularly.
It simplifies a lot of work by using simple function calls.
The jQuery library have the following features:
- CSS manipulation
- HTML event methods
- Effects and animations
- HTML/DOM manipulation
- AJAX
- Utilities
- Download the jQuery library from jQuery.com
Include the jquery fiel in the head section of html code so that we can use its function in our program.
Note : I have used bootstrap.min.css to beautify the look of our web page. If you don't wish to use it, you can ignore it.
Alright, now following is the code which when run will show the text "click here and it will be hidden", click the text and it will be hidden.
<html> <head> <title>First jquery example</title> <!-- This line will load the bootstrap css file --> <link rel="stylesheet" type="text/css" href="bootstrap.min.css"> <!-- This file will load jquery file so that we can use its function --> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> </head> <body> <div class="panel panel-primary"> <h3 class="text-primary" align="center"> First jquery example</h3> <div class="panel panel-primary"> <p align="center">Click on the this text and it will be hidden</p> </div> </div> </body> <script type="text/javascript"> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); </script> </html>
Here in the above code in the <script> tag we have written a javascript code which have the function call on some event. $("p").click function tells that when the text in paragraph is clicked call hide() function.
Try it this example yourself and you can continue reading and learning in the forthcoming example which i will be uploading regularly.
0 comments:
Post a Comment