jQuery is a popular JavaScript library that simplifies HTML document traversal, event handling, animation, and AJAX interactions for rapid web development. It aims to make things like HTML manipulation, event handling, and AJAX much simpler with an easy-to-use API that works across different browsers.
You can include jQuery via a CDN:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Tutorial</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<!-- Your HTML content goes here -->
</body>
</html>
The basic syntax is $(selector).action() where:
$ is used to access jQuery.selector finds HTML elements.action() is performed on the selected elements.Ensure the DOM is fully loaded before running jQuery code:
<script>
$(document).ready(function(){
// Your jQuery code goes here
alert("DOM is ready!");
});
</script>
Use selectors to target HTML elements:
<p id="paragraph">This is a paragraph.</p>
<script>
$(document).ready(function(){
$("#paragraph").text("Hello, jQuery!");
});
</script>
Handle events like clicks:
<button id="btn">Click Me</button>
<script>
$(document).ready(function(){
$("#btn").click(function(){
alert("Button clicked!");
});
});
</script>
Change HTML content dynamically:
<p id="text">Hello, world!</p>
<input type="text" id="input" value="Hello!">
<script>
$(document).ready(function(){
$("#text").text("Hello, jQuery!");
$("#input").val("jQuery value");
});
</script>
Modify CSS properties:
<p id="css">This is styled text.</p>
<script>
$(document).ready(function(){
$("#css").css({
"color": "blue",
"font-size": "20px"
});
});
</script>
Add new elements to the DOM:
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<button id="add">Add Item</button>
<script>
$(document).ready(function(){
$("#add").click(function(){
$("#list").append("<li>New Item</li>");
});
});
</script>
Create animations using jQuery:
<div id="box" style="width:100px;height:100px;background-color:red;"></div>
<script>
$(document).ready(function(){
$("#box").click(function(){
$(this).animate({
width: "300px",
height: "300px"
});
});
});
</script>
Load data asynchronously:
<button id="load">Load Content</button>
<div id="content"></div>
<script>
$(document).ready(function(){
$("#load").click(function(){
$.ajax({
url: "content.html", // Make sure you have this file
success: function(result){
$("#content").html(result);
}
});
});
});
</script>
Here's a full example combining everything:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Tutorial</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#box {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<p id="paragraph">This is a paragraph.</p>
<button id="btn">Click Me</button>
<p id="text">Hello, world!</p>
<input type="text" id="input" value="Hello!">
<p id="css">This is styled text.</p>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<button id="add">Add Item</button>
<div id="box"></div>
<button id="load">Load Content</button>
<div id="content"></div>
<script>
$(document).ready(function(){
// Basic selector and manipulation
$("#paragraph").text("Hello, jQuery!");
// Event handling
$("#btn").click(function(){
alert("Button clicked!");
});
// Manipulating content
$("#text").text("Hello, jQuery!");
$("#input").val("jQuery value");
// CSS manipulation
$("#css").css({
"color": "blue",
"font-size": "20px"
});
// Adding and removing elements
$("#add").click(function(){
$("#list").append("<li>New Item</li>");
});
// Animations
$("#box").click(function(){
$(this).animate({
width: "300px",
height: "300px"
});
});
// AJAX
$("#load").click(function(){
$.ajax({
url: "content.html",
success: function(result){
$("#content").html(result);
}
});
});
});
</script>
</body>
</html>