What is jQuery? jQuery is a small JavaScript library that can create interesting web page effects with just a few lines of simple codes. The jQuery codes are very clean and simple.

What jQuery can do? Most web designers mainly use jQuery to create wonderful web page effects and interesting animation.

jQuery Getting Started

This tutorial help newbies in getting started with jQuery. It shows how easy to use jQuery codes to select web page elements and work on them.

Watch jQuery Getting Started tutorial on YouTube:

In brief, the process of jQuery codes can be illustrated in the diagrams below.

Basic Syntax of jQuery

Basic Example of jQuery

Isn’t jQuery very simple and easy to learn?

jQuery Beginner Tutorials (Part 1)

This jQuery beginning tutorial shows how to declare variable. It also shows how to write simple jQuery codes to get the dimension of an image on a web page. Finally, this jQuery beginner tutorial shows how to hide elements on web page.

Watch jQuery Beginner Tutorials (Part 1) video tutorial on YouTube:

jQuery Example

The example used in this jQuery tutorial is shown in the diagram below:

jQuery Declare Variable

This jQuery tutorial shows how to declare jQuery variable and use it anywhere of the codes in times of need. The advantage of declaring a jQuery variable is that the name is easy to understand.

Example:
The following codes assign the <p> paragraph element with “slogan” id to a variable with the name selectedElement.

// Declare a variable
var selectedElement = $("#slogan");

Once the variable was assigned, it can be used freely anywhere on the codes.

Example:
Select the <p> paragraph element with “slogan” id and then enclose it with solid red color border lines with 4 pixels width.

// Declare a variable
var selectedElement = $("#slogan");
selectedElement.css ( { "border": "4px solid #f00" } );

When executing the above jQuery codes, the paragraph will be enclosed with 4 pixels solid red color border lines as shown in the following diagram:

Tip:
The above jQuery codes can also be written without declaring the variable:

$("#slogan").css ( { "border": "4px solid #f00" } );

jQuery Display Text of Selected Paragraph

Let’s continue with the above codes and explore more about jQuery.

Example:
The following jQuery codes will display the text of selected paragraph in an alert message box:



// Declare a variable
var selectedElement = $("#slogan");
selectedElement.css ( { "border": "4px solid #f00" } );

// Display the text of selected paragraph
alert("The selected element is: "+ selectedElement.text());

When executing the above jQuery codes, the text will be displayed in an alert box as shown in the following diagram:

jQuery Beginner Tutorials (Part 2)

This is the second part of jQuery Beginner Tutorial. This part of tutorial shows how to get the dimension of an image on a web page and how to hide elements on a web page.

jQuery Get Dimension of Image

Sometimes we need to get the dimension (e.g. height and width) of elements on a web page. This jQuery example shows how to select the boat image, enclosed it with border line, and then display the height of the boat on an alert message box.

Example:
The following 1st line of code assign the boat image element to a variable with the name selectedElement. The 2nd line enclose the boat image with 4 pixels solid red border. The 3rd line of code display the height of the boat on an alert message box.

// Declare a variable
var selectedElement = $("#boat");
selectedElement.css ( { "border": "4px solid #f00" } );
alert("The height of selected element is: "+ selectedElement.height());

Result:
When executing the above jQuery codes, the result is shown in the following diagram:

Tip:
The width of boat can be got with the jQuery width():

alert("The width of selected element is: "+ selectedElement.width());

jQuery Hide Element

This jQuery tutorial shows how easy to hide elements on a web page with jQuery codes.

Example:
The following jQuery codes will hide the cloud image.

// Hide an element
$("#cloud").hide();

Result:
When executing the above jQuery codes, the cloud is hidden and the expose the sun image as shown in the following diagram:

This is the end of jQuery learn beginner tutorial.