Theory
Style अब एक Runtime Decision है
तीन fest events अभी sold out हुए हैं। इनके cards तुरंत grey होने चाहिए, हर open browser में: पर कौन से 3 cards यह सिर्फ़ runtime पर, booking data से पता चलता है।
आपकी BCA305-01 stylesheet यहाँ help नहीं कर सकती: CSS files किसी के कुछ भी book करने से पहले लिखी जाती हैं। Page को elements को script से, live conditions के आधार पर style करना ज़रूरी है।
jQuery का script और stylesheet के बीच bridge एक method है, css(), और आप इसकी grammar text() और val() से पहले से जानते हैं।
Formula
तीन Call Shapes
Get (FIRST match से):
$("#garba").css("background-color")
Set One (ALL matches पर):
$(".soldout").css("background-color", "grey")
Set Many (object form):
$(".soldout").css({"background-color": "grey", "opacity": "0.6"})
Property names quoted CSS-style ("font-size") या camelCase (fontSize) जाते हैं; दोनों same property address करते हैं।
Practical
Sold-Out Cards को Grey करना (Complete Page)
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
.card { background-color: white; padding: 8px; }
</style>
<script>
$(document).ready(function() {
$("#soldBtn").click(function() {
$(".soldout").css({ // object form: several at once
"background-color": "#dddddd",
"opacity": "0.6",
"font-style": "italic"
});
alert($("#garba").css("background-color")); // GET: first match
});
});
</script>
</head>
<body>
<button id="soldBtn">Mark sold out</button>
<ul>
<li id="garba" class="card soldout">Garba Night</li>
<li class="card">Coding Contest</li>
<li class="card soldout">Robo Race</li>
</ul>
</body>
</html>
This example runs in Gri-Learn on the web, where you can edit it and see the output.
Theory
एक Get असल में क्या Return करता है
Listing का alert run कीजिए और यह "#dddddd" नहीं कहता। यह कुछ ऐसा कहता है rgb(221, 221, 221)।
एक css() get computed value return करता है: stylesheets, inline styles और defaults सब argue कर चुकने के बाद browser का final, normalised answer। Colours rgb() form में normalise होते हैं, ज़्यादातर lengths px में, चाहे stylesheet ने जो भी notation इस्तेमाल किया हो।
तो computed values को computed forms के against compare कीजिए, उस hex string के against नहीं जो आपने लिखी: === "#dddddd" चुपचाप कभी match नहीं करता, और यह एक favourite spot-the-bug snippet है।
Quiz
$(".soldout").css("background-color", "grey") 3 matched cards के साथ run होता है। क्या होता है?
- सिर्फ़ पहला matched card grey होता है
- सारे 3 matched cards grey होते हैं: sets हर match पर apply होते हैं
- कुछ नहीं: colours के लिए css() को object form चाहिए
- Stylesheet का .card rule change को block करता है
Show the answer
सारे 3 matched cards grey होते हैं: sets हर match पर apply होते हैं
Unit का overload rule आख़िर तक holds करता है: एक SET selector द्वारा matched हर element पर apply होता है, तो सारे 3 sold-out cards एक line में साथ grey होते हैं। First-match-only behaviour (option A) GETS का है, और उस asymmetry को straight रखना exactly वह है जो यह question check करता है। Option C एक restriction invent करता है: 2-argument form कोई भी single property handle करता है। Option D का precedence उल्टा है: css() INLINE styles लिखता है, जो stylesheet rules से outrank करते हैं, तो .card background यह argument हार जाता है।
Think first
Inline Styles जीतते हैं: Blessing और Curse
Stylesheet कहती है .card { background-color: white } फिर भी css() set cards को grey कर देता है। Tap करने से पहले: script का style क्यों जीतता है, और हर जगह इस तरह style करने की maintenance cost क्या है?
Show the answer
css() element के style attribute में लिखता है: inline styles, जो cascade में stylesheet rules से ऊपर बैठते हैं (सिर्फ़ !important इन्हें outrank करता है)। Blessing: आपका runtime decision reliably दिखता है। Curse: design decisions stylesheet से बाहर बिखरी हुई script lines में leak करते हैं, और कोई stylesheet edit बाद में इन्हें override नहीं कर सकता। Professional habit: CSS में एक .soldout-look class define कीजिए और इसे addClass/removeClass से toggle कीजिए; css() को genuinely runtime पर computed values के लिए रखिए (px में एक width, एक progress colour)। Exams उस trade-off को naming करने पर reward देते हैं।
Watch out
css() Slips
Gets को अपनी Notation से Compare करना: computed rgb() आपकी "#dddddd" string के कभी equal नहीं होता।
Object Form में Unquoted CSS-Style Names: {font-size: "18px"} एक JS syntax error है (hyphen minus की तरह पढ़ा जाता है); इसे quote कीजिए या camelCase कीजिए: fontSize।
Units भूल जाना: css("width", 200) jQuery से माफ़ हो जाता है (px assumed), पर कुछ contexts में css("width", "200") और plain CSS में नहीं: "200px" लिखिए और कभी wonder मत कीजिए।
Theory
Unit 2 बंद होती है: Page Alive है
आपकी jQuery kit का inventory: कुछ भी select कीजिए (CSS selectors), किसी भी चीज़ पर react कीजिए (6 events), चीज़ें move कीजिए (3 effect families, chained, callbacks के साथ), contents पढ़िए और लिखिए (text/html/val/attr), structure grow और demolish कीजिए (insert और remove families), और runtime पर style कीजिए (css)। FestConnect का front end पूरी तरह dynamic है। जो अभी भी नहीं है वह है बिना reload के fresh DATA: Unit 3 data को एक modern format (JSON) देती है, Unit 4 इसे live fetch करती है (AJAX), और आज के setters landing pad होंगे।
Summary
Key takeaways
- css("prop") FIRST match से computed value लेता है; colours rgb() की तरह वापस आते हैं, lengths px की तरह।
- css("prop", "value") ALL matches पर set करता है; css({...}) एक साथ कई properties set करता है।
- Property names: quoted CSS-style ("font-size") या camelCase (fontSize); hyphens वाली object keys को quote करना ज़रूरी है।
- Sets inline styles लिखते हैं, जो stylesheet rules को override करते हैं।
- Professional habit: looks के लिए classes toggle कीजिए, css() runtime-computed values के लिए reserve कीजिए।
- किसी get को अपनी notation से कभी compare मत कीजिए; computed forms से compare कीजिए।
- Memory hook: एक नाम पूछता है, name-plus-value सबको बताता है, object सब कुछ बताता है।