Theory
Four lines become one
In BCA305-01 you hid FestConnect's schedule panel the honest way:
document.getElementById("schedule").style.display = "none";
One element, one property, a line of ceremony. Now the committee wants search highlighting, dropdown reactions, click handlers on 20 cards...
The same job in jQuery:
$("#schedule").hide();
Same DOM underneath, a fraction of the typing. jQuery's slogan is its entire sales pitch: write less, do more.
Theory
What jQuery is, and why teams adopted it
jQuery is a JavaScript library: one .js file of pre-written functions, loaded before your script, usually from a CDN:
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
Advantages the exam lists:
- write less, do more: one-line DOM work
- cross-browser: jQuery irons out browser differences beneath you
- simplifies DOM manipulation, events, effects and AJAX (Units 2 and 4 live here)
- chaining: string several actions on one selection
- huge ecosystem, gentle learning curve
Formula
The one syntax to rule the unit
$(selector).action();
- $ enters jQuery
- (selector) picks elements, CSS-style
- .action() does something to every element picked
And the standard wrapper around all of it:
$(document).ready(function() { ... });
Everything inside runs only after the page's DOM is fully built. Every jQuery example in this unit assumes this shell.
At a glance
Selectors: CSS knowledge, reused
| Selector | Picks | FestConnect use |
|---|---|---|
| $("p") | Every <p> element | All description paragraphs |
| $("#regBtn") | The ONE element with that id | The register button |
| $(".eventCard") | Every element with that class | All 20 event cards |
| $("*") | Everything on the page | Rare: bulk resets |
| $("p:first"), $("[href]") | First <p>; anything with an href | Refinements |
Practical
FestConnect wakes up (a complete page)
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() { // wait for the DOM
$("#regBtn").click(function() {
alert("Registration opens soon!");
});
$("#search").focus(function() { // entering the field
$(this).css("background-color", "#fff7e6");
});
$("#search").blur(function() { // leaving the field
$(this).css("background-color", "white");
});
$("#dept").change(function() { // selection changed
alert("Department: " + $(this).val());
});
});
</script>
</head>
<body>
<input id="search" placeholder="Search events">
<select id="dept"><option>BCA</option><option>BCom</option></select>
<button id="regBtn">Register</button>
</body>
</html>
This example runs in Gri-Learn on the web, where you can edit it and see the output.
At a glance
The 6 syllabus events
| Event | Fires when |
|---|---|
| ready | The DOM is fully parsed (page structure exists) |
| click | The element is clicked |
| keypress | A character key is pressed while typing in it |
| focus | The field is entered (cursor arrives) |
| blur | The field is left (cursor departs) |
| change | The value changed: selects instantly, text inputs on leaving after an edit |
Quiz
What does $(".eventCard") select?
- The single element whose id is eventCard
- Every element whose class attribute includes eventCard
- Every <eventCard> tag on the page
- Nothing: jQuery selectors cannot use dots
Show the answer
Every element whose class attribute includes eventCard
The dot prefix is CSS's class notation, and jQuery adopted CSS selectors wholesale: all 20 fest cards are picked at once, and any .action() applies to every one of them: that all-at-once behaviour is half of write-less-do-more. Option A describes $("#eventCard"), the hash/id form: the dot-vs-hash mix-up is this unit's most common bug. Option C would be the bare $("eventCard"), a tag selector hunting a tag that does not exist. Your BCA305-01 CSS knowledge already knew this answer.
Think first
Why wrap everything in ready?
The script sits in <head>, ABOVE the body. Before tapping: what would $("#regBtn").click(...) do if it ran immediately, without the ready wrapper, and why?
Show the answer
It would run before the browser has parsed the body, so #regBtn does not exist yet: the selector matches NOTHING, the handler attaches to nothing, and the button stays dead: no error, just silence, which makes it a maddening bug. $(document).ready defers your code until the DOM is complete, so every element is findable. This is the same script-timing lesson BCA305-01 taught with scripts-at-the-end-of-body; ready is jQuery's cleaner spelling of it. The shorthand $(function(){...}) does the same job.
Watch out
Three first-week jQuery bugs
Missing prefix: $("regBtn") is a TAG selector; the id needs $("#regBtn"), the class needs the dot. Silent no-match, dead handler.
Forgetting the CDN line: without the script tag loading jQuery first, $ is undefined and the console says so; the library must load before your code.
blur vs change confusion: blur fires on EVERY exit from the field; change only when the value actually changed. Validation usually wants blur; reaction-to-edits wants change.
Theory
It is still your DOM underneath
Do not file jQuery as a new language: $("#regBtn").click(...) wraps the exact getElementById and addEventListener machinery you hand-wrote in BCA305-01; view-source on the loaded library and it is JavaScript all the way down. That mental model keeps you debuggable: when jQuery surprises you, reason about the DOM underneath. Next lesson the fest page starts moving: show, hide, fade and slide, plus the chaining the advantages list promised.
Summary
Key takeaways
- jQuery = a JavaScript library, loaded as one CDN file before your script.
- Advantages: write less do more, cross-browser, easy DOM/events/effects/AJAX, chaining.
- Core syntax: $(selector).action(); wrap code in $(document).ready(function(){...}).
- Selectors are CSS: tag $("p"), id $("#x"), class $(".y"), everything $("*").
- Six events: ready, click, keypress, focus, blur, change; $(this) is the firing element.
- Class selectors act on ALL matches at once: 20 cards, one line.
- Memory hook: dollar picks, dot acts, ready waits.