What is jQuery?
Learn what jQuery is and the problems it was built to solve.
Syntax
$(selector).action();jQuery is a small, fast JavaScript library. Its slogan is “write less, do more.”
It wraps common tasks — finding elements, handling clicks, animating, and fetching data — into short, readable method calls that work the same way in every browser.
What jQuery helps you do
- Select and change HTML elements easily.
- Handle events like clicks and key presses.
- Create animations and effects.
- Load data from a server with AJAX.
jQuery does not add new features to the browser — it is a friendlier way to write the JavaScript you could already write by hand.
Example
Loading editor…
Press Run to see the result.
When to use it
- A news site uses jQuery to show/hide spoiler content without reloading the page.
- A shopping cart uses jQuery to update item totals dynamically as the user changes quantities.
- A portfolio site uses jQuery to animate section transitions when the visitor scrolls.
More examples
Hide a paragraph on click
Selects a button by id, listens for a click, then hides another element — the core jQuery pattern.
<button id="hideBtn">Hide text</button>
<p id="msg">jQuery makes this simple.</p>
<script>
$(function () {
$("#hideBtn").click(function () {
$("#msg").hide();
});
});
</script>Change text on button click
Uses .text() to write dynamic content into an element without touching the DOM directly.
<button id="greetBtn">Greet</button>
<p id="out"></p>
<script>
$(function () {
$("#greetBtn").on("click", function () {
$("#out").text("Hello from jQuery!");
});
});
</script>Add a CSS class dynamically
Chains addClass() and text() on one selector to update both style and content in one line.
<p id="notice">Status: normal</p>
<button id="alertBtn">Trigger alert</button>
<script>
$(function () {
$("#alertBtn").click(function () {
$("#notice").addClass("alert").text("Status: alert!");
});
});
</script>
Discussion