jQuery Manipulation methods: Get/Set methods (text(), attr(), html(), val())

📖 Theory

Seat Counter को Live रहना ज़रूरी है

Garba Night का card Seats left: 350 दिखाता है। एक registration आती है; page को अब बिना reload 349 कहना ज़रूरी है।

इसका मतलब है आपके script को एक element अभी क्या hold करता है यह read करना, compute करना, और इसे वापस write करना ज़रूरी है। Register link की destination के लिए भी वही, और search box की typed value के लिए भी।

jQuery इस सब को 4 methods से cover करता है जो एक elegant trick share करते हैं: हर एक READER AND WRITER दोनों है, इस पर depend करते हुए आप इसे कैसे call करते हैं।

✏️ Formula

Overload Rule

कोई Argument नहीं = GET। Argument = SET।

$("#seats").text() text पढ़ता है।

$("#seats").text("349") इसे लिखता है।

एक नाम, 2 jobs, brackets के contents से decided। इस lesson के सारे 4 methods इसे follow करते हैं, और जब एक SET multi-element selection पर run होता है, यह हर matched element को एक साथ लिखता है।

📊 At a glance

4 Get/Set Methods

⌨️ Practical

Counter नीचे Tick करता है (Complete Page)

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $(document).ready(function() {
      $("#bookBtn").click(function() {
        var seats = parseInt($("#seats").text());   // GET, then convert
        if (seats > 0) {
          $("#seats").text(seats - 1);              // SET plain text
        }
        if (seats - 1 === 0) {
          $("#status").html("<b>House Full!</b>");  // SET rendered markup
          $("#regLink").attr("href", "waitlist.html"); // SET attribute
        }
        alert("Booked for: " + $("#name").val());   // GET form value
      });
    });
  </script>
</head>
<body>
  <p>Seats left: <span id="seats">350</span></p>
  <p id="status">Open</p>
  <input id="name" placeholder="Your name">
  <button id="bookBtn">Book</button>
  <a id="regLink" href="register.html">Register</a>
</body>
</html>

This example runs in Gri-Learn on the web, where you can edit it and see the output.

📖 Theory

text बनाम html: Teeth वाली Distinction

दोनों content लिखते हैं; फ़र्क यह है string में tags का क्या होता है:

$("#status").html("<b>Full!</b>") Full! bold में render करता है: browser markup parse करता है।

$("#status").text("<b>Full!</b>") 7 characters <b>Full!</b> literally display करता है: tags visible text बन जाते हैं।

कौन सा इस्तेमाल करें? आपके अपने markup के लिए, html()। USER ने जो भी typed किया (names, comments), हमेशा text(): यह markup या scripts आपके page में inject होने के लिए trick नहीं हो सकता। उस safety habit का एक security नाम है जिससे आप बाद में मिलेंगे; अभी इसे build कीजिए।

एक और read: $("#seats").text() एक String return करता है; arithmetic को पहले parseInt चाहिए, जैसा listing करती है।

🧩 Quiz

$("#status").text("<b>House Full!</b>") Visitor #status के अंदर क्या देखता है?

1. House Full! bold letters में
2. Literal characters <b>House Full!</b>, screen पर tags visible
3. House Full! normal weight में: tags चुपचाप remove हो जाते हैं
4. कुछ नहीं: text() tags वाली strings reject करता है

💭 Think first

वह Get जो अलग Behave करता है

तीन event cards $(".eventName") match करते हैं। $(".eventName").html() और $(".eventName").text() क्या return करते हैं compare कीजिए। 4 methods में से एक multi-element GETS पर odd one out है: कौन सा, और कैसे?

⚠️ Watch out

तीन Manipulation Bugs

एक Get पर Arithmetic: text() और val() Strings return करते हैं; "350" - 1 luck से काम करता है पर "350" + 1 "3501" है। हर बार पहले parseInt कीजिए (BCA404 का InputBox lesson यहाँ rhyme करता है)।

User Input के साथ html(): एक visitor का आपके page में html() set के ज़रिए markup type करना एक real attack surface है; user content के लिए text() non-negotiable है।

Fields पर val() बनाम text(): एक input की typed content इसकी VALUE है; $("#name").text() इसका (empty) element content पढ़ता है और कुछ useful return नहीं करता।

📖 Theory

Read-Modify-Write पूरा Pattern है

Seat counter dynamic UI work के आधे हिस्से का template है: current state GET कीजिए, plain JavaScript में compute कीजिए, नई state SET कीजिए: 3 lines, कोई भी widget। Unit 4 में जब AJAX responses आएँगे तो आप इसे verbatim reuse करेंगे (server data इन्हीं setters के ज़रिए land करता है: responseText html() में pour हो जाता है)। अगला lesson खुद page को grow करता है: append, prepend, before और after: existing elements edit करने के बजाय बिल्कुल नए elements add करना।

✅ Summary

Key takeaways

• एक overload rule: कोई argument नहीं तो get, एक argument तो set (sets सारे matches पर apply होते हैं)।
• text() = plain text (sets tags literally दिखाते हैं; multi-get सारे matches का COMBINED text return करता है)।
• html() = markup (sets tags render करते हैं; get पहला match पढ़ता है)।
• val() = form-field values; attr("name") / attr("name", v) = attributes।
• Gets Strings return करते हैं: arithmetic से पहले parseInt कीजिए।
• User-typed content text() से set होता है, html() से कभी नहीं: कोई markup injection नहीं।
• Memory hook: empty brackets पूछते हैं, full brackets बताते हैं।