Full Stack Development

(IT432)

Anju Mishra
Department of Information Technology

1
Module II- Introduction to jQuery

Topic Name- Introduction to jQuery and its implementation

Subtopic Name: Definitions, Value & Scope of jQuery Selector , Events

Learning Objectives: To understand the concept of jQuery Selector, Events

Learning Outcomes: Students will be able to recognizer various jQuery Selector, Events

2
Outline
 jQuery Selectors
 Element Selector
 #id Selector
 Class Selector
 Examples of jQuery Selectors
 jQuery Event Methods
 jQuery Effects
Q & A

3
jQuery Selectors
 jQuery selectors allow you to select and manipulate
HTML element(s).
 jQuery selectors are used to "find" (or select)
HTML elements based on their name, id, classes,
types, attributes, values of attributes and much
more.
 It's based on the existing CSS Selectors, and in
addition, it has some own custom selectors.
 All selectors in jQuery start with the dollar sign and
parentheses: $().
4
Element Selector:
 The jQuery element selector selects elements Example
based on the element name. 1. $(document).ready(function(){
 You can select all <p> elements on a page like 2. $("button").click(function(){
this:
3. $("p").hide();
$("p")
4. });
 Example :When a user clicks on a button, all
<p> elements will be hidden:
5. });

5
#id Selector:
 The jQuery #id selector uses the id attribute of Example
an HTML tag to find the specific element. 1. $(document).ready(function(){
 An id should be unique within a page, so you 2. $("button").click(function(){
should use the #id selector when you want to
find a single, unique element. 3. $(“#test").hide();
 To find an element with a specific id, write a 4. });
hash character, followed by the id of the HTML
element:
$("#test")
5. });

 Example: When a user clicks on a button, the

element with id="test" will be hidden:
6
Class Selector:
 The jQuery .class selector finds elements with a Example
specific class.. 1. $(document).ready(function(){
 To find elements with a specific class, write a 2. $("button").click(function(){
period character, followed by the name of the
class:. 3. $(“.test").hide();
$(".test")
4. });
 Example: When a user clicks on a button, the
elements with class="test" will be hidden::
5. });

7
Examples of jQuery Selectors
Syntax Description
$("*") Selects all elements
$(this) Selects the current HTML element
$("p.intro") Selects all <p> elements with class="intro"
$("p:first") Selects the first <p> element
$("ul li:first") Selects the first <li> element of the first <ul>
$("ul li:first-child") Selects the first <li> element of every <ul>
$("[href]") Selects all elements with an href attribute
$("a[target='_blank']") Selects all <a> elements with a target attribute value equal to "_blank"
$("a[target!='_blank']") Selects all <a> elements with a target attribute value NOT equal to "_blank"
$(":button") Selects all <button> elements and <input> elements of type="button"
$("tr:even") Selects all even <tr> elements
$("tr:odd") Selects all odd <tr> elements
8
 jQuery Event Methods
 Events : All the different visitors' actions that a web page can
respond to are called events.

 An event represents the precise moment when something

happens. Examples:
 moving a mouse over an element
 selecting a radio button
 clicking on an element

 The term "fires/fired" is often used with events. Example:

"The keypress event is fired, the moment you press a key".

9
Common DOM events
Mouse Events Keyboard Events Form Events Document/Window
Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload

10
Event Methods 1. $(document).ready(function(){
 $(document).ready() 2. $("button").click(function(){
• The $(document).ready() method allows us to 3. $(“.test").hide();
execute a function when the document is fully 4. });
loaded. 5. });

 click(), dblclick()
• The function is executed when the user clicks on 1. $("p").click(function(){
the HTML element. 2. $(this).hide();
• The following example says: When a click event 3. });
fires on a <p> element; hide the current <p>
element:

11
Event Methods
 mouseenter() 1. $("#p1").mouseenter(function(){
• The mouseenter() method attaches an event
handler function to an HTML element. 2. alert("You entered p1!");
• The function is executed when the mouse
pointer enters the HTML element:: 3. });

 mouseleave()
1. $("#p1").mouseleave(function(){
• he mouseleave() method attaches an event
handler function to an HTML element.
2. alert("Bye! Leave p1!");
• The function is executed when the mouse
pointer leaves the HTML element: 3. });
12
Event Methods
 mousedown () 1. $("#p1").mousedown(function(){
• The mousedown() method attaches an event handler 2. alert("Mouse down over p1!");
function to an HTML element. 3. });
• The function is executed, when the left, middle or
right mouse button is pressed down, while the mouse
is over the HTML element:

 mouseup ()
1. $("#p1").mouseup(function(){
• The mouseup() method attaches an event handler
alert("Mouse up over p1!");
function to an HTML element.
});
• The function is executed, when the left, middle or
right mouse button is released, while the mouse is
over the HTML element::
13
Event Methods 1. $("#p1").hover(function(){
2. alert("You entered p1!");
 hover () 3. },
• The hover() method takes two functions and is a 4. function(){
combination of the mouseenter() and mouseleave() 5. alert("Bye! You now leave p1!");
methods. 6. });
• The first function is executed when the mouse enters
the HTML element, and the second function is 1. $("input").focus(function(){
executed when the mouse leaves the HTML element: $(this).css("background-
color", "#cccccc");
});
 focus (), blur()
• The focus() function is executed when the form field 2. $("input").blur(function(){
gets focus. blur() function when the form field loses 3. $(this).css("background-color",
focus "#ffffff");
4. });
14
Event Methods
 on() Method
• The on() method attaches one or more event handlers for the selected elements.
• Attach a click event to a <p> element::
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
}); 15
jQuery Event Methods
Method / Property Description
bind() Deprecated in version 3.0. Use the on() method instead. Attaches event handlers to
elements
change() Attaches/Triggers the change event
delegate() Deprecated in version 3.0. Use the on() method instead. Attaches a handler to current, or
future, specified child elements of the matching elements
die() Removed in version 1.9. Removes all event handlers added with the live() method
error() Removed in version 3.0. Attaches/Triggers the error event
event.data Contains the optional data passed to an event method when the current executing handler
is bound
event.delegateTarget Returns the element where the currently-called jQuery event handler was attached
event.isDefaultPrevented( Returns whether event.preventDefault() was called for the event object
)
16
jQuery Event Methods
Method / Property Description

event.isImmediatePropag Returns whether event.stopImmediatePropagation() was called for the event object
ationStopped()
event.isPropagationStopp Returns whether event.stopPropagation() was called for the event object
ed()
event.namespace Returns the namespace specified when the event was triggered

event.pageX Returns the mouse position relative to the left edge of the document

event.pageY Returns the mouse position relative to the top edge of the document

event.preventDefault() Prevents the default action of the event

event.relatedTarget Returns which element being entered or exited on mouse movement

event.result Contains the last/previous value returned by an event handler triggered by the specified event

event.stopImmediateProp Prevents other event handlers from being called

agation()

17
jQuery Effects 1. $("#hide").click(function(){
 jQuery hide() and show() toggle() 2. $("p").hide();
• With jQuery, you can hide and show HTML elements with 3. });
the hide() and show() methods:
4. $("#show").click(function(){
• $(selector).hide(speed,callback); 5. $("p").show();
6. });
• $(selector).show(speed,callback);
• The optional speed parameter specifies the speed of the
hiding/showing, and values are: "slow", "fast", or
milliseconds. 1.
2. $("button").click(function(){
• The optional callback parameter is a function to be executed
after the hide() or show() method completes (you will learn 3. $("p").hide(1000);
more about callback functions in a later chapter).
});
• You can also toggle between hiding and showing an element
with the toggle() method.

18
Effects - Fading
 jQuery hide() and show() toggle() and fadeTo()
• With jQuery you can fade an element in and out of visibility. The optional speed parameter specifies the
duration of the effect. It can take the following values: "slow", "fast", or millisecond
• Opacity parameter in the fadeTo() method specifies fading to a given opacity (value between 0 and 1)
• jQuery has the following fade methods:

Methosd Description Syntax

fadeIn() used to fade in a hidden element $(selector).fadeIn(speed,callback);

fadeOut() used to fade out a visible element $(selector).fadeOut(speed,callback);

fadeToggle() toggles between the fadeIn() and fadeOut() methods $(selector).fadeToggle(speed,callback);

fadeTo() allows fading to a given opacity (value between 0 $(selector).fadeTo(speed,opacity,callback);

and 1)
19
Example
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
$("button").click(function(){
$("#div1").fadeTo("slow", 0.15);
$("#div2").fadeTo("slow", 0.4);
$("#div3").fadeTo("slow", 0.7);
});
20
Effects - Sliding
 jQuery slideDown(), slideUp(), slideToggle()
• The optional speed parameter specifies the duration of the effect. It can take the following values:
"slow", "fast", or millisecond
• The optional callback parameter is a function to be executed after the sliding completes
• jQuery has the following sliding methods:

Methosd Description Syntax

slideDown() used to slide down an element $(selector).slideDown(speed,callback);

slideUp() used to slide up an element $(selector).slideUp(speed,callback);

slideToggle() toggles between $(selector).slideToggle(speed,callback);

the slideDown() and slideUp() methods

21
Example

$("#flip").click(function(){ $("#flip").click(function(){
$("#panel").slideUp(); $("#panel").slideDown();
}); });

$("#flip").click(function(){
$("#panel").slideToggle();
});

22
Q&A

• What is the use of jQuery Selector?

• Differentiate between fade() and blur() method?

• Discuss the use of on() method for events?

• What is the role of document ready event?

23
Learning Outcome
 At the end of this session, you will be able to
 Understand the basics of jQuery Selector
 Understand the Event handling techniques.
 Get familiar with various effects methods

24