jQuery Hello World program


We would like to get started something very quick, so you get an idea of what a jQuery running program in action looks like. Here is the program,which will display a header and three lines in html paragraph entity. At the end of the program, it has a buttton. If you click on that button, the three lines above it will vanish.

Just see how small the code turns out to be. 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script type="text/javascript" src="jquery-1.8.0.min.js"></script>
  5. <script type="text/javascript">
  6. $(document).ready(function(){
  7.   $("button").click(function(){
  8.     $("p").hide();
  9.   });
  10. });
  11. </script>
  12. </head>
  13.  
  14. <body>
  15. <h2>Reference Designer jQuery Tutorial</h2>
  16. <p>jQuery Hello World program.</p>
  17. <p>First Paragraph.</p>
  18. <p>Second Paragraph</p>
  19. <button>Click me and the above three paragraphs will vanish</button>
  20. </body>
  21. </html>




Try this example online


The code looks dry and devoid of any life. So we suggest that you see the code in action using our online jquery hello world program . [ It opens in a new window / tab, so you can come back once you have seen the action]. It has two window panes - a code pane on the left and a rendering pane on the right. The jQuery code is in the left window and the code as it would render in a webpage is on the right window.

Exercise


We strongly believe that unless you actively practice making changes in the code, you will not learn. Hence these exercises, which have been deliberately kept simple to make learning a fun.

1. Make changes in the code so that the button has some other text like just - "Hit Me"

2. In the above example change one of the paragraphs

<p>Second Paragraph</p>

to

Second Paragraph<br />

Notice that only two paragraphs ( lines vanish).

If you like this ReferenceDesigner.com jQuery tutorial, bookmark it using Control + D, so you can continue learning where you left. Also, in future search with ReferenceDesigner.com as one of the terms in search engine - for example, search with Reference Designer jquery tutorial in place of just jquery tutorial.

On the next page we will try to understand the nuts and bolts of this program.