Introduction
What is jQuery?
jQuery is a lightweight, fast, and feature-rich JavaScript library. It simplifies tasks like HTML DOM traversal and manipulation, event handling, animation, and AJAX.
Why use jQuery?
- Easy to use and learn.
- Reduces the amount of JavaScript code you need to write.
- Ensures cross-browser compatibility.
- Offers powerful features for animations, events, and AJAX with minimal code.
Advantages over Vanilla JavaScript
- Shorter and cleaner syntax for common tasks.
- Automatic handling of browser differences.
- Built-in methods for animation, DOM manipulation, and event handling.
CDN vs Local jQuery
There are two ways to include jQuery in your project:
- CDN (Content Delivery Network): Loads jQuery from a remote server. Faster due to caching if the user already visited a site using the same CDN.
- Local File: You download jQuery and host it locally with your project.
Using jQuery via CDN:
<!-- Include jQuery from CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
Using jQuery Locally:
<!-- Include jQuery from local file -->
<script src="js/jquery-3.6.0.min.js"></script>
How to Add jQuery to an HTML Page
You can simply add a script tag either in the <head> or just before the closing </body> tag.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="btn">Click Me</button>
<p id="message"></p>
<script>
$(document).ready(function() {
$('#btn').click(function() {
$('#message').text('Hello from jQuery!');
});
});
</script>
</body>
</html>
Output:
If you have any questions, feel free to ask. Thank you for reading!
If you have any query or question, please contact through below form. Our team will be in touch with you soon.
Please provide your valueable feedback or suggession as well.