jQuery Web Page Design Tutorials

jQuery Learn Beginner Tutorial (Part 1)

Part 2 of jQuery Learn Beginner Tutorial

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.

jQuery Video Tutorial

jQuery Example

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

jQuery declare variable

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:

jQuery declare variable

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 select text of paragraph