jQuery Selectors பற்றி அறிந்து கொள்ளுங்கள்

jQuery Selectors பற்றி அறிந்து கொள்ளுங்கள்

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

jQuery Selector என்றால் என்ன?

jQuery Selector கள் HTML ஆவணத்தில் இருந்து குறிப்பிட்ட பகுதியை (Element) அல்லது பல பகுதிகளை (Multiple Elements) தேர்வு செய்ய உதவுகிறது. இது CSS Selector வாக்கியங்களைப் போலவே செயல்படுகின்றது.

jQuery Selector-ஐ எப்படி எழுதுவது?

jQuery Selectors ஐ எழுத எளிதான வழி இதுதான்:

$("selector")

$(): இது jQuery ஐ அறிமுகப்படுத்துகிறது.
selector: இது HTML பகுதிகளை தேர்வு செய்யும் CSS Selector ஆகும்.

jQuery Selectors வகைகள்

அடிப்படை Selectors (Basic Selectors)
அறிவியல் Selectors (Attribute Selectors)
குழந்தை மற்றும் உறவினர் Selectors (Child and Sibling Selectors)

1. அடிப்படை Selectors

அடிப்படை Selectors என்றால், HTML ஆவணத்தில் உள்ள பகுதிகளை தங்கள் பெயர், வகுப்பு, அல்லது ஐடி அடிப்படையில் தேர்வு செய்ய உதவும் Selector ஆகும்.

ஐடி (ID) Selector
HTML பகுதியின் ஐடியை (ID) அடிப்படையாகக் கொண்டு பகுதியை தேர்வு செய்யும் Selector.

  $("#myId")

இங்கு #myId என்பது ID Selector ஆகும், இது id="myId" கொண்ட HTML பகுதியை தேர்வு செய்கிறது.

வகுப்பு (Class) Selector
HTML பகுதியின் வகுப்பை (Class) அடிப்படையாகக் கொண்டு பகுதியை தேர்வு செய்யும் Selector.

  $(".myClass")

இங்கு .myClass என்பது Class Selector ஆகும், இது class="myClass" கொண்ட அனைத்து பகுதிகளையும் தேர்வு செய்கிறது.

எல்லா Selector
HTML ஆவணத்தின் உள்ளிருக்கும் அனைத்து பகுதிகளையும் (All Elements) தேர்வு செய்ய இந்த Selector பயன்படுத்தலாம்.

  $("*")

2. அறிவியல் Selectors (Attribute Selectors)

Attribute Selectors மூலம் HTML பகுதியின் சிறப்பம்சங்களை அடிப்படையாகக் கொண்டு பகுதியை தேர்வு செய்யலாம்.

குறிப்பிட்ட Attribute கொண்ட பகுதியை தேர்வு செய்தல்

  $("input[type='text']")

இங்கு input பகுதியின் type என்பது 'text' என்ற Attribute கொண்ட பகுதிகளை தேர்வு செய்கிறது.

3. குழந்தை மற்றும் உறவினர் Selectors

First Child Selector
HTML பகுதியின் முதல் குழந்தையை (First Child) தேர்வு செய்ய.

  $("ul li:first-child")

Sibling Selector
குறிப்பிட்ட பகுதியின் அடுத்த உறவினரை (Next Sibling) தேர்வு செய்ய.

  $("h2 + p")

இங்கு h2 பகுதியின் அடுத்துள்ள p பகுதியை தேர்வு செய்கிறது.

முழுமையான jQuery Selector Example

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Selectors Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      // ID Selector
      $("#myId").css("color", "red");

      // Class Selector
      $(".myClass").css("background-color", "yellow");

      // Attribute Selector
      $("input[type='text']").val("New Value");

      // First Child Selector
      $("ul li:first-child").css("font-weight", "bold");
    });
  </script>
</head>
<body>

<h1 id="myId">This is a Heading</h1>
<p class="myClass">This is a paragraph with class 'myClass'.</p>

<ul>
  <li>First Item</li>
  <li>Second Item</li>
</ul>

<input type="text" value="Hello">

</body>
</html>

முடிவு

jQuery Selectors மூலம் HTML ஆவணங்களில் உள்ள பகுதிகளை எளிதாக தேர்வு செய்து மாற்ற முடியும். இது JavaScript-ஐ எளிமையாகவும் விரைவாகவும் செயல்படுத்த உதவுகிறது.