Theory
Style હવે runtime decision છે
ત્રણ fest events just sold out થયા. તેમના cards ને grey થવું પડે, immediately, દરેક open browser માં: પણ કયા 3 cards છે તે ફક્ત runtime પર જ જાણી શકાય, booking data થી.
તમારું BCA305-01 stylesheet help નથી કરી શકતું: CSS files લખાય છે તે પહેલાં કોઈ book કરે છે. page ને elements ને style કરવાની જરૂર છે script થી, live conditions પર based.
jQuery નો bridge script અને stylesheet વચ્ચે એક method છે, css(), અને તમે તેની grammar ને text() અને val() થી already know કરો છો.
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 ને Greying (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 really શું returns કરે છે
listing નું alert run કરો અને તે "#dddddd" કહેતું નથી. તે કંઈક આવું કહે છે rgb(221, 221, 221).
css() get એ computed value ને returns કરે છે: browser નો final, normalised answer after stylesheets, inline styles અને defaults have all argued. Colours rgb() form માં normalise થાય છે, most lengths px માં, stylesheet એ કોઈ notation use કર્યું હોય તે.
તેથી computed values ને computed forms સાથે compare કરો, તમે જે hex string ને wrote તેની સાથે નહીં: === "#dddddd" silently never matches, અને એ favourite spot-the-bug snippet છે.
Quiz
$(".soldout").css("background-color", "grey") 3 matched cards સાથે runs કરે છે. શું થાય છે?
- ફક્ત first matched card grey થાય છે
- બધા 3 matched cards grey થાય છે: sets every match પર apply થાય છે
- Nothing: css() ને colours માટે object form ની જરૂર છે
- stylesheet નો .card rule change ને block કરે છે
Show the answer
બધા 3 matched cards grey થાય છે: sets every match પર apply થાય છે
unit નો overload rule end સુધી holds કરે છે: SET એ every element પર apply થાય છે જે selector matched કરે છે, તેથી બધા 3 sold-out cards grey together એક line માં. First-match-only behaviour (option A) GETS ને belongs કરે છે, અને તે asymmetry ને straight રાખવું એ exactly શું આ question check કરે છે. Option C restriction ને invent કરે છે: 2-argument form કોઈ પણ single property ને handle કરે છે. Option D precedence ને backwards કરે છે: css() INLINE styles ને writes કરે છે, જે stylesheet rules ને outrank કરે છે, તેથી .card background આ argument હારે છે.
Think first
Inline styles win: blessing અને curse
stylesheet કહે છે .card { background-color: white } પણ css() set cards ને grey કરે છે anyway. tap કરતા પહેલાં: WHY script નું style win કરે છે, અને શું છે maintenance cost આ રીતે everywhere styling કરવાનો?
Show the answer
css() element ના style attribute માં writes કરે છે: inline styles, જે cascade માં stylesheet rules ની ઉપર sits કરે છે (ફક્ત !important તેને outrank કરે છે). Blessing: તમારો runtime decision reliably shows. Curse: design decisions stylesheet માંથી scattered script lines માં leak થાય છે, અને કોઈ stylesheet edit તેમને પછી override નથી કરી શકતું. Professional habit: CSS માં .soldout-look class ને define કરો અને addClass/removeClass સાથે toggle કરો; css() ને genuinely runtime-computed values માટે reserve કરો (px માં width, progress colour). Exams તે trade-off ને naming કરવાને reward કરે છે.
Watch out
css() slips
gets ને તમારી notation સાથે Comparing કરવું: computed rgb() ક્યારેય તમારા "#dddddd" string ને equal નથી થતું.
Object form માં Unquoted CSS-style names: {font-size: "18px"} એ JS syntax error છે (hyphen minus તરીકે reads થાય છે); તેને quote કરો અથવા camelCase કરો: fontSize.
Units ને Forgetting કરવું: css("width", 200) ને jQuery forgive કરે છે (px assumed) પણ css("width", "200") કેટલાક contexts માં અને plain CSS ને નથી: "200px" write કરો અને ક્યારેય wonder ન કરો.
Theory
Unit 2 closes: page alive છે
તમારા jQuery kit નો inventory: anything select કરો (CSS selectors), anything પર react કરો (6 events), things move કરો (3 effect families, chained, callbacks સાથે), contents read અને write કરો (text/html/val/attr), structure grow અને demolish કરો (insert અને remove families), અને runtime પર style કરો (css). FestConnect નું front end fully dynamic છે. શું તેની પાસે હજુ નથી તે fresh DATA reload વગર: Unit 3 data ને modern format આપે છે (JSON), Unit 4 તેને live fetch કરે છે (AJAX), અને today ના setters landing pad હશે.
Summary
Key takeaways
- css("prop") computed value ને FIRST match થી gets કરે છે; colours rgb() તરીકે પાછા આવે છે, lengths px તરીકે.
- css("prop", "value") ALL matches પર sets કરે છે; css({...}) several properties ને એક સાથે sets કરે છે.
- Property names: quoted CSS-style ("font-size") અથવા camelCase (fontSize); hyphens વાળા object keys MUST be quoted.
- Sets inline styles ને writes કરે છે, જે stylesheet rules ને override કરે છે.
- Professional habit: looks માટે classes toggle કરો, css() ને runtime-computed values માટે reserve કરો.
- get ને તમારી own notation સાથે ક્યારેય compare ન કરો; computed forms સાથે compare કરો.
- Memory hook: એક name asks, name-plus-value everyone ને tells, object everything ને tells.