jQuery's syntax is designed to be simple and concise, making it easy to use for a variety of tasks such as selecting elements, handling events, and manipulating the DOM. This tutorial covers the basics of jQuery syntax, including selectors, methods, chaining, and event handling.
jQuery selectors are used to select and manipulate HTML elements. They are based on CSS selectors, making them intuitive and easy to use. The basic syntax for a jQuery selector is: $(selector).action().
<!DOCTYPE html>
<html>
<head>
<title>jQuery Selectors - Tag Name</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("p").css("color", "blue");
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
This example shows how to select elements by their tag name.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Selectors - Class Name</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$(".myClass").css("font-weight", "bold");
});
</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 demonstrates how to select elements by their class name.
jQuery provides a wide range of methods for manipulating HTML elements, attributes, and CSS properties. These methods can be chained together to perform multiple operations in a single statement.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Methods - Change Text</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#changeTextButton").click(function() {
$("#text").text("Hello, jQuery!");
});
});
</script>
</head>
<body>
<button id="changeTextButton">Change Text</button>
<p id="text">This is a paragraph.</p>
</body>
</html>
This example shows how to change the text of an HTML element.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Methods - Hide Element</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#hideButton").click(function() {
$("#text").hide();
});
});
</script>
</head>
<body>
<button id="hideButton">Hide</button>
<p id="text">This is a paragraph.</p>
</body>
</html>
This example demonstrates how to hide an element.
jQuery allows you to chain multiple methods together, making your code more concise and readable. Chaining is done by calling multiple methods on the same jQuery object.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Chaining - Change Text and Hide</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#chainButton").click(function() {
$("#text").text("Hello, jQuery!").hide();
});
});
</script>
</head>
<body>
<button id="chainButton">Change Text and Hide</button>
<p id="text">This is a paragraph.</p>
</body>
</html>
This example illustrates how to chain methods to change the text and hide an element.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Chaining - Add Class and Set CSS</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#styleButton").click(function() {
$("#text").addClass("styled").css("color", "green");
});
});
</script>
<style>
.styled {
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<button id="styleButton">Add Class and Set CSS</button>
<p id="text">This is a paragraph.</p>
</body>
</html>
This example shows how to chain methods to add a class and set CSS properties.
jQuery simplifies event handling with a variety of methods for binding event handlers to elements. Commonly used methods include .click(), .dblclick(), .hover(), and .on().
<!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 a click event.
<!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 how to handle a hover event.
The $(document).ready() function ensures that the DOM is fully loaded before executing jQuery code. This prevents errors that occur when trying to manipulate elements that are not yet available in the DOM.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Document Ready</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("p").text("The DOM is fully loaded.");
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
This example shows how to use the $(document).ready() function.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Document Ready - Shorthand</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function() {
$("p").text("The DOM is fully loaded using shorthand.");
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
This example demonstrates how to use shorthand for the $(document).ready() function.