jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, and animation much simpler with an easy-to-use API that works across a multitude of browsers. This tutorial covers the basics of jQuery, its syntax, and its key features.
jQuery is a popular JavaScript library that simplifies many common tasks in JavaScript, such as DOM manipulation, event handling, and AJAX. It allows you to write less code to achieve the same functionality.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
This example demonstrates how to include jQuery in your web project.
<!DOCTYPE html>
<html>
<head>
<title>Hello jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("p").text("Hello, jQuery!");
});
</script>
</head>
<body>
<p></p>
</body>
</html>
This example shows a simple "Hello World" program using jQuery.
You can include jQuery in your project by downloading it from the jQuery website or by using a CDN (Content Delivery Network).
<!DOCTYPE html>
<html>
<head>
<title>Include jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<p>jQuery included from CDN</p>
</body>
</html>
This example shows how to include jQuery from a CDN.
<!DOCTYPE html>
<html>
<head>
<title>Include jQuery</title>
<script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
<p>jQuery included locally</p>
</body>
</html>
This example demonstrates how to include a local copy of jQuery.
The basic syntax of jQuery is designed to be simple and concise. The syntax is: $(selector).action().
<!DOCTYPE html>
<html>
<head>
<title>jQuery Syntax</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#hideButton").click(function() {
$("p").hide();
});
});
</script>
</head>
<body>
<button id="hideButton">Hide</button>
<p>This is a paragraph.</p>
</body>
</html>
This example shows how to use the jQuery selector to hide an element.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Syntax</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#changeTextButton").click(function() {
$("p").text("Text has been changed!");
});
});
</script>
</head>
<body>
<button id="changeTextButton">Change Text</button>
<p>This is a paragraph.</p>
</body>
</html>
This example demonstrates how to use jQuery to change the text of an HTML element.
jQuery selectors allow you to select and manipulate HTML elements. They are based on CSS selectors and can select elements by their tag name, class, ID, and more.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Selectors</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$(".myClass").css("color", "red");
});
</script>
</head>
<body>
<p class="myClass">This is a paragraph with class.</p>
<p>This is a paragraph without class.</p>
</body>
</html>
This example illustrates how to select elements by their class name.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Selectors</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#myId").css("font-weight", "bold");
});
</script>
</head>
<body>
<p id="myId">This is a paragraph with ID.</p>
<p>This is a paragraph without ID.</p>
</body>
</html>
This example demonstrates how to select elements by their ID.
jQuery simplifies event handling with methods like .click(), .dblclick(), .hover(), and .keypress(). These methods make it easy to bind functions to events.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Event Handling</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#clickButton").click(function() {
alert("Button clicked!");
});
});
</script>
</head>
<body>
<button id="clickButton">Click Me</button>
</body>
</html>
This example shows how to handle click events using jQuery.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Event Handling</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#hoverDiv").hover(function() {
$(this).css("background-color", "yellow");
}, function() {
$(this).css("background-color", "");
});
});
</script>
</head>
<body>
<div id="hoverDiv" style="width:100px;height:100px;border:1px solid black;"></div>
</body>
</html>
This example demonstrates handling hover events with jQuery.
jQuery makes it easy to manipulate the DOM. You can change the content of HTML elements, add or remove elements, and modify attributes and CSS.
<!DOCTYPE html>
<html>
<head>
<title>jQuery DOM Manipulation</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#changeTextButton").click(function() {
$("#text").text("The text has been changed.");
});
});
</script>
</head>
<body>
<button id="changeTextButton">Change Text</button>
<p id="text">This is a paragraph.</p>
</body>
</html>
This example illustrates how to change the text of an element.
<!DOCTYPE html>
<html>
<head>
<title>jQuery DOM Manipulation</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#addElementButton").click(function() {
$("#list").append("<li>New Item</li>");
});
});
</script>
</head>
<body>
<button id="addElementButton">Add Element</button>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</body>
</html>
This example shows how to add a new element to the DOM.
jQuery provides a rich set of effects and animations, such as .hide(), .show(), .fadeIn(), .fadeOut(), .slideDown(), and .slideUp().
<!DOCTYPE html>
<html>
<head>
<title>jQuery Effects</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#fadeInButton").click(function() {
$("#box").fadeIn();
});
});
</script>
</head>
<body>
<button id="fadeInButton">Fade In</button>
<div id="box" style="width:100px;height:100px;display:none;background-color:red;"></div>
</body>
</html>
This example demonstrates how to use the .fadeIn() effect.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Effects</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#slideUpButton").click(function() {
$("#box").slideUp();
});
});
</script>
</head>
<body>
<button id="slideUpButton">Slide Up</button>
<div id="box" style="width:100px;height:100px;background-color:blue;"></div>
</body>
</html>
This example shows how to use the .slideUp() effect.
AJAX (Asynchronous JavaScript and XML) is a technique for creating fast and dynamic web pages. jQuery provides a convenient way to make AJAX requests.
<!DOCTYPE html>
<html>
<head>
<title>jQuery AJAX</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#loadDataButton").click(function() {
$.get("data.txt", function(data) {
$("#content").text(data);
});
});
});
</script>
</head>
<body>
<button id="loadDataButton">Load Data</button>
<div id="content"></div>
</body>
</html>
This example illustrates how to make a simple GET request using jQuery.
<!DOCTYPE html>
<html>
<head>
<title>jQuery AJAX</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#submitButton").click(function() {
$.post("submit.php", { name: "John", age: 30 }, function(data) {
$("#response").text(data);
});
});
});
</script>
</head>
<body>
<button id="submitButton">Submit</button>
<div id="response"></div>
</body>
</html>
This example demonstrates making a POST request with jQuery.
jQuery's plugin architecture makes it easy to extend its functionality. There are thousands of plugins available for various purposes.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Plugins</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
<script>
$(document).ready(function() {
$("#myForm").validate();
});
</script>
</head>
<body>
<form id="myForm">
<input type="text" name="name" required />
<input type="submit" value="Submit" />
</form>
</body>
</html>
This example shows how to include and use a jQuery plugin.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Plugins</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
(function($) {
$.fn.greenify = function() {
this.css("color", "green");
return this;
};
}(jQuery));
$(document).ready(function() {
$("p").greenify();
});
</script>
</head>
<body>
<p>This text will be green.</p>
</body>
</html>
This example demonstrates creating a simple jQuery plugin.
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of jQuery.
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<p>jQuery UI included.</p>
</body>
</html>
This example shows how to include jQuery UI in your project.
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<input type="text" id="datepicker">
</body>
</html>
This example demonstrates using a jQuery UI widget, such as the datepicker.