close

jQuery உடன் DOM கையாளுதல்- நுட்பங்கள் மற்றும் எடுத்துக்காட்டுகள்

JQuery உடனான DOM கையாளுதல் DOM கட்டமைப்பை இலக்காகக் கொண்டு வலைப்பக்கத்தில் தரவை மாற்ற, சேர்க்க, நீக்க அல்லது தொடர்பு கொள்ள உங்களை அனுமதிக்கிறது. jQuery DOM கையாளுதல் பணிகளைச் செய்ய வசதியான முறைகள் மற்றும் செயல்பாடுகளை வழங்குகிறது.

குறிப்பிட்ட எடுத்துக்காட்டுகளுடன் ஒவ்வொரு பகுதிக்கும் விளக்கங்கள் இங்கே:

 

கூறுகளைத் தேர்ந்தெடுப்பது

  • $("p"): <p> பக்கத்தில் உள்ள அனைத்து கூறுகளையும் தேர்ந்தெடுக்கவும்.
  • $(".myClass"): வகுப்பில் உள்ள அனைத்து கூறுகளையும் தேர்ந்தெடுக்கவும் myClass.
  • $("#myElement"): ஐடியுடன் உறுப்பைத் தேர்ந்தெடுக்கவும் myElement.
  • $("parentElement").find(".childElement"): வகுப்பில் உள்ள அனைத்து குழந்தை கூறுகளையும் childElement தேர்ந்தெடுக்கவும் parentElement.

உதாரணமாக:

$("p").css("color", "red");

 

உள்ளடக்கத்தை மாற்றுகிறது

  • $("#myElement").html("<b>Hello World</b>"): ஐடியுடன் உறுப்புக்கான HTML உள்ளடக்கத்தை அமைக்கவும் myElement.
  • $("p").text("New text"): அனைத்து உறுப்புகளுக்கும் உரை உள்ளடக்கத்தை அமைக்கவும் <p>.

உதாரணமாக:

$("p").text("New paragraph");

 

கூறுகளைச் சேர்த்தல் மற்றும் நீக்குதல்

  • $("ul").append("<li>New item</li>") <li>: வரிசைப்படுத்தப்படாத பட்டியலின் முடிவில் ஒரு உறுப்பைச் சேர்க்கவும்( <ul>).
  • $(".myClass").remove(): வகுப்பில் உள்ள அனைத்து கூறுகளையும் myClass பக்கத்திலிருந்து அகற்றவும்.

உதாரணமாக:

$("ul").append("<li>Item 4</li>");

 

பண்புகளையும் வகுப்புகளையும் மாற்றுதல்

  • $("img").attr("src", "new-image.jpg") src: அனைத்து உறுப்புகளுக்கும் பண்புக்கூறு மதிப்பை மாற்றவும் <img>.
  • $("#myElement").addClass("newClass") newClass: ஐடியுடன் உறுப்பில் வகுப்பைச் சேர்க்கவும் myElement.
  • $("#myElement").removeClass("oldClass") oldClass: ஐடியுடன் உள்ள உறுப்பிலிருந்து வகுப்பை அகற்று myElement.

உதாரணமாக:

$("img").attr("alt", "New Image");

 

நிகழ்வு கையாளுதல்

$("button").click(function() { }): ஒரு <button> உறுப்பைக் கிளிக் செய்யும் போது, ​​நிகழ்வு ஹேண்ட்லர் செயல்பாட்டைப் பதிவு செய்யவும்.

உதாரணமாக:

$("button").click(function() {  
  alert("Button clicked!");  
});

 

விளைவுகள் மற்றும் அனிமேஷன்கள்

  • $("#myElement").hide(): ஐடியுடன் உறுப்பை மறை myElement.
  • $("#myElement").show(): ஐடியுடன் உறுப்பைக் காட்டு myElement.
  • $("#myElement").fadeOut(): ஐடியுடன் உறுப்பில் ஃபேட்-அவுட் விளைவைச் செய்யவும் myElement.
  • $("#myElement").fadeIn(): ஐடியுடன் உறுப்பில் ஃபேட்-இன் எஃபெக்டைச் செய்யவும் myElement.

உதாரணமாக:

$("#myElement").fadeOut(1000, function() {  
  console.log("Fade out complete");  
});