close

j క్వెరీతో DOM మానిప్యులేషన్ -టెక్నిక్స్ మరియు ఉదాహరణలు

j క్వెరీతో DOM మానిప్యులేషన్ DOM నిర్మాణాన్ని లక్ష్యంగా చేసుకోవడం ద్వారా వెబ్ పేజీలోని డేటాను సవరించడానికి, జోడించడానికి, తీసివేయడానికి లేదా పరస్పర చర్య చేయడానికి మిమ్మల్ని అనుమతిస్తుంది. j క్వెరీ DOM మానిప్యులేషన్ టాస్క్‌లను నిర్వహించడానికి అనుకూలమైన పద్ధతులు మరియు విధులను అందిస్తుంది.

నిర్దిష్ట ఉదాహరణలతో పాటు ప్రతి విభాగానికి ఇక్కడ వివరణలు ఉన్నాయి:

 

ఎలిమెంట్స్ ఎంచుకోవడం

  • $("p") <p>: పేజీలోని అన్ని అంశాలను ఎంచుకోండి .
  • $(".myClass"): తరగతితో అన్ని అంశాలను ఎంచుకోండి myClass.
  • $("#myElement"): IDతో మూలకాన్ని ఎంచుకోండి myElement.
  • $("parentElement").find(".childElement") childElement: తరగతిలోని అన్ని చైల్డ్ ఎలిమెంట్‌లను ఎంచుకోండి parentElement.

ఉదాహరణ:

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

 

కంటెంట్‌ని మార్చడం

  • $("#myElement").html("<b>Hello World</b>"): IDతో మూలకం కోసం 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: IDతో ఎలిమెంట్‌కు తరగతిని జోడించండి myElement.
  • $("#myElement").removeClass("oldClass") oldClass: IDతో మూలకం నుండి తరగతిని తీసివేయండి myElement.

ఉదాహరణ:

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

 

ఈవెంట్ నిర్వహణ

$("button").click(function() { }): ఒక <button> మూలకం క్లిక్ చేసినప్పుడు ఈవెంట్ హ్యాండ్లర్ ఫంక్షన్‌ను నమోదు చేయండి.

ఉదాహరణ:

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

 

ప్రభావాలు మరియు యానిమేషన్లు

  • $("#myElement").hide(): IDతో మూలకాన్ని దాచండి myElement.
  • $("#myElement").show(): IDతో మూలకాన్ని చూపించు myElement.
  • $("#myElement").fadeOut(): IDతో మూలకంపై ఫేడ్-అవుట్ ప్రభావాన్ని అమలు చేయండి myElement.
  • $("#myElement").fadeIn(): IDతో మూలకంపై ఫేడ్-ఇన్ ప్రభావాన్ని అమలు చేయండి myElement.

ఉదాహరణ:

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