<button onclick="setBackgroundColor('000AAA')">Set Color</button>
Well,try it and you will see the action.
Next,to achieve the similar functionality we will use a Jquery.
Look at the difference,Now let me ask you a question which one is neat? and which one you will prefer? Ofcourse, we all know that jquery is much simple, neat and easy to handle.
Well, how was this possible?
Why Jquery and not others?
There are other frameworks also available so why jquery, because it is very much popular and is growing daily with lot of new tasks being added to the library. One of the major factor is that it is being used by almost all the big companies.
What are the prerequisites?
This is an important question as, if you know things like
Then half of the battle is won.
How can i start?
Go and download the latest jquery from jquery.com and add it into the folder where you are developing your application.
There are two version of jquery available:
- Production Version- Download this version, if you are new to jquery.
- Development version
If you do not want to download, then also there is a way to include jquery in your project. There is a copy of jquery available on Google and Microsoft network, hosted on their CDN. You have to include this code in your page to include the library in your project.
The ‘$’ syntax
We have our library in place, we will start with declaring ‘$’. This is a shortcut for $(document).ready.
Why it is required?
With ‘$’ or $(document).ready , we made sure that no jQuery code is run before the document gets loaded.
To manipulate any element of the page, we would first have to select the element and for that, jquery has provided us with few selectors.
$(*)- selects all elements.
$(p)- selects all paragraph elements.
$(div)- selects all div elements.
I have provided only 3 examples, which can be used to start your learning. There are many varieties available and many others, you will learn through practice.
$(#ID)- selects the element having id mentioned after #.
$(#label1)- selects the label having ID as ‘label1’.
$(.classname)- selects all elements having css class name mentioned after ‘.’
$(.headercss)- selects all elements with css class name as headercss.
Now we know, how to select the elements, start some operation on them to gain more clarity.
Explanation: It will select button with id ‘btn’ and on click event of the button, function will be called which will hide all the div elements and show all the elements having css class as ‘labelcss’.
There is one click event mentioned in the above example.There are many other user actions which are ‘keypress’,’keyenter’,’focus’ etc. These events are attached to our elements and can be called by any user action. We have covered the basic here so in next article we will dive deep into Jquery.