Introduction to Jquery IF Statement

JQuery is a type of javascript library features, that usually used for performing extensive operations as a boosted for a javascript’s regular functionality. It doesn’t have it’s own if or any other conditional looping statements, hence it makes use of javascript statements. The conditional loops that can be worked in a jQuery script are ‘if’ statement, ‘if..else’ statement, and ‘if..else if’ statement. Each of these statements can operate based on their traditional principles, along with the commonly used relational operators like <, >, =, <=, >=, !=, etc., and the logical operators like AND (&&), OR(||) and NOT(!).

Syntax of Jquery IF Statement

Following is a syntax:

1. If Statement

The if statement allows you to put some decisions. It evaluates the condition inside the parenthesis ().

Syntax of If Statement is

if (condition)
statement;

If condition is true, the statement will be executed and If condition is false, the statement will not be executed. We can use different relational operators in the If Statement.

Relational Operators:

<= Less than or equal to
< Less than
> Greater than
>= Greater than or equal to
== Equal
!= Not equal

Multiple relational expressions may be grouped together with logical operators.

Logical Operators:

Logical OR ( || ) : (condition1) || (condition2) returns True if condition1 or condition2 is true
Logical AND (&&): (condition1) && (condition2) returns True if condition1 and condition2 are true
Logical NOT (!):!(condition) Returns false if condition is true or returns true if condition is false.

Multiple statements after the if may be grouped by putting them inside curly braces ({}).

2. If …else Statement

The if statement may have an optional else block.

The syntax for if… else statement is

if (condition)
statement;
else
statement;

If condition is true, the first statement is executed and If condition is false, the second statement is executed.

3. If …else if Statement

It evaluates the content only if condition is true from several expressions.

The syntax for if… else if statement

if(condition1){
//content to be evaluated if condition1 is true
}
else if(condition2){
//content to be evaluated if condition2 is true
}
else if(condition3){
//content to be evaluated if condition3 is true
}
else{
//content to be evaluated if no condition is true
}

There can be any number of if-else…if statement in the if-else…if block. In if-else, if statement only the statements which satisfy the condition inside that block are executed and the rest of the blocks are ignored. If none of the conditions are met then the statements in else block get executed.

Examples of jQuery IF Statement

Here are the examples of Jquery IF Statement mention below

1. If statement

Example for if statement:

In this example, we have included a prompt screen to enter the marks.

Output:

In the prompt screen, we can enter the marks.
After entering the marks it will check if In the if condition we are checking the condition (marks > = 35).

The marks provided in the above prompt screen are greater than 35, the first condition becomes true. So it displayed the output as “You passed the exam”.

The marks provided in the below prompt screen are less than 35, the second condition becomes true.

It will display the output as “Fail”.

If the marks provided in the prompt screen is a negative value then the third condition becomes true.

It will display the output as “Please provide the number greater than zero”.

The marks provided in the prompt screen are greater than 100 then the fourth condition becomes true.

It will display the output as “Please provide the number less than or equal to 100”.

2. If …else statement

Example for if…else statement:

In this example, we have included a prompt screen to enter the number.

Output:

In the prompt screen, we have to provide a number.
After entering the number it will check the if condition. In the if condition we are checking the condition (number %2 == 0).

The number provided in the above prompt screen is divisible by 2 and provide the remainder as zero, the if condition becomes true. It will display the output as “The given number is even number”.

The number provided in the below prompt screen is not divisible by 2 and provide the remainder as non-zero, then it enters the else block and executes the statements in the else block.

It will display the output as “The given number is an odd number”.

3. If …else if statement

Example for if…else if statement:

In this example, we can observe that we have included a prompt and alert message.

Output:

In the prompt screen, we can enter the marks.
After entering the marks it will check the if condition. In the if condition it will check the condition (marks >=70 && marks <=100).
The marks provided in the below prompt screen are greater than 70, the condition becomes true.

It will display the alert message as “First class with Distinction”.

Again execute the program enter the marks it will check the if condition. In the if condition it will check the condition (marks >=70 && marks <=100).
The marks provided in the below prompt screen is 65 if condition becomes false, it enters the else if the block it will check the else if condition (marks >=60 && marks <=69).
As marks provided in the prompt lie between 60 and 69, the condition becomes true.

It will display the alert message as “First class”.

The marks provided in the below prompt screen is 55, if condition and first else if condition becomes false, so it enters the next else if the block it will check the else if condition (marks >=50 && marks <=59).
As marks provided in the prompt lie between 50 and 59, the condition becomes true.

It will display the alert message as “second class”.

The same process is repeated and when the condition becomes true it displays the particular alert message.
As marks provided in the prompt lie between 40 and 49 the third else if condition becomes true.