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");  
});