jQuery TUTORIAL for beginners


This tutorial by ReferenceDesigner.com is intended for beginners who understand HTML and basic webpage designs and who wish to learn jQuery. Although primarily intended for beginners, the material can also be used by experts and experienced programmers as reference material.

If you are a mathematical kind of person and want jump coding, skip this introduction and go directly to the next page . Otherwise go ahead and read on.

Pre Requisite


If you are not accustomed to HTML, we suggest that you take a quick beginnners HTML Tutorial . It does not take much time.

While knowledge of CSS may not be 100% essential, you may find difficulty in grasping some of the materials. So we strongly suggest that you have a basic understanding of CSS as well. You can take a look at beginners CSS tutorial here.

Finally you need to have basic understanding of javascript. If you are not familiar with Javascript, you may like to take a look at beginners Javascript tutorial.

jQuery Introduction


jQuery is a set of JavaScript library that makes JavaScript programming easier to use. Using jQuery, you can do more with less effort. In real life programming 90% tasks are "common task", so it is a waste of resource to keep reinventing the wheel. jQuery groups these commonly used tasks as a library in one file. But, you need to know which library function does what and how to invoke and use it. The more experience you have, the faster you can produce results. In this tutorial , we will make you familar and get started quickly on that.

jQuery also solves one more problem - the cross browser compatibility. In Javascript one code that runs in Mozilla may nor run in ie. If you include the time it takes to validate your code across, firefox, ie, safari and chrome, it is a huge waste of resource.

Practice programming as you learn


One of the key characteristics of this jquery tutorial is that, it will allow you to make changes in the code online, while you read. To understand what we mean, take a look at the two window panes below. The left side window pane has the jQuery code and the right side window pane shows the web page that will be rendered by the code. Now let us make some change in the code in the left window pane

Change the text that says - "Click Me" to something like "Hit me" and click on the button that says "Edit Text and Click Here". Now again check how the tthings change on the right hand side window pane. Do not worry about understanding the code for now. We will cover it in the next page onwards.