Jquery for Beginners

Every web developer not all 100% but i think 99% of developer must use the javascript in there project, for input validation , showing and hiding of the controls, slowly showing and slowly hiding etc .They have used the javascript in there project and they have write same code again and again in different projects or even in different form/pages. I personally love to use javascript in my web application where it is necessary and i love javascript coding. During my search on the javascript on net i have found many javascript libraries which can be use to achieve functionalists which i have mention above. The libraries include prototype, mootoo , jquery etc. All of these libraries are really good. But i have use the jquery and try to get more out of jquery library.
Let us start how we can start with jquery. First of all you have to get latest version of the jquery file from the jquery web site.

for user i have pasted the image of the location from where you can download the jquery file. as you can see there are two files which has same, the difference is in there size one is for production and one is for Development, you can download one of this or both. You can download the production file from jquery-1.2.6.min.js 54.5 KB. Next you have to include the jquery file into your page like this

<script src="scripts/jquery.js" type="text/javascript"></script>

And this is the simple starting point for you reader who are just new to the jquery. you have to put this code in the script tag of type 'text/javascript'.

$(document).ready( function()

{
alert('Hello world');
});

The above code is simple one and it contain just hello world message which is shown when the page is fully loaded. But this code contain the basic things you need to start with, first of all the dollar ($) sign, which is call the selector, if you want to select any control in the you page then you can use this dollar sign to get that control suppose you have the control whose id is "cmdButton" then what you need is to get that button but using $('#cmdButton') statement, One more important thing which i would like to share with you is that the syntax above to get the control is used when you don't have master page in you project, or your page didn't open in master page but if your page is open in your master page then what you need to do is to get the control is $('#'+'<%=cmdButton.ClientID%>') this syntax is used to get the control in jquery.

From the code above you have seen the number sign (#) The number sign is used to select the control/element by there id. You can select element by there css className, with there ElementTag and even with the element properties etc for complete referece how you can access the elements you can click here . For quick reference some of the how to access the elements.

• To access element with there id , where myDiv is the id of the div control in the page.

  $("#myDiv").css("border","3pxsolid red");

• To access element with there tag name . This example will apply red border of red color to all the divs in the page regardless of the id and the class name.

  $("div").css("border","3px solid red");

• To access element with there css className . The example below will access the control whose css class name is myClass and apply the red border of 3px to every control which has myClass css class name.

  $(".myClass").css("border","3px solid red");
  

Now come to the $(document).ready(function(){}); event handler .This is the first thing to learn about jQuery: If you want an event to work on your page, you should call it inside the $(document).ready(function())}. Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded (Source). The question which may come into your mind is why we need the $(document).ready(function(){}); The first thing that most Javascript programmers end up doing is adding some code to their program, similar to this:

 window.onload = function(){ alert("welcome"); }

Inside of which is the code that you want to run right when the page is loaded. Problematically, however, the Javascript code isn't run until all images are finished downloading (this includes banner ads). The reason for using window.onload in the first place is due to the fact that the HTML 'document' isn't finished loading yet, when you first try to run your code. To circumvent both problems, jQuery has a simple statement that checks the document and waits until it's ready to be manipulated, known as the ready event (Source)

why we need to use jquery, as you can see the syntax of the jquery is very easy to learn and easy to read.Second think which i like about jquery is that if you call one jquery function then that function will return same object, which is chainability , mean you can apply as many function by place the (.) dot sign and call the next function and so on and on.

Hope you like this. if you have any question then ask me.

back to content