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