Scribd
Upload
23 views

Module 4

Uploaded by

Abhishek V
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
23 views

Module 4

Uploaded by

Abhishek V
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 16

WEB Technologies 22MCAL24

Module 4
jQuery
What is jQuery
• jQuery is a small and lightweight JavaScript library.
• jQuery is cross-platform.
• jQuery means "write less do more".
• jQuery simplifies AJAX call and DOM manipulation.
• It is designed to simplify the client-side scripting of HTML.
• It makes things like HTML document traversal and manipulation, animation, event handling,
and
 AJAX very simple with an easy-to-use API that works on a lot of different type of browsers.
• The main purpose of jQuery is to provide an easy way to use JavaScript on your website to
make it
 more interactive and attractive. It is also used to add animation.

jQuery Features
• HTML manipulation
• DOM manipulation
• DOM element selection
• CSS manipulation
• Effects and Animations
• Utilities
• AJAX
• HTML event methods
• JSON Parsing
• Extensibility through plug-ins

Advantages:
• Wide range of plug-ins that allows developers to create plug-ins on top of the JavaScript
library.
• Large development community.
• It is a lot easier to use compared to standard JavaScript and other JavaScript libraries.
• It lets users develop Ajax templates with ease.
• Being Light weight and a powerful chaining capabilities makes it more strong.

jQuery Syntax
Basic syntax is:
$(selector).action()
A $ sign to define/access jQuery
A (selector) to "query (or find)" HTML elements
A jQuery action() to be performed on the element(s)

Examples:
$(this).hide() - hides the current element.
$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test"

YOGEESH S | [email protected] Page 1


WEB Technologies 22MCAL24

The Document Ready Event

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: $(). It is known as the
factory
• function.

The $() factory function


• Every jQuery selector start with this sign $().
• This sign is known as the factory function.
• It uses the three basic building blocks while selecting an element in a given document.

Different jQuery Selectors


jQuery * Selector
• The jQuery * selector selects all the elements in the document, including HTML, body, and
head.
• If the * selector is used together with another element, then it selects all child elements within
the element used.
Syntax:
$("*")

YOGEESH S | [email protected] Page 2


WEB Technologies 22MCAL24

Parameters:
*: This parameter is used to select all elements.
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("*").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me to hide paragraph </button>
</body>
</html>
jQuery #id Selector
• The #id selector specifies an id for an element to be selected.
• It should not begin with a number and the id attribute must be unique within a document
which
• means it can be used only one time.
Syntax:
$("#id")
Parameter:
id: An element’s specific id.
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<p>hi</p>
<p id="test">welcome</p>
<button>Click me</button>
</body>
</html>

YOGEESH S | [email protected] Page 3


WEB Technologies 22MCAL24

jQuery element Selector


• It is used to select and modify HTML elements based on the element name.
Syntax:
$("element_name")
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("h2").css("border","5px solid green");
});
</script>
</head>
<body>
<h2>welcome</h2>
</body>
</html>
jQuery :first Selector
The jQuery :first Selector is used to select the first element of the specified type.
Syntax:
$(":first")
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script>
$(document).ready(function () {
$("p:first").css("background-color", "yellow");
});
</script>
</head>
<body>
<p>welcome</p>
<p>jQuery</p>
<p>First Selector</p>
</body>
</html>
jQuery :last Selector
The jQuery :last Selector is used to select the last element of the specified type.
Syntax:
$(":last")

YOGEESH S | [email protected] Page 4


WEB Technologies 22MCAL24

Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script>
$(document).ready(function () {
$("p:last").css("background-color", "yellow");
});
</script>
</head>
<body>
<p>welcome</p>
<p>jQuery</p>
<p>First Selector</p>
</body>
</html>

jQuery :even Selector


The jQuery:even selector used to select an even number index from the elements. The number
of the index starts from 0.
Syntax
$(":even")
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("tr:even").css("background-color","blue");
});
</script>
</head>
<body>
<table border="1">
<tr> <th>Company</th> <th>Country</th> </tr>
<tr> <td>reliance</td> <td>India</td> </tr>
</table>
</body>
</html>

jQuery :odd Selector


• The jQuery :odd selector is used to select an odd number index from the elements. The
number of indexes starts from 0.

Syntax:
$(":odd")

YOGEESH S | [email protected] Page 5


WEB Technologies 22MCAL24

Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("tr:odd").css("background-color","blue");
});
</script>
</head>
<body>
<table border="1">
<tr> <th>Company</th> <th>Country</th> </tr>
<tr> <td>reliance</td> <td>India</td> </tr>
</table>
</body>
</html>

jQuery Events
• jQuery events are the actions that can be detected by your web application. They are used to
create dynamic web pages.
• An event shows the exact moment when something happens.
• examples of events.
• A mouse click
• An HTML form submission
• A web page loading
• A keystroke on the keyboard
• Scrolling of the web page etc.

Events can be categorized on the basis their types

Mouse Events Form Events


• click • submit
• dblclick • change
• mouseenter • blur
• mouseleave • focus
Keyboard Events Document/Window Events
• keyup • load
• keydown • unload
• keypress • scroll
• resize

jQuery click()
• When you click on an element, the click event occurs and once the click event occurs it
execute
• the click () method or attaches a function to run.
• It is generally used together with other events of jQuery.

YOGEESH S | [email protected] Page 6


WEB Technologies 22MCAL24

Syntax:
$(selector).click()
• It is used to trigger the click event for the selected elements.
$(selector).click(function)
• It is used to attach the function to the click event.

Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
alert("This paragraph was clicked.");
});
});
</script>
</head>
<body>
<p>Click on the statement.</p>
</body>
</html>
jQuery bind()
• The jQuery bind() event is used to attach one or more event handlers for selected
• elements from a set of elements.
• It specifies a function to run when the event occurs.
• It is generally used together with other events of jQuery.
Syntax:
$(selector).bind(event,data,function,map)
Parameters of jQuery bind() event

Parameter Description
Event: It is a mandatory parameter. It specifies one or more events to attach to the elements.
Data: It is an optional parameter. It specifies additional data to pass along to the function.
Function: It is a mandatory parameter. It executes the function to run when the event occurs.
Map: It specifies an event map which contains one or more events or functions attached to
the element.

jQuery keydown()
• When you press a key on the keyboard, the keydown() event is occurred and once the keydown()
event is occurred, it executes the function associated with keydown() method to run.
The keydown() event is generally used with two other events.

• Keypress() event: It specifies that the key is pressed down.


• Keyup() event: It specifies that the key is released.
Syntax:
$(selector).keydown()
It triggers the keydown event for selected elements.
$(selector).keydown(function)

YOGEESH S | [email protected] Page 7


WEB Technologies 22MCAL24

It adds a function to the keydown event.


Parameters of jQuery keydown() event
Parameter Description
Function It is an optional parameter. It is executed itself when the keydown event is triggered.

Example
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
$("input").keydown(function(){
$("input").css("background-color", "green");
});
$("input").keyup(function(){
$("input").css("background-color", "violet");
});
});
</script>
</head>
<body>
Write something: <input type="text">
</body>
</html>

jQuery hover()
• The jQuery hover() method executes two functions when you roam the mouse pointer over
the selected element.
• The hover() method triggers both the mouseenter and mouseleave events.
Syntax:
$(selector).hover(inFunction,outFunction)
Parameters of jQuery hover() event
Parameter Description
InFunction: It is a mandatory parameter. It is executed the function when mouseenter event
occurs.
OutFunction: It is an optional parameter. It is executed the function when mouseleave event occurs.

Example
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).css("background-color", "violet");
}, function(){
$(this).css("background-color", "green");

YOGEESH S | [email protected] Page 8


WEB Technologies 22MCAL24

});
});
</script>
</head>
<body>
<p>Hover your mouse pointer on me!</p>
</body>
</html>

jQuery submit()
• jQuery submit event is sent to the element when the user attempts to submit a form.
• This event is only attached to the <form> element. Forms can be submitted either by clicking on
the submit button or by pressing the enter button on the keyboard when that certain form elements
have focus. When the submit event occurs, the submit() method attaches a function with it to run.
Syntax:
$(selector).submit()
It triggers the submit event for selected elements.
$(selector).submit(function)
It adds a function to the submit event.
Parameters of jQuery submit() event
Parameter Description
Function: It is an optional parameter. It is used to specify the function to run when the submit
event is executed.

jQuery focus()
The jQuery focus event occurs when an element gains focus. It is generated by a mouse click or by
navigating to it.
This event is implicitly used to limited sets of elements such as form elements like <input>, <select>
etc. and links <a href>. The focused elements are usually highlighted in some way by the browsers.
The focus method is often used together with blur () method.
Syntax:
$(selector).focus()
It triggers the focus event for selected elements.
$(selector).focus(function)
It adds a function to the focus event.
Parameters of jQuery focus() event
Parameter Description
Function: It is an optional parameter. It is used to specify the function to run when the element gets
the focus.

jQuery blur()
• The jQuery blur event occurs when element loses focus. It can be generated by via keyboard
commands like tab key or mouse click anywhere on the page.
• It makes you enable to attach a function to the event that will be executed when the element loses
focus. Originally, this event was used only with form elements like <input>. In latest browsers, it has
been extended to include all element types.
• The blur () method is often used together with focus () method.
Syntax:
$(selector).blur()

YOGEESH S | [email protected] Page 9


WEB Technologies 22MCAL24

It triggers the blur event for selected elements.


$(selector).blur(function)
It adds a function to the blur event.
Parameters of jQuery blur() event
Parameter Description
Function:It is an optional parameter. It is used to specify the function to run when the element loses
the
focus (blur).

jQuery Effects
jQuery enables us to add effects on a web page. jQuery effects can be categorized into fading, sliding,
hiding/showing and animation effects.

YOGEESH S | [email protected] Page 10


WEB Technologies 22MCAL24

jQuery effect methods are given below:

jQuery hide()
The jQuery hide() method is used to hide the selected elements.
Syntax:
$(selector).hide();
$(selector).hide(speed, callback);
$(selector).hide(speed, easing, callback);
speed: It is an optional parameter. It specifies the speed of the delay. Its possible vales are slow, fast
and milliseconds.
easing: It specifies the easing function to be used for transition.
callback: It is also an optional parameter. It specifies the function to be called after completion of
hide() effect.

jQuery show()
The jQuery show() method is used to show the selected elements.
Syntax:
$(selector).show();
$(selector).show(speed, callback);
$(selector).show(speed, easing, callback);
speed: It is an optional parameter. It specifies the speed of the delay. Its possible vales are slow, fast
and milliseconds.
easing: It specifies the easing function to be used for transition.
callback: It is also an optional parameter. It specifies the function to be called after completion of
show() effect.

jQuery fadeIn()
jQuery fadeIn() method is used to fade in the element.
Syntax:
$(selector).fadein();
$(selector).fadeIn(speed,callback);
$(selector).fadeIn(speed, easing, callback);

YOGEESH S | [email protected] Page 11


WEB Technologies 22MCAL24

speed: It is an optional parameter. It specifies the speed of the delay. Its possible vales are slow, fast
and milliseconds.
easing: It specifies the easing function to be used for transition.
callback: It is also an optional parameter. It specifies the function to be called after completion of
fadein() effect.

jQuery fadeOut()
The jQuery fadeOut() method is used to fade out the element.
Syntax:
$(selector).fadeOut();
$(selector).fadeOut(speed,callback);
$(selector).fadeOut(speed, easing, callback);
speed: It is an optional parameter. It specifies the speed of the delay. Its possible vales are slow, fast
and milliseconds.
easing: It specifies the easing function to be used for transition.
callback: It is also an optional parameter. It specifies the function to be called after completion of
fadeOut() effect.

jQuery slideUp()
jQuery slideDown() method is used to slide up an element.
Syntax:
$(selector).slideUp(speed);
$(selector).slideUp(speed, callback);
$(selector).slideUp(speed, easing, callback);
speed: It specifies the speed of the delay. Its possible vales are slow, fast and milliseconds.
easing: It specifies the easing function to be used for transition.
callback: It is also an optional parameter. It specifies the function to be called after completion of
slideUp() effect.

jQuery slideDown()
jQuery slideDown() method is used to slide down an element.
Syntax:
$(selector).slideDown(speed);
$(selector).slideDown(speed, callback);
$(selector).slideDown(speed, easing, callback);
speed: It specifies the speed of the delay. Its possible vales are slow, fast and milliseconds.
easing: It specifies the easing function to be used for transition.
callback: It is also an optional parameter. It specifies the function to be called after completion of
slideDown() effect.

jQuery animate()
The jQuery animate() method provides you a way to create custom animations.
Syntax:
$(selector).animate({params}, speed, callback);
Here, params parameter defines the CSS properties to be animated.
The speed parameter is optional and specifies the duration of the effect. It can be set as "slow" , "fast"
or milliseconds.
The callback parameter is also optional and it is a function which is executed after the animation
completes.

YOGEESH S | [email protected] Page 12


WEB Technologies 22MCAL24

jQuery html()
• jQuery html() method is used to change the entire content of the selected elements.
• It replaces the selected element content with new contents.
• The first method signature has no argument, so it just returns the HTML within that
element.
• The remaining two signatures take a single argument: i.e. a string or a function that
returns a string.
Syntax:
$(selector).html()
It is used to return content.

$(selector).html(content)
It is used to set content.

$(selector).html(function (index, currentcontent))


It is used to set content by calling function.
The jQuery html() method is used either for set the content or return the content of the selected
elements.
To set content: When you use this method to set content, it overwrites the content of the all matched
elements.
To return content: When you use this method to return content, it returns the content of the first
matched element.
The text() method is used to set or return only the text content of the selected elements.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").html("Hello <b>welcome</b>");
});
});
</script>
</head>
<body>

YOGEESH S | [email protected] Page 13


WEB Technologies 22MCAL24

<button>Click here to change the content of all p elements</button>


<p>This is a paragraph.</p>
</body>
</html>

jQuery css()
The jQuery CSS() method is used to get (return)or set style properties or values for selected elements.
It facilitates you to get one or more style properties.
jQuery CSS() method provides two ways:

1) Return a CSS property


It is used to get the value of a specified CSS property.
Syntax:
css("propertyname");
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Background color = " + $("p").css("background-color"));
});
});
</script>
</head>
<body>
<p style="background-color:#ff0000">The background-color of this paragraph is red.</p>
<button>Click here to get the background-color of first matched element.</button>
</body>
</html>

2) Set a CSS property


This property is used to set a specific value for all matched element.
Syntax:
css("propertyname","value");

3) Set multiple CSS properties


It is just an extension of Set CSS property. It facilitates you to add multiple property values together.
Syntax:
css({"propertyname":"value","propertyname":"value",...});

jQuery HTML / CSS Methods


methods used to manipulate the HTML and CSS

YOGEESH S | [email protected] Page 14


WEB Technologies 22MCAL24

jQuery before()
The jQuery before() method is used to insert the specified content before the selected elements.
It adds the content specified by the parameter, before each element in the set of matched elements.
Syntax:
$(selector).before(content, function(index))

jQuery append()
The jQuery append() method is used to insert specified content as the last child (at the end of) the
selected elements in the jQuery collection.
The append () and appendTo () methods are used to perform the same task. The only difference
between them is in the syntax.
Syntax:
$(selector).append(content, function(index, html))

jQuery prepend()
The jQuery prepend() method is used to insert the specified content at the beginning (as a first child)
of the selected elements.
It is just the opposite of the jQuery append() method.
If you want to insert the content at the end of the selected elements, you should use the append
method.
Syntax:
$(selector).prepend(content,function(index,html))

jQuery width()
jQuery width() method is used to return or set the width of matched element.
To return width: When this method is used to return the width, it returns the width of first matched
element.
To set width:When this method is used to set the width, it sets the width for every matched element.

YOGEESH S | [email protected] Page 15


WEB Technologies 22MCAL24

Syntax:
To return the width:
$(selector).width()
To set the width:
$(selector).width(value)
To set the width using a function:
$(selector).width(function(index,currentwidth))

jQuery height()
The jQuery height() method is used for two purposes:
To return height: When this method is used to return height, it returns the height of first matched
element.
To set height: When this method is used to set height, it sets height of all matched elements.
This method is a very common jQuery dimension.
Syntax:
To return the height:
$(selector).height()

To set the height:


$(selector).height(value)

To set the height by using a function:


$(selector).height(function(index,currentheight))
jQuery wrap()
jQuery wrap() method is used to wrap specified HTML elements around each selected element. The
wrap () function can accept any string or object that could be passed through the $() factory function.
Syntax:
$(selector).wrap(wrappingElement,function(index))

jQuery wrapAll()
jQuery wrapAll() method is used to wrap specified HTML elements around all selected elements, in
a set of matched elements.
Syntax:
$(selector).wrapAll(wrappingElement)

jQuery unwrap()
The jQuery unwrap() method is used to remove the parent element of the selected elements.
Syntax:
$(selector).unwrap()

YOGEESH S | [email protected] Page 16

You might also like