Introduction and basics: advantage of jQuery and syntax; jQuery Selectors; jQuery Events (ready(), click(), keypress(), focus(), blur(), change())

📖 Theory

ચાર lines એક બને છે

BCA305-01 માં તમે FestConnect નું schedule panel ને honest way થી 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 એ તેનો entire 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>

Advantages જે exam lists કરે છે:

• write less, do more: one-line DOM work
• cross-browser: jQuery browser differences ને તમારી નીચે iron out કરે છે
• DOM manipulation, events, effects અને AJAX ને simplify કરે છે (Units 2 અને 4 અહીં live કરે છે)
• chaining: એક selection પર several actions ને string કરો
• huge ecosystem, gentle learning curve

✏️ Formula

unit ને rule કરતી એક syntax

$(selector).action();

• $ jQuery માં enters કરે છે
• (selector) elements ને picks કરે છે, CSS-style
• .action() દરેક element પર something કરે છે જે picked

અને તેની આસપાસ નો standard wrapper:

$(document).ready(function() { ... });

અંદરનું બધું ચાલે છે ફક્ત ત્યારે જ્યારે page નો DOM fully built થાય છે. આ unit નો દરેક jQuery example આ shell ને assume કરે છે.

📊 At a glance

Selectors: CSS knowledge, reused

⌨️ Practical

FestConnect wake 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

6 syllabus events

🧩 Quiz

$(".eventCard") શું select કરે છે?

1. એક element જેની id eventCard છે
2. દરેક element જેની class attribute માં eventCard છે
3. page પર દરેક <eventCard> tag
4. Nothing: jQuery selectors dots ને use નથી કરી શકતા

💭 Think first

શા માટે બધું ready માં wrap કરવું?

script <head> માં sits કરે છે, body ની ઉપર. tap કરતા પહેલાં: શું $("#regBtn").click(...) કરે જો તે immediately run થાય, ready wrapper વગર, અને શા માટે?

⚠️ Watch out

ત્રણ first-week jQuery bugs

Missing prefix: $("regBtn") એ TAG selector છે; id ને $("#regBtn") ની જરૂર છે, class ને dot ની જરૂર છે. Silent no-match, dead handler.

CDN line ને Forgetting કરવું: jQuery ને load કરતા script tag વગર first, $ undefined છે અને console તે કહે છે; library તમારા code પહેલાં load થવી જોઈએ.

blur vs change confusion: blur દરેક exit પર fires થાય છે field માંથી; change ફક્ત જ્યારે value actually changed થાય છે. Validation usually blur ને wants છે; reaction-to-edits change ને wants છે.

📖 Theory

તે હજુ તમારો DOM છે underneath

jQuery ને new language તરીકે file ન કરો: $("#regBtn").click(...) exact getElementById અને addEventListener machinery ને wrap કરે છે જે તમે BCA305-01 માં hand-wrote કર્યું; loaded library પર view-source કરો અને તે JavaScript છે all the way down. તે mental model તમને debuggable રાખે છે: જ્યારે jQuery તમને surprise કરે, DOM ને reason કરો underneath. next lesson fest page move થવાનું શરૂ કરે છે: show, hide, fade અને slide, plus chaining જે advantages list promise કર્યું.

✅ Summary

Key takeaways

• jQuery = JavaScript library, એક CDN file તરીકે loaded તમારા script પહેલાં.
• Advantages: write less do more, cross-browser, easy DOM/events/effects/AJAX, chaining.
• Core syntax: $(selector).action(); code ને $(document).ready(function(){...}) માં wrap કરો.
• Selectors એ CSS છે: tag $("p"), id $("#x"), class $(".y"), everything $("*").
• છ events: ready, click, keypress, focus, blur, change; $(this) એ firing element છે.
• Class selectors બધા matches પર act કરે છે એક સાથે: 20 cards, એક line.
• Memory hook: dollar picks, dot acts, ready waits.