Learning the basics of jQuery

0
1331

In this session today we will study the implementation of jquery.

  • To implement jquery follow the steps and examples given below :

  1. First of all go to www.jquery.com and click on the download button as shown in the image :
  2. v1

  3. After you click on the download button, next window will appear.
  4. v2

  5. Now click on the Download the compressed production of jQuery and you will get the following window :
  6. v3

  7. 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.
  8. 1

  9. 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++.
  10. 2

  11. After performing these steps your notepad++ window will look like as shown below:-
  12. v12

  13. Now create an index.html file. Open in an notepad++ and write the code given below.

  14. So after writing the code you will have the following look of your notepad++ window :
  15. v4

  16. 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.)
  17. So write the following code :

  18. Thus you will have the following output :
  19. v6

  20. Here in this example the jquery is not called because it cannot find its class as we declared it in the head section .
  21. So to make the heading reflect in red color write the following code :

  22. So after writing the code you will have the follwoing look out of your window :
  23. v7

  24. So you will have the following output :
  25. v8

  26. You can visit the api.jquery.com which contain all these events and effect.
  27. To make some changes on button click implementing jquery write the following code in notepad++:

  28. So after writing the code your notepad++ window will look like as shown below :
  29. v9

  30. So you will have the following output when you run your index.html file in browser :
  31. v11

  32. Thus we have learned basic implementations of jQuery.

LEAVE A REPLY

Please enter your comment!
Please enter your name here