Introduction to JQuery
HTML, CSS & JS
Basic DOM Structure
DOM (Document Object Model) is a tree-like structure
that represents an HTML or XML document.
It defines the logical structure of documents and the
way a document is accessed and manipulated.
DOM Structure
DOM Structure
Introduction to JQuery
jQuery is a fast, small, and feature-rich JavaScript library.
Free and Open Source library released in 2006
Most popular and cross browser support
It is designed to make writing and managing JavaScript code simpler,
faster, and cross-browser compatible.
Why Jquery?
Designed to simplify the client side scripting of HTML
Helps to create more powerful dynamic web pages and applications
Helps in loading pages faster and is SEO friendly
Helps in creating animated pages like Flash
It is easy to learn
How to add JQuery into HTML
1. Using jQuery from CDN Link
<script src=
"[Link]
Download the jQuery Files Locally and use Them
<script src= “[Link]”>
Download it [Link]
JQuery Syntax
• Basic syntax is
– $(selector).action()
$ → The jQuery function
selector → Tells jQuery which HTML element(s) to select
action() → The method or action to perform on those elements
$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".
JQuery Example
<!DOCTYPE html>
<html>
<head>
<title>Print Message in jQuery</title>
<script src="[Link]"></script>
</head>
<body>
<div id="divTest1"></div>
<script>
$("#divTest1").text("Hello, world!");
</script>
</body>
</html>
Jquery Ready Event
• The ready event ensures that all the HTML elements in your webpage are fully
loaded and ready to be accessed before your jQuery code runs.
• The syntax is
$(document).ready(function() {
// jQuery code goes here
});
<html>
<body>
<head> <h1>JQuery Tutorial</h1>
<title> <h3>
How to run a code on document How to run a code on document
ready event in jQuery? ready event in jQuery?
</title> </h3>
<p>Introduction to JQuery</p>
<script src="[Link]"> </body>
</script>
</html>
<script>
$(document).ready(function () {
$("body").css("text-align", "center");
$("h1").css("color", "green");
$("p").css("font-size", "14px");
$("p").css("font-weight", "bold");
});
</script>
</head>
JQuery Events
• jQuery events are actions or occurrences that happen on a web page, such as clicks,
hover, or keypress.
• Syntax:
• $(selector).method(function)
• Eg: jQuery click() Event :
– $(selector).click(function);
• The jQuery bind() method is used to attach one or more event handlers for selected
elements.
Adding two buttons with IDs "colorButton" and "hideButton."
The first button is responsible for changing the background <body>
color of the first paragraph (with ID "p1") to sky blue, and the <h2>Id selector</h2>
second button is responsible for hiding the second paragraph <p id="p1">
(with ID "p2"). In this peragraph we are changing background.
</p>
<!DOCTYPE html> <p id="p2">
<html> In 2nd peragraph we are going hide this pera.
<head> </p>
<script src=“[Link]”> </script> <button id="colorButton">
<script> Change Background Color
$(document).ready(function () { </button>
<br><br>
$("#colorButton").click(function () { <button id="hideButton">
$("#p1").css("background-color", "skyblue"); Hide Paragraph
}); </button>
</body>
$("#hideButton").click(function () { </html>
$("#p2").hide();
});
});
</script> jQuery bind()
</head>
jQuery Effects
• Hide & Show
• Fade
• Animate
jQuery Effects – Hide and Show
• With jQuery, you can hide and show HTML elements with the hide() and
show() methods:
jQuery Effects – Hide and Show
<!DOCTYPE html> <body>
<html>
<head> <p>If you click on the "Hide" button, I will
<script src=“[Link]”></script> disappear.</p>
<script>
$(document).ready(function(){ <button id="hide">Hide</button>
$("#hide").click(function(){ <button id="show">Show</button>
$("p").hide();
}); </body>
$("#show").click(function(){ </html>
$("p").show();
});
});
</script>
</head>
jQuery Effects – Fade
• With jQuery you can fade an element in and out of visibility.
jQuery Effects – Fade
<!DOCTYPE html> <body>
<html>
<head> <p>Demonstrate fadeIn() with different
<script src =“[Link] “></script> parameters.</p>
<script>
$(document).ready(function(){ <button>Click to fade in
$("button").click(function(){ boxes</button><br><br>
$("#div1").fadeIn();
<div id="div1"
}); style="width:80px;height:80px;display:none;ba
}); ckground-color:red;"></div><br>
</script>
</head>
</body>
</html>
jQuery Effects – Animate
• jQuery animate() method is used to create custom animations.
jQuery Effects – Animate
<!DOCTYPE html> <body>
<html>
<head> <button>Start Animation</button>
<script src=“[Link]”></script>
<script>
$(document).ready(function(){ <div
$("button").click(function(){ style="background:#98bf21;height:100px;widt
$("div").animate({left: '250px'}); h:100px;position:absolute;"></div>
});
}); </body>
</script> </html>
</head>
jQuery – Blinking the text
<!DOCTYPE html>
<html>
<head>
<script src="[Link]"></script>
<meta charset="utf-8">
<title>Blink text using jQuery</title>
</head>
<script>
function blink_text() {
$('.blink').fadeOut(500);
$('.blink').fadeIn(500);
}
setInterval(blink_text, 1000); </script>
<body>
<div class="blink">JQuery Exercises and Solution</div>
</body>
</html>
Select values from a JSON object using jQuery.
<!DOCTYPE html>
<html> // Using jQuery to display values
<head> $(document).ready(function(){
<title>Select JSON Values using jQuery</title> var output = "Name: " + [Link] + "<br>" +
<script src="[Link]"></script> "Roll No: " + student.roll_no + "<br>" +
</head> "Course: " + [Link];
<body>
$("#details").html(output);
<h3>Student Details</h3> });
<p id="details"></p> </script>
<script> </body>
// JSON object </html>
var student = {
"name": "Abel Jorlin",
"roll_no": "[Link].I5MCA21149",
"course": "Integrated MCA"
};