In this session today we will study the implementation of jquery.
- To implement jquery follow the steps and examples given below :
- First of all go to www.jquery.com and click on the download button as shown in the image :
- After you click on the download button, next window will appear.
- Now click on the Download the compressed production of jQuery and you will get the following window :
- Create a new folder then inside that folder right click choose the new text document give the name jquery.js and copy and paste the jquery code into it.
- Now name the file say jquery.js inside that paste your jquery code. Also right click on jquery.js file and open it in notepad++.and paste the downloaded code in the notepad++.
- After performing these steps your notepad++ window will look like as shown below:-
- Now create an index.html file. Open in an notepad++ and write the code given below.
<html> </html> <title>Jquery </title> <head> <style> .red{ color:red;} </style> <script type="text/javascript" src="jquery.js"></script> </head> <body> <h1>This is an heading and this is first program in jquery</h1> <script> $('h1').addClass('red'); </script> </body> </html> - So after writing the code you will have the following look of your notepad++ window :
- Here in this example the jquery code is in tag inside the tag. If we put that code in head section this will change the output because we will be using that before “h1” section .(So in output it will not display the red color.)
- So write the following code :
<html> </html> <title>Jquery </title> <head> <style> .red{ color:red;} </style> <script type="text/javascript" src="jquery.js"></script> <script> $('h1').addClass('red'); </script> </head> <body> <h1>This is an heading and this is first program in jquery</h1> </body> </html> - Thus you will have the following output :
- Here in this example the jquery is not called because it cannot find its class as we declared it in the head section .
- So to make the heading reflect in red color write the following code :
<html> </html> <title>Jquery </title> <head> <style> .red{ color:red;} </style> <script type="text/javascript" src="jquery.js"></script> <script> $(document).ready( function(){ $('h1').addClass('red'); }); </script> </head> <body> <h1>This is an heading and this is first program in jquery</h1> </body> </html> - So after writing the code you will have the follwoing look out of your window :
- So you will have the following output :
- You can visit the api.jquery.com which contain all these events and effect.
- To make some changes on button click implementing jquery write the following code in notepad++:
<!Doctype html> <html> <head> <title>JQuery</title> <style> .red{color:red;} </style> <script type="text/javascript" src="jquery.js"></script> <script> $(document).ready(function(){ $('button').click(function(){ $('h1').html('Changed Text').slideToggle(200); }); }); </script> </head> <body> <button>Change Text</button> <h1>This is the text to change</h1> </body> </html> - So after writing the code your notepad++ window will look like as shown below :
- So you will have the following output when you run your index.html file in browser :
- Thus we have learned basic implementations of jQuery.
