jQuery HTML பற்றிய முழுமையான அறிமுகம்

jQuery HTML பற்றிய முழுமையான அறிமுகம்

jQuery என்பது JavaScript நூலகம், இது HTML ஆவணங்களில் (Documents) நிரல்களை எளிதாக எழுத உதவுகிறது. jQuery-யின் HTML தொடர்பான செயல்பாடுகள், HTML கூறுகளை (Elements) மாற்றி, HTML உள்ளடக்கத்தை (Content) விரும்பியபடி உள்ளீடு (Input) செய்யவும் திருத்தவும் உதவுகின்றன.

jQuery HTML Method என்ன?

jQuery HTML Method மூலம் HTML-ல் உள்ள ஒரு குறிப்பிட்ட பகுதியின் (Element) உள்ளடக்கத்தை பெறவோ அல்லது அமைக்கவோ முடியும். இதன் மூலம் வேகமாக HTML கோப்புகளை கையாள முடியும்.

HTML Method ஐப் பயன்படுத்துவது எப்படி?

html(): ஒரு குறிப்பிட்ட HTML கூறின் உள்ளடக்கத்தை பெற முடியும்.
html(content): ஒரு குறிப்பிட்ட HTML கூறில் புதிய உள்ளடக்கத்தை அமைக்க முடியும்.

$(document).ready(function(){
  // Get HTML content
  var content = $("#myDiv").html();
  alert("Current HTML content: " + content);

  // Set HTML content
  $("#setBtn").click(function(){
    $("#myDiv").html("<p>New content added!</p>");
  });
});

முதல் Example: HTML-ஐ பெறுவது

var content = $("#myDiv").html();
alert("Current HTML content: " + content);

இந்த நிரலில், #myDiv என்ற ID கொண்ட பகுதிக்குள் உள்ள HTML-ஐ நாம் பெற முடியும். இந்த தகவலை, alert() மூலம் காண்பிக்கிறோம்.

இரண்டாவது Example: HTML-ஐ மாற்றுவது

$("#setBtn").click(function(){
  $("#myDiv").html("<p>New content added!</p>");
});

இங்கு, #setBtn என்ற பொத்தானை (Button) கிளிக் செய்தபின், #myDiv பகுதியின் உள்ளடக்கம் மாற்றப்பட்டு புதிய HTML கூற்று உள்ளீடு செய்யப்படும்.

jQuery-யில் மற்ற HTML Method கள்

text() Method

text() Method HTML கூறின் உரை (Text) உள்ளடக்கத்தை பெறவோ, அல்லது அமைக்கவோ பயன்படுத்தப்படுகிறது.

text(): உரையைப் பெறுகிறது.
text(content): உரையை அமைக்கிறது.

$(document).ready(function(){
  // Get text content
  var textContent = $("#myDiv").text();
  alert("Current text content: " + textContent);

  // Set text content
  $("#setTextBtn").click(function(){
    $("#myDiv").text("New text added!");
  });
});

val() Method

val() Method இன்புட் (Input) பகுதிகளின் (Fields) மதிப்பை (Value) பெறவோ, மாற்றவோ பயன்படுத்தப்படுகிறது.

val(): இன்புட் மதிப்பை பெறுகிறது.
val(value): இன்புட் மதிப்பை மாற்றுகிறது.

$(document).ready(function(){
  // Get input value
  var inputValue = $("#myInput").val();
  alert("Input value: " + inputValue);

  // Set input value
  $("#setValBtn").click(function(){
    $("#myInput").val("New value!");
  });
});

முழு நிரல் (Complete Code)

<!DOCTYPE html>
<html>
<head>
  <title>jQuery HTML Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      // Get HTML content
      var content = $("#myDiv").html();
      alert("Current HTML content: " + content);

      // Set HTML content
      $("#setBtn").click(function(){
        $("#myDiv").html("<p>New content added!</p>");
      });

      // Get and Set Text content
      var textContent = $("#myDiv").text();
      alert("Current text content: " + textContent);

      $("#setTextBtn").click(function(){
        $("#myDiv").text("New text added!");
      });

      // Get and Set Input value
      var inputValue = $("#myInput").val();
      alert("Input value: " + inputValue);

      $("#setValBtn").click(function(){
        $("#myInput").val("New value!");
      });
    });
  </script>
</head>
<body>

<h1>jQuery HTML Example</h1>

<div id="myDiv"><p>This is the original content.</p></div>
<button id="setBtn">Set HTML Content</button>
<button id="setTextBtn">Set Text Content</button>

<br><br>

<input type="text" id="myInput" value="Original value">
<button id="setValBtn">Set Input Value</button>

</body>
</html>

HTML மற்றும் Text ஐ மாற்றுவது எப்போது பயன்படுத்த வேண்டும்?

HTML Method: குறிப்பிட்ட பகுதிகளின் HTML கட்டமைப்பை (Structure) மற்றும் அதனுடன் இருக்கும் உரையை மாற்ற/அமைக்க பயன்படுத்தலாம்.
text Method: HTML-ஐ நேரடியாக மாற்றாமல், சாதாரண உரை மட்டுமே பயன்படுத்தும் இடங்களில் இது உகந்தது.
val Method: இன்புட் (Input) மற்றும் படிவப் புலங்கள் (Form Fields) போன்றவற்றின் மதிப்புகளை மாற்ற பயன்படுத்தலாம்.

முடிவு

jQuery-யில் html(), text(), மற்றும் val() போன்ற HTML Method களைப் பயன்படுத்தி, உங்கள் வலைப்பக்கத்தின் உள்ளடக்கத்தை எளிதாக மாற்றி அமைக்கலாம். இதன் மூலம் பயனர்களின் செயற்பாடுகளை நெகிழ்வாக (Dynamic) உருவாக்கலாம்.