jQuery सामग्री और गुण सेट करना

सामग्री सेट करना - text()、html() और val()

हम वापसी चैप्टर में दिए गए तीन एक्सीक्यूट सामग्री की तीन समान विधियों का प्रयोग करेंगे:

  • text() - चयनित एलिमेंट के टेक्स्ट सामग्री को सेट करना या उसे वापस करना
  • html() - चयनित एलिमेंट के सामग्री को सेट करना या उसे वापस करना (HTML टैग सहित)
  • val() - फॉर्म फील्ड के मूल्य को सेट करना या उसे वापस करना

नीचे दिए गए उदाहरण में दिखाया गया है कि कैसे text()、html() और val() विधियों के द्वारा सामग्री को सेट किया जाता है:

उदाहरण

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});

स्वयं प्रयोग करें

text()、html() और val() के कॉलबैक फ़ंक्शन

उपरी तीन jQuery विधियाँ: text()、html() और val() भी कॉलबैक फ़ंक्शन हैं। कॉलबैक फ़ंक्शन दो पारामीटरों से बना है: चयनित एलिमेंट सूची में वर्तमान एलिमेंट का निर्देशक संख्या और मूल (पुराना) मूल्य। फिर फ़ंक्शन के नए मूल्य को रिटर्न करें आप जो चाहते हैं तथा इसे स्ट्रिंग के रूप में प्रयोग करें।

नीचे दिए गए उदाहरण में text() और html() को कॉलबैक फ़ंक्शन के साथ प्रदर्शित किया गया है:

उदाहरण

$("#btn1").click(function(){
  $("#test1").text(function(i,origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
  });
});
$("#btn2").click(function(){
  $("#test2").html(function(i,origText){
    return "Old html: " + origText + " New html: Hello <b>world!</b>
    (index: " + i + ")";
  });
});

स्वयं प्रयोग करें

एट्रिब्यूट सेट करें - attr()

jQuery attr() विधा एट्रिब्यूट के मान को सेट/बदलने के लिए भी उपयोग की जाती है。

नीचे दिए गए उदाहरण में लिंक में href एट्रिब्यूट के मान को बदलने (सेट) के लिए दिखाया गया है:

उदाहरण

$("button").click(function(){
  $("#w3s").attr("href","http://www.codew3c.com/jquery");
});

स्वयं प्रयोग करें

attr() विधा एक साथ कई एट्रिब्यूट सेट करने की भी अनुमति देती है。

नीचे दिए गए उदाहरण में href और title एट्रिब्यूट को साथ-साथ सेट करने के लिए दिखाया गया है:

उदाहरण

$("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.codew3c.com/jquery",
    "title" : "CodeW3C.com jQuery Tutorial"
  });
});

स्वयं प्रयोग करें

attr() कॉलबैक फ़ंक्शन

jQuery विधा attr() भी कॉलबैक फ़ंक्शन प्रदान करती है। कॉलबैक फ़ंक्शन दो पारामीटरों के साथ आता है: चयनित एलिमेंट सूची में वर्तमान एलिमेंट के संख्या और मूल (पुराना) मान। फिर आपके द्वारा यह फ़ंक्शन के रूप में लिया गया वाक्यांश को नया मान लॉड करें।

नीचे दिए गए उदाहरण में attr() विधा को कॉलबैक फ़ंक्शन के साथ प्रदर्शित किया गया है:

उदाहरण

$("button").click(function(){
  $("#w3s").attr("href", function(i,origValue){
    return origValue + "/jquery";
  });
});

स्वयं प्रयोग करें

jQuery HTML संदर्भ पुस्तिका

यदि आप jQuery HTML विधियों के पूर्ण सामग्री के बारे में जानना चाहते हैं, तो नीचे दिए गए संदर्भ पुस्तिका को देखें: