jQuery Introduction
jQuery is a JavaScript library that makes working with web pages simpler.
What is jQuery?
- jQuery is a single JavaScript file that you add to your page
- It gives you short commands for common tasks
- It works the same way in every browser
- It is free and open source, first released in 2006
You still write JavaScript. jQuery just gives you easier tools to use inside it.
What Can jQuery Do?
| Feature | Example |
|---|---|
| Find elements | $(".price") finds every element with class price |
| Handle events | Run code when a button is clicked |
| Change the page | Change text, HTML, attributes and CSS |
| Effects and animation | Fade, slide, hide and show elements |
| AJAX | Load data from a server without reloading |
Adding jQuery to a Page
The easiest way is to load it from a CDN (a fast public server). Put this line in the <head>, or before your own scripts:
Example
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>The .min.js file is the "minified" version: all spaces and comments are removed, so it downloads faster.
You can also download the file, save it in your project (for example as js/jquery.min.js) and link it like any other script:
Example
<script src="js/jquery.min.js"></script>Always load jQuery before your own code that uses it. If your script runs first, you get the error "$ is not defined".
Your First jQuery Page
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
</head>
<body>
<h2>Welcome to Ali's Mobile Shop</h2>
<p id="msg">Click the button to see today's offer.</p>
<button id="btn">Show offer</button>
<script>
$(document).ready(function () {
$("#btn").click(function () {
$("#msg").text("Free cover with every phone above Rs 30,000!");
});
});
</script>
</body>
</html>jQuery vs Plain JavaScript
Here is the same job, changing all .note paragraphs to red, written both ways:
Example
// Plain JavaScript
document.querySelectorAll(".note").forEach(function (el) {
el.style.color = "red";
});
// jQuery
$(".note").css("color", "red");jQuery automatically works on every matching element, so there is no loop.
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
</head>
<body>
<p class="note">Fee due on the 10th.</p>
<p class="note">Bring your CNIC copy.</p>
<p>This paragraph is not a note.</p>
<button id="mark">Highlight notes</button>
<script>
$("#mark").click(function () {
$(".note").css("color", "red");
});
</script>
</body>
</html>Is jQuery Still Used?
Modern JavaScript now has many features that jQuery made popular, like querySelectorAll and fetch. New big apps often use frameworks such as React instead. But jQuery is still on a huge number of existing websites, WordPress themes and plugins, so it is a useful skill for maintenance and freelance work.
Exercise
Exercise
Where should the script tag that loads jQuery go?