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