ADVANCED WEB PROGRAMMING

UNIT 2(2) - JQUERY

FOCUS AND BLUR EVENT
▪ The focus event is invoked when any element receives attention. It
attaches an event handler function to an element like HTML form
field.
▪ The function is executed when the user brings cursor and clicks on
the form field.
▪ The blur event is opposite to focus which is invoked when the user
leaves the focus on the current element and clicks on any other
element.
▪ The codes 7.8 gives the example of focus and blur events.

[email protected] 16.03.2025 2
16.03.2025 3
OUTPUT

[email protected] 16.03.2025 4
▪ When we click on "Name" input field, the background color of this field is
changed to “grey” as shown in figure 7.15 and when we leave this element and
click on next input field, the background color of the previous “Name” field
returns to "white".

[email protected] 16.03.2025 5
ON() METHOD

▪ The on() method attaches one or more event handlers for

the selected elements. Attach a click event to a <p>

element by using “on” method is demonestrated in the
code 7.9.

[email protected] 16.03.2025 6
[email protected] 16.03.2025 7
OUTPUT

[email protected] 16.03.2025 8
When a user clicks on first option, it will hide from the screen as shown in figure 7.17.

[email protected] 16.03.2025 9
ACTIVITY 4
▪ Create a paragraph and practice jQuery Events given in table 7.2.

[email protected] 16.03.2025 10
7.4. JQUERY EFFECTS
▪ jQuery library provides different techniques to add animations to make web

page appear both more attractive and interactive. There are wide ranges of
effects that can be applied to enable text and other elements to move in
different fashion. Table 7.3 shows a list of jQuery effects that can be used to
create animations.
jQuery Effects can be used to make web pages appear both more attractive and
interactive.

[email protected] 16.03.2025 11
[email protected] 16.03.2025 12
JQUERY HIDE() AND SHOW()
▪ With jQuery, we can hide and show HTML elements with the hide() and

show() methods as shown in code 7.10.

[email protected] 16.03.2025 13
[email protected] 16.03.2025 14
OUTPUT

[email protected] 16.03.2025 15
In the above output, we can observe that a paragraph is displayed in the output. When
we click on "Hide" button, the paragraph will disappear from the screen as shown in
figure 7.19.

[email protected] 16.03.2025 16
 7.4.2. JQUERY FADEIN AND FADEOUT METHODS
▪ fadeIn() method

▪ The fadeIn() method is used to change the opacity of the selected elements,

from hidden to visible. The code 7.11 demonstrates the fadeIn() method with
different parameters:

The speed of fadeIn() and fadeOut() can be controlled with an optional speed
parameters with exact time in milliseconds.

[email protected] 16.03.2025 17
[email protected] 16.03.2025 18
OUTPUT

[email protected] 16.03.2025 19
When we click on this "button", three different colored boxes will appear on the
screen in a sequence. First the "yellow" color box will appear, after which the
“blue” box will be shown and the “green” will be displayed in the last as shown
in the figure 7.21. The optional speed parameter specifies the duration of the
effect. It can take "slow", "fast", or milliseconds as values.

16.03.2025 20
FADEOUT() METHOD

▪ The fadeOut() method is used to change the opacity of selected elements, from

visible to hidden. The syntax of jQuery fadeOut() method is given below:

$(selector).fadeOut(speed,callback);

[email protected] 16.03.2025 21
7.4.3. JQUERY SLIDETOGGLE METHOD
▪ The toggle method switches from display to hide or vice versa for the selected
element. The functionality of “hide” and “show” will be invoked depending
upon the current state of the object. If it is already shown, it will be hidden and
vice versa.
▪ The slideToggle() method toggles between the slideDown () and slideUp (). If
the elements are slided down, slideToggle() will slide them up and vice versa.
The code 7.12 shows the example of slideToggle() method in jQuery.

The slideToggle() method toggles between the slideDown() and slideUp().

[email protected] 16.03.2025 22
[email protected] 16.03.2025 23
OUTPUT

[email protected] 16.03.2025 24
When the user clicks on "Click to slide up or down" button, panel will open as shown in figure 7.23. When you again
click on this button, panel will slide up as shown in figure 7.24.

[email protected] 16.03.2025 25
ACTIVITY 5
▪ Create a paragraph and practice jQuery Effects given in table 7.3.

[email protected] 16.03.2025 26
7.5. JQUERY GET / SET
▪ JQuery contains a lot of methods to manipulate and modify HTML
elements. It is also capable of manipulating DOM (Documents Object Model).
▪ JQuery Get/Set has a major role to play in this manipulation.

▪ 7.5.1. jQuery get method

▪ Get methods reads the text from an object in different forms like simple text,
HTML, or equivalent values from the text field. These methods are shown
below:
• text() - Sets or returns the text content of selected elements
• html() - Sets or returns the content of selected elements (including HTML
markup)
• val() - Sets or returns the value of form fields

[email protected] 16.03.2025 27
 Code 7.13
shows how to get content with
the jQuery text() and html()
methods:

[email protected] 16.03.2025 28
The output of code 7.13 is shown in
figure 7.26. When we click on "Show
Value" button, the value written in text
box will be displayed in the popup box
as shown in figure 7.28.

16.03.2025 29
16.03.2025 30
The output of code 7.14 is shown in figure 7.27. When we click on "Show Value"
button, the value written in text box will be displayed in the popup box as shown in
figure 7.28.

[email protected] 16.03.2025 31
7.5.2. JQUERY SET METHOD
▪ The jQuery set method is used to write some specific text in an input field. We
will use the same three methods from the previous to set content:

• text() - Sets or returns the text content of selected elements

• html() - Sets or returns the content of selected elements (including HTML
markup)
• val() - Sets or returns the value of form fields

[email protected] 16.03.2025 32
 The code 7.15 demonstrates how to set content
with the jQuery text(), html(), and val() methods:

[email protected] 16.03.2025 33
OUTPUT

[email protected] 16.03.2025 34
 When we click on "Set Text"
button, it will replace the text of
first paragraph from “This is a
paragraph” to “Hello I am new to
jQuery!” with the help of jQuery
text() method. Similarly, when the
user clicks on "Set Html" button, it
will replace the text of second
paragraph from “This is another
paragraph” to a bold form of
“Hello I am new to jQuery!”.
When the users click on “Set
Value” button, the text of input
field will change from “University
Name” to “AIOU” with the help of
val() method. The following output
will show you how to set content
with jQuery text(), html() and val()
method.
[email protected] 16.03.2025 35
ACTIVITY 6
▪ Demonstrate the use of GET and SET methods on the basic form input fields.

[email protected] 16.03.2025 36
7.6. JQUERY AJAX
▪ jQuery AJAX stands for Asynchronous JavaScript and XML. It is a technique
to create interactive web applications. Ajax uses client side scripting to control
the display of dynamic content without the need of a complete page refresh. It
periodically updates the contents of a web page based on the user action.
AJAX completes a quick round trip to the server and fetch the complete data
without displaying it on a web page until it is desired by the user. In this way, a
user doesn’t have to wait for a whole new page to be loaded. For example, an
online weather forecasting application has the weather information of all major
cities. When the user types a city name or its zip code, the AJAX code can load
the complete available weather data and display whatever is desired efficiently
without again sending the request to the server for the complete data. Code
7.16 demonstrates the use of jQuery AJAX method.

jQuery Ajax can help us to load data without full page refresh.

[email protected] 16.03.2025 37
[email protected] 16.03.2025 38
 The output of code 7.16 is
shown in figure 7.31. When
the user clicks on “Get
External Content” button,
data from the file “test.txt”
which is already fetched by
using AJAX code is loaded
on the web page without
reloading the request as
shown in figure 7.32.

[email protected] 16.03.2025 39
7.7. FORM VALIDATION

▪ Finally, a previous example code of form validation is being

represented here with the new application of jQuery.

▪ Note that the updated functionality is shown here in code 7.17.

[email protected] 16.03.2025 40
16.03.2025 41
16.03.2025 42
16.03.2025 43
16.03.2025 44
OUTPUT

[email protected] 16.03.2025 45
A form will be displayed for the user to enter the data in all given fields.
Once the user enters the data, it is being validated for blank data input as shown in
figures 7.34.

[email protected] 16.03.2025 46
ACTIVITY 7

• Explore the code of form validation by using jQuery. Understand the syntax
and semantic of jQuery statements.

• Modify the form validation code to verify the “Name:” field as non-numeric
input, “Address:” field as alphanumeric, “Email:” field with standard input
format including ”@” sign and “Zip Code:” as numeric data.

[email protected] 16.03.2025 47
UNIT SUMMARY
▪ In this unit, we learned about the basic concept of jQuery and its
different methods.
▪ We used different events and effects to make our web pages look
more attractive and interactive.
▪ We also learned how to validate a form using jQuery.

[email protected] 16.03.2025 48
SELF ASSESSMENT QUESTIONS
(CHOOSE THE CORRECT ANSWER)
1.There are _____ methods to use jQuery library.

a) one.
b) two.
c) three.
d) four.

[email protected] 16.03.2025 49
(CHOOSE THE CORRECT ANSWER)
2. __________ method is used to get attribute of an element.

a) getAttr()
b) getAttributes()
c) attr()
d) None of the above.

[email protected] 16.03.2025 50
(CHOOSE THE CORRECT ANSWER)
3. Which of the following method is used to apply a style on an element?

a) addClass(classes)
b) addStyle(classes)
c) addClassCSS(classes);
d) None of the above.

[email protected] 16.03.2025 51
(CHOOSE THE CORRECT ANSWER)
4. If names are same, ___________ variable take precedence over
other.

a) global variable
b) local variable
c) Both A and B.
d) None of the above.

[email protected] 16.03.2025 52
(CHOOSE THE CORRECT ANSWER)
5. In jQuery $(“div”) selector selects

a) first div element.

b) All div elements.
c) last div element.
d) None of the above.

[email protected] 16.03.2025 53
(CHOOSE THE CORRECT ANSWER)
6. ____________ is used to expand (if already collapsed) or
collapse (if already expanded) page elements.

a) hover()
b) trigger()
c) slide()
d) toggle()
[email protected] 16.03.2025 54
(CHOOSE THE CORRECT ANSWER)
7. _______________ method is used for the asynchronous HTTP
request?

a) ajax()
b) hover()
c) trigger()
d) find()

[email protected] 16.03.2025 55
(CHOOSE THE CORRECT ANSWER)
8. Which of the following method is used to hide the selected
elements?

a) display(none)
b) visible()
c) hidden()
d) hide()

[email protected] 16.03.2025 56
ANSWER KEY
▪ 1. B
▪ 2. C
▪ 3. A
▪ 4. B
▪ 5. B
▪ 6. D
▪ 7. A
▪ 8. D

[email protected] 16.03.2025 57
REVIEW QUESTIONS
WRITE SHORT ANSWERS TO THE FOLLOWING QUESTIONS
1. How can you install jQuery in your computer?
2. Differentiate between ID and Element selectors.
3. Briefly explain the concept of jQuery Events.
4. What is meant by jQuery Effect?
5. What is the difference between jQuery GET and SET methods?
6. What are the advantages of using jQuery Ajax?

[email protected] 16.03.2025 58
</> CODING EXERCISE
1. Createa paragraph that comprises of ordered and unordered lists. Create a button that changes the color of list
items to “Red” on pressing.
2. Create
a paragraph that comprises of few sentences. Create a button, when pressed, slowly hides all the
elements. Create another button that makes them reappear.
3. Attach two buttons with a paragraph. One button should turn the text into “bold” and the other should turn the
color into “blue”. Count the number of milliseconds between the two clicked events.
4. Display a message and give style by changing “width”, “height”, “text-color” and “background-color” by using
different click buttons.
5. Create a basic form input field that display a help sentence when the input field gets focused.
6. Create a text and apply fadeIn and fadeOut effects.
7. Create a paragraph and fade it to the given specified opacity.
8. Write jQuery code to toggle between fadeIn and fadeOut on different selected elements.
9. Modify the admission form created in coding exercise of unit 2 and apply validation techniques by using jQuery
to different form elements.

[email protected] 16.03.2025 59