Introduction
The basic of jQuery is selecting HTML elements and performing actions on the selected element(s). To make it simpler, the basic syntax of jQuery is
$(selector).action();
Here the selector finds the matching element(s) and performs some kind of action on those elements.
The $(document).ready Function
It is always a good practice to wait for the document to load fully and hence be ready before working with it. You can check this using the ready event of the document element. So before starting your jQuery code, write the following lines of code and add all your jQuery code within this function.
$(document).ready(function(){ //add your jQuery code here });
This will prevent jQuery code from running before the document is ready. For example, what will happen if you try to hide an element that is not yet created? Of course, the particular action will fail. To avoid such issues, you better first check whether the document is ready and then write the jQuery code. Instead of $(document).ready, you can also write just $ as it is a shorter method. That is you can write either of the following:
$(document).ready(function(){ //add your jQuery code here }); OR $(function(){ //add your jQuery code here });
More About Selectors and Actions
In $(selector).action();
the $ sign is to define jQuery.
There are different types of selectors in jQuery. Some of them are id selector, class selector, tag selector etc. For example, if you write $("a").hide(), then all the hyperlinks will be hidden. If you write $("#btnClick").hide(), then the button with id="btnClick" will be hidden. If you write $(".fresh").hide(), then all the elements with class="fresh" will be hidden. We have to add # (hash) to select elements using id and . (dot) to select elements using their class name. In short, with the selector, we select the elements on which we need to perform the action. We will see how to use selectors in detail in the following chapter.
All the events that can occur on a webpage can be considered as an action. For example, clicking a button, resizing a window, moving the mouse, pressing a key etc are all examples of actions. For example, $("button").click(); will be invoked whenever a button is clicked. If there are three buttons, the above line of code will be executed if any of the buttons is clicked.
To define what should happen as a result of an action, we have to pass a function to the event. Then, inside the function, we need to write the lines of code. For example,
$("button").click(function(){ alert("You clicked me!!!" });
This line of code will alert the message "You clicked me!!!" whenever a button is clicked.
Code Analysis
Let us analyze the sample code we have written in the first jQuery chapter.
<html> <head> <title>Sample</title> <script src="jquery.js"></script> <script> $(document).ready(function() { $("#btnClick" ).click(function() { alert("You clicked me!!" ); }); }); </script> </head> <body> <button id="btnClick">Click Me!!</button> </body> </html>
The $(document).ready(function(){ }); checks whether the document is ready (fully loaded) to start working. The $("#btnClick" ).click(); add the selector and its corresponding action. #btnClick is the selector (selects the button using its id and hence # is added at the start) and click is the action. The section function(){alert("You clicked me!!" )}; defines what should happen when the specified button is clicked. Here, we want to display the message.
Easy Tip to Code
As you start writing the jQuery code, you might be finding it a bit difficult to proceed with lots of $ signs, parenthesis, curly braces, semicolons and so on. Let me share a secret tip to proceed. Try to write the code in the following order which will make the whole process of coding very simple and faster. I am writing the sample code (given before) in a specific order (only the jQuery section starting from $(document).ready) with comments at the end of each line so that you will be able to understand how you should proceed.
- $(document).ready( ); (I have checked whether the document is ready)
- $(document).ready(function(){ }); (passed a function along with parenthesis and opening and closing curly braces (to write what should happen) to the event)
- $("#btnClick").click(); (added the selector along with its event inside the ready event)
- $("#btnClick").click(function(){ }); (passed a function to the event)
- alert("You clicked me!!"); (Added the code inside the function to define what should happen on the click)
The bolded section is added newly. Hope this makes the process clear. Instead of putting all the brackets and curly braces together and making it difficult to check, write each selector and its corresponding action together. Add the function along with the parenthesis and curly braces later on. Finally add the code inside the function. This eliminates the confusion of having many parenthesis, curly braces and semicolons.
Summary
In this section, we have understood the basic jQuery syntax. We have also seen the simple technique to write jQuery code without lot of errors and confusion. As we proceed, you will start writing more complex code using this simple technique.