Jquery Basics
With the title itself, anybody can deduce that we are indirectly talking about JavaScript only. So, we can say that JavaScript is the guardian of Jquery. These are client end technologies which are completely different from our server side technologies but now they have blended in.
Let's try an example in JavaScript first, we will try to set the background color of document in our page.
For that, we will declare a JavaScript function.
<script type="text/javascript">
function setBackgroundColor(color)
{
document.body.style.backgroundColor=color;
}
;
</script>
<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.
$(this).css('background-color', 'red');
Look at the difference. Now let me ask you a question which one is neat? And which one you will prefer? Of course, we all know that jquery is much simple, neat and easy to handle.
Well, How Was This Possible?
Jquery is a library, so like all libraries contain books which we read, in a similar way, Jquery contains a lot of common tasks which would have required a lot of JavaScript code to be written. These tasks can be called in a simple way through Jquery by just following some syntax which we will see later in this document.
Why Jquery and Not Others?
There are other frameworks also available so why jquery, because it is very popular and is growing daily with lot of new tasks being added to the library. One of the major factors 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 versions 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.
<html>
script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
</html>
The ‘$’ Syntax
We have our library in place, we will start with declaring ‘$’. This is a shortcut for $(document).ready.
Why It Is Required?
This requirement is somewhat related to JavaScript issues which were faced by developers. What really happened was that any JavaScript code written for a particular element of the page requires the element to be available on the page but if the element is not loaded or available on the page, JavaScript function will fail.
With ‘$’ or $(document).ready, we made sure that no jQuery code is run before the document gets loaded.
Selectors
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.
Element Selector
$(*) - 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 Selector
$(#ID) - Selects the element having id mentioned after #
For example:
$(#label1) - Selects the label having ID as ‘label1’.
Class Selector
$(.classname) - Selects all elements having CSS class name mentioned after ‘.’
For example:
$(.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.
$(document).ready(function(){
$("#btn").click(function(){
$("div").hide();
$(".labelcss").show();
});
});
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 basics here so in the next article, we will dive deep into Jquery.
CodeProject
Related Posts
- JavaScript rendered content is not crawlable
- Web-Page responses by PostBack, AutoPostBack, CrossPostBack, CallBack
