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