Module 4

MODULE 4
Introduction to JQuery
• jQuery is a small, light-weight and fast JavaScript library.
It is cross-platform and supports different types of
browsers.
• It is also referred as “write less do more” because it
takes a lot of common tasks that requires many lines of
JavaScript code to accomplish, and binds them into
methods that can be called with a single line of code
whenever needed.
• It is also very useful to simplify a lot of the complicated
things from JavaScript, like AJAX calls and DOM
manipulation.
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function()
{
$("p").css("background-color", "cyan");
});
</script>
</head>
• Here ready event always includes an event handler, click, corresponding links.
<a href=“………………”>Jquery</a>
<script type="text/javascript" language="javascript"> </script>
<script>
{
$(“a”).click(function(event)
{
Alert(“hellow world”);
});
});
</script>
• Javascript:
Document.getElementById("demo").innerHTML = "Hello, World!";
• Jquery:
$("#demo").html("Hello, World!");
jQuery is called with and represented by the dollar sign ($).
You access the DOM with jQuery using mostly CSS syntax, and apply an action
with a method.
A basic jQuery example follows this format:
$("selector").method();
Example:
{
$("#demo").html("Hello, World!");
});
Exploring jQuery selectors
• To access a selector, use the jQuery symbol $, followed by parentheses ():
• It supports CSS syntax to select HTML elements by element name,
attribute name or content.
$("selector")
Example:
$(“p”) // selects all p elements
$(“p.summary”) // selects all p elements having summary class
$(p#jquery) // selects the first p element with jquery id
$(“[href]”) // selects all elements with an href attribute
$(“[href=‘#’]”) // selects all elements with an href value equal to #
• Jquery also provides CSS selector to change CSS properties of HTML
elements.
• $("p").css("background-color", "cyan");
Below are the list of selectors supported by jQuery:
Exploring JQuery methods to
Access HTML Attributes
• Jquery enables us to read, add, modify or remove an attribute from
an HTML Element.
• attr() method is used to read, add and modify
• removeattr() is used to remove the attributes from an element.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
{
$("button").click(function()
{
$("img").attr("width", "500");
});
});
</script>
</head>
<body>
<img src="good-morning.jpg" alt="Good Morning Friends“ width="284" height="213"><br>
<button>Set the width attribute of the image</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<script>
$(document).ready(function ()
{
$('#emptyDiv').text('This is some text.');
});
</script>
</head>
<body>
<div id="emptyDiv">
</div>
</body>
</html>
jQuery Events
<script>
{
$("p").click(function()
{
$(this).hide();
});
});
</script>
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.
Method Description
animate() performs animation.
delay() sets delay execution for all the queued functions on the selected elements.
fadeIn() shows the matched elements by fading it to opaque. In other words, it fades in the
selected elements.
fadeOut() shows the matched elements by fading it to transparent. In other words, it fades out the
selected elements.
fadeTo() adjusts opacity for the matched element. In other words, it fades in/out the selected
elements.
hide() hides the matched or selected elements.
show() displays or shows the selected elements.
stop() stops the animation which is running on the matched elements.
toggle() shows or hides the matched elements. In other words, it toggles between the hide() and
show() methods.
jQuery css()
Syntax:
css("propertyname","value");
Example:
$("p").css("background-color", "cyan");
Set multiple CSS properties
Syntax:
css({"propertyname":"value","propertyname":"val
ue",...});
Example:
$("p").css({"background-color": "yellow", "font-
size": "200%"});

Module 4

Uploaded by

Copyright:

Available Formats

Module 4

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Module 4

Uploaded by

Copyright:

Available Formats

MODULE 4

You might also like