close

jQuery सह DOM मॅनिपुलेशन- तंत्र आणि उदाहरणे

jQuery सह DOM मॅनिप्युलेशन तुम्हाला DOM स्ट्रक्चरला टार्गेट करून वेब पेजवरील डेटा सुधारणे, जोडणे, काढणे किंवा संवाद साधण्याची अनुमती देते. jQuery DOM हाताळणी कार्ये करण्यासाठी सोयीस्कर पद्धती आणि कार्ये प्रदान करते.

येथे विशिष्ट उदाहरणांसह प्रत्येक विभागाचे स्पष्टीकरण दिले आहे:

 

घटक निवडत आहे

  • $("p"): <p> पृष्ठावरील सर्व घटक निवडा.
  • $(".myClass"): वर्गासह सर्व घटक निवडा myClass.
  • $("#myElement"): ID सह घटक निवडा 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(): ID सह घटक लपवा myElement.
  • $("#myElement").show(): ID सह घटक दर्शवा myElement.
  • $("#myElement").fadeOut(): ID सह घटकावर फेड-आउट प्रभाव करा myElement.
  • $("#myElement").fadeIn(): ID सह घटकावर फेड-इन प्रभाव करा myElement.

उदाहरण:

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