Theory
चार Lines एक बन जाती हैं
BCA305-01 में आपने FestConnect का schedule panel honest तरीके से hide किया था:
document.getElementById("schedule").style.display = "none";
एक element, एक property, ceremony की एक line। अब committee search highlighting, dropdown reactions, 20 cards पर click handlers चाहती है...
jQuery में same job:
$("#schedule").hide();
नीचे same DOM, typing का एक fraction। jQuery का slogan इसका पूरा sales pitch है: write less, do more।
Theory
jQuery क्या है, और Teams ने इसे क्यों Adopt किया
jQuery एक JavaScript library है: pre-written functions की एक .js file, आपके script से पहले loaded, usually एक CDN से:
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
Exam जो advantages list करता है:
- write less, do more: one-line DOM work
- cross-browser: jQuery आपके नीचे browser differences iron out करता है
- DOM manipulation, events, effects और AJAX simplify करता है (Units 2 और 4 यहीं रहते हैं)
- chaining: एक selection पर कई actions string कीजिए
- huge ecosystem, gentle learning curve
Formula
Unit को Rule करने वाली एक Syntax
$(selector).action();
- $ jQuery में enter करता है
- (selector) elements पिक करता है, CSS-style
- .action() picked हर element पर कुछ करता है
और इसके इर्द-गिर्द standard wrapper:
$(document).ready(function() { ... });
अंदर सब कुछ सिर्फ़ तभी run होता है जब page का DOM पूरी तरह built हो जाए। इस unit का हर jQuery example यह shell assume करता है।
At a glance
Selectors: CSS Knowledge, Reused
| Selector | क्या Pick करता है | FestConnect Use |
|---|---|---|
| $("p") | हर <p> element | सारे description paragraphs |
| $("#regBtn") | उस id वाला ONE element | Register button |
| $(".eventCard") | उस class वाला हर element | सारे 20 event cards |
| $("*") | Page पर सब कुछ | Rare: bulk resets |
| $("p:first"), $("[href]") | पहला <p>; href वाली कोई भी चीज़ | Refinements |
Practical
FestConnect जागता है (एक 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
6 Syllabus Events
| Event | कब Fire होता है |
|---|---|
| ready | DOM पूरी तरह parsed है (page structure exist करता है) |
| click | Element click होता है |
| keypress | इसमें type करते हुए एक character key press होती है |
| focus | Field enter होती है (cursor पहुँचता है) |
| blur | Field left होती है (cursor जाता है) |
| change | Value बदल गई: selects instantly, text inputs edit के बाद leave करने पर |
Quiz
$(".eventCard") क्या select करता है?
- वह single element जिसका id eventCard है
- वह हर element जिसके class attribute में eventCard शामिल है
- Page पर हर <eventCard> tag
- कुछ नहीं: jQuery selectors dots इस्तेमाल नहीं कर सकते
Show the answer
वह हर element जिसके class attribute में eventCard शामिल है
Dot prefix CSS का class notation है, और jQuery ने CSS selectors पूरी तरह adopt किए: सारे 20 fest cards एक साथ pick होते हैं, और कोई भी .action() इनमें से हर एक पर apply होता है: यह all-at-once behaviour write-less-do-more का आधा हिस्सा है। Option A $("#eventCard") describe करता है, hash/id form: dot-vs-hash mix-up इस unit का सबसे common bug है। Option C bare $("eventCard") होता, एक tag selector जो एक ऐसा tag ढूँढ रहा है जो exist नहीं करता। आपकी BCA305-01 CSS knowledge को यह answer पहले से पता था।
Think first
सब कुछ Ready में क्यों Wrap करें?
Script <head> में बैठा है, body के ऊपर। Tap करने से पहले: अगर $("#regBtn").click(...) ready wrapper के बिना immediately run होता तो क्या होता, और क्यों?
Show the answer
यह browser के body parse करने से पहले run होता, तो #regBtn अभी exist नहीं करता: selector कुछ भी MATCH नहीं करता, handler किसी चीज़ से attach नहीं होता, और button dead रहता है: कोई error नहीं, बस silence, जो इसे एक maddening bug बनाता है। $(document).ready आपके code को तब तक defer करता है जब तक DOM complete न हो, तो हर element findable है। यही वह script-timing lesson है जो BCA305-01 ने scripts-at-the-end-of-body से सिखाया था; ready इसकी cleaner jQuery spelling है। Shorthand $(function(){...}) same काम करता है।
Watch out
पहले Week के तीन jQuery Bugs
Missing Prefix: $("regBtn") एक TAG selector है; id को $("#regBtn") चाहिए, class को dot चाहिए। Silent no-match, dead handler।
CDN Line भूल जाना: पहले jQuery load करने वाली script tag के बिना, $ undefined है और console यही कहता है; library को आपके code से पहले load होना ज़रूरी है।
blur बनाम change Confusion: blur field से हर EXIT पर fire होता है; change सिर्फ़ तभी जब value असल में बदली हो। Validation usually blur चाहती है; edits का reaction change चाहता है।
Theory
नीचे अभी भी आपका DOM है
jQuery को एक नई language की तरह file मत कीजिए: $("#regBtn").click(...) exact getElementById और addEventListener machinery wrap करता है जो आपने BCA305-01 में hand-written किया था; loaded library पर view-source कीजिए और यह पूरी तरह JavaScript है। वह mental model आपको debuggable रखता है: जब jQuery आपको surprise करे, नीचे के DOM के बारे में reason कीजिए। अगला lesson fest page move करना शुरू करता है: show, hide, fade और slide, plus वह chaining जो advantages list ने promise किया था।
Summary
Key takeaways
- jQuery = एक JavaScript library, आपके script से पहले एक CDN file की तरह loaded।
- Advantages: write less do more, cross-browser, आसान DOM/events/effects/AJAX, chaining।
- Core syntax: $(selector).action(); code को $(document).ready(function(){...}) में wrap कीजिए।
- Selectors CSS हैं: tag $("p"), id $("#x"), class $(".y"), सब कुछ $("*")।
- छह events: ready, click, keypress, focus, blur, change; $(this) fire करने वाला element है।
- Class selectors एक साथ सारे matches पर act करते हैं: 20 cards, एक line।
- Memory hook: dollar pick करता है, dot act करता है, ready wait करता है।