Ways to include jQuery
1. Download jQuery:
You can download the jQuery library from the official website jquery.com and include it in your project by linking to it using a <script> tag, and host it on your server or local filesystem.
2. Include the jQuery Library:
1. Using jQuery Library Content Delivery Network (CDN) in your HTML project.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
2. Once the library is included, you can write jQuery code within <script>
tags. jQuery code typically follows a specific syntax:
<script> $(document).ready(function() { // Your jQuery code here });</script>
The $(document).ready(function() { ... })
function ensures your code executes only after the document is fully loaded, preventing errors.
Example:
In this example, we are using hover() and css() methods to change the style of heading content on mouse move over.
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("h1").hover(
function () {
$(this).css(
"color",
"green"
);
},
function () {
$(this).css(
"color",
"aliceblue"
);
}
);
});
</script>
</head>
<body>
<h1>w3wiki</h1>
</body>
</html>
Output:
jQuery Tutorial
jQuery is a lightweight, free, and open-source JavaScript library that simplifies manipulating the Document Object Model (DOM), handling events, and creating dynamic web experiences. The main purpose of jQuery is to simplify the usage of JavaScript on websites. jQuery simplifies complex JavaScript tasks with single-line methods, it makes your code more readable and maintainable. By learning jQuery, you can significantly improve the interactivity and responsiveness of your web pages.
In this jQuery tutorial, you’ll learn all the basic to advanced concepts of jQuery such as DOM manipulation and event handling, AJAX, animations, plugins, etc.
Table of Content
- What is jQuery
- Reason to learn jQuery
- How to use jQuery with HTML ?
- Advantages of jQuery
- Disadvantages of jQuery
- Learn More About jQuery Tutorial
- jQuery Tutorial Complete References
- Interview Questions and Answers (2024)
- jQuery Cheat Sheet