জেকুয়েরি - এইচটিএমএল কন্টেন্ট এবং এট্রিবিউট সেট

text(), html() এবং val() মেথড

এইচটিএমএল এলিমেন্টে কন্টেন্ট সেট করার জন্য পূর্বের পেজের ন্যায় এই পেজেও আমরা একই মেথড ব্যবহার করবো।

text() - নির্বাচিত এলিমেন্টের টেক্সট কন্টেন্ট সেট/রিটার্ন করে।
html()-নির্বাচিত এলিমেন্টের মার্কআপসহ কন্টেন্ট সেট/রিটার্ন করে।
val() - নির্বাচিত ফর্ম এলিমেন্টের ভ্যালু সেট/রিটার্ন করে।

নিচের উদাহরণে text(), html() এবং val() মেথডের মাধ্যমে কিভাবে এইচটিএমএল এলিমেন্টের কন্টেন্ট সেট করা যায় তা দেখানো হয়েছেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>জেকুয়েরি উদাহরণ</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script>
  $(document).ready(function(){
    $("#btn-text").click(function(){
      $(".paragraph1").text("হ্যালো বাংলাদেশ!");
    });
    $("#btn-html").click(function(){
      $(".paragraph2").html("<b>হ্যালো শিক্ষার্থী!!</b>");
    });
    $("#btn-input").click(function(){
      $("input").val("Zehadul Islam");
    });
  });
  </script>
</head>
<body>

  <p class="paragraph1">এটি সাধারণ একটি প্যারাগ্রাফ</p>
  <p class="paragraph2">এটিও একটি সাধারণ প্যারাগ্রাফ।</p>
  <p>Name: <input type="text" value="Saleh Ahmad"></p>
  
  <button id="btn-text">টেক্সট সেট করুন</button>
  <button id="btn-html">এইচটিএমএল সেট করুন</button>
  <button id="btn-input">ভ্যালু সেট করুন</button>

</body>
</html>

ফলাফল

text(), html(), এবং val() মেথডের ক্ষেত্রে কলব্যাক ফাংশন

উপরের তিনটি জেকুয়েরি মেথড text(), html() এবং val() এর ক্ষেত্রেই কলব্যাক ফাংশন ব্যবহার করা যায়। কলব্যাক ফাংশনে দুটি প্যারামিটার থাকে। যথাঃ

নির্বাচিত(Selected) এলিমেন্টগুলোর মধ্যে চলমান এলিমেন্টের ইনডেক্স।
এবং আসল (পুরানো) ভ্যালু।

তারপর আপনি ইচ্ছা করলে ফাংশনে নতুন ভ্যালু হিসাবে যে স্ট্রিং ব্যবহার করেছিলেন তা রিটার্ণ করতে পারবেন।

নিচের উদাহরনে কলব্যাক ফাংশনসহ text() এবং html() মেথড দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>জেকুয়েরি উদাহরণ</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script>
  $(document).ready(function(){
    $("#textset").click(function(){
      $("#para1").text(function(i, origText){
        return "আগের টেক্সট: " + origText + " নতুন টেক্সট: স্যাট একাডেমি! (index: " + i + ")";
      });
    });
    $("#htmlset").click(function(){
      $("#para2").html(function(i, origText){
        return "আগের এইচটিএমএল: " + origText + " নতুন এইচটিএমএল: <b>স্যাট একাডেমি!</b> (index: " + i + ")";
      });
    });
  });
  </script>
</head>
<body>

  <p id="para1">এটি একটি <b>বোল্ড</b> প্যারাগ্রাফ।</p>
  <p id="para2">এটি অন্য একটি <b>বোল্ড</b> প্যারাগ্রাফ।</p>

  <button id="textset">নতুন/পুরাতন টেক্সট প্রদর্শন</button>
  <button id="htmlset">নতুন/পুরাতন এইচটিএমএল প্রদর্শন</button>

</body>
</html>

ফলাফল

attr() মেথড এর মাধ্যমে এট্রিবিউট সেট

জেকুয়েরি attr() মেথড এট্রিবিউটের ভ্যালু নির্ধারন/পরিবর্তন করে।

নিচের উদাহরণে দেখানো হয়েছে কিভাবে একটি লিংকের href এট্রিবিউটের ভ্যালু পরিবর্তন (সেট) করা যায়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>জেকুয়েরি উদাহরণ</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script>
  $(document).ready(function(){
    $("button").click(function(){
      $("a").attr("href", "www.facebook.com/sattacademy");
    });
  });
  </script>
</head>
<body>

  <p><a href="https://www.sattacademy.com" target="_blank">Satt Academy</a></p>
  <button>href এর ভ্যালু চেঞ্জ করুন</button>

</body>
</html>

বিঃদ্রঃ পরিবর্তন বুঝার জন্য বাটনে ক্লিক করার পূর্বে লিংকে ক্লিক করুন। তারপর আবার বাটনে ক্লিক করুন এবং পূনরায় লিংকে ক্লিক করুন।

ফলাফল

attr() মেথডের মাধ্যমে একই সময় একাধিক এট্রিবিউট সেট করা যায়।

নিচের উদাহরনে দেখানো হয়ছে কিভাবে একই সাথে href এবং target এট্রিবিউটের ভ্যালু সেট করা যায়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>জেকুয়েরি উদাহরণ</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script>
  $(document).ready(function(){
    $("button").click(function(){
      $("#satt").attr({
        "href" : "https://www.sattacademy.com",
        "target" : "_blank"
      });
    });
  });
  </script>
</head>
<body>

  <p><a href="https://www.sattacademy.com/jquery/index.php" target="_self">Satt Academy Jquery</a></p>
  <button>href এবং target এর ভ্যালু চেঞ্জ করুন!</button>

</body>
</html>

ফলাফল

জেকুয়েরি এইচটিএমএল রেফারেন্স

জেকুয়েরি এইচটিএমএল মেথডের সম্পূর্ণ রেফারেন্সের জন্য আমাদের জেকুয়েরি এইচটিএমএল/সিএসএস রেফারেন্স পেজে ভিজিট করুন।

« পূর্ববর্তী

পরবর্তী »

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য

জেকুয়েরি টিউটোরিয়াল

জেকুয়েরি ইফেক্ট