DOM ম্যানিপুলেশন

DOM (Document Object Model) ম্যানিপুলেশন হচ্ছে ওয়েব পেজের এলিমেন্টগুলির সাথে কাজ করা প্রক্রিয়া, যেমন এলিমেন্ট যোগ করা, মুছে ফেলা, বা পরিবর্তন করা। jQuery এই ধরনের কাজগুলি করা অত্যন্ত সহজ করে তোলে।

DOM এলিমেন্ট সিলেকশন

jQuery-তে DOM এলিমেন্ট নির্বাচন করা সহজ। নিম্নে কিছু সাধারণ সিলেক্টরের উদাহরণ দেওয়া হল:

$("#elementId") // ID দিয়ে এলিমেন্ট নির্বাচন
$(".className") // ক্লাস দিয়ে এলিমেন্ট নির্বাচন
$("tagname") // ট্যাগ নাম দিয়ে এলিমেন্ট নির্বাচন
$("ul li:first") // প্রথম li এলিমেন্ট নির্বাচন

DOM এলিমেন্ট পরিবর্তন

DOM এর বিভিন্ন এলিমেন্টে কন্টেন্ট এবং অ্যাট্রিবিউট পরিবর্তন করা সহজ:

$("#myDiv").text("নতুন টেক্সট"); // টেক্সট পরিবর্তন
$("#myDiv").html("<b>নতুন HTML কনটেন্ট</b>"); // HTML কনটেন্ট পরিবর্তন
$("#myImage").attr("src", "newImage.jpg"); // অ্যাট্রিবিউট পরিবর্তন

DOM এলিমেন্ট যোগ করা এবং সরানো

jQuery এর মাধ্যমে DOM এলিমেন্টগুলি যোগ, মুছে ফেলা এবং পুনরায় সাজানো যেতে পারে:

$("#myList").append("<li>নতুন আইটেম</li>"); // শেষে এলিমেন্ট যোগ
$("#myList").prepend("<li>প্রথম আইটেম</li>"); // শুরুতে এলিমেন্ট যোগ
$("#oldDiv").remove(); // এলিমেন্ট মুছে ফেলা
$("#myList li:last").detach(); // শেষ আইটেম সরানো (পুনর্ব্যবহারের জন্য সংরক্ষণ)

ক্লাস এবং CSS স্টাইলিং

jQuery দিয়ে ক্লাস এবং CSS স্টাইল পরিচালনা করা যায়:

$("#myElement").addClass("active"); // ক্লাস যোগ করা
$("#myElement").removeClass("active"); // ক্লাস সরানো
$("#myElement").css("color", "red"); // স্টাইল পরিবর্তন

DOM এলিমেন্ট ইভেন্ট হ্যান্ডলিং

jQuery-তে ইভেন্ট হ্যান্ডলিং খুব সহজ:

$("#myButton").click(function() {
    alert("বাটন ক্লিক করা হয়েছে!");
});

$("#myForm").submit(function(e) {
    e.preventDefault(); // ফর্ম সাবমিট প্রতিহত করা
});

jQuery DOM ম্যানিপুলেশন ফিচারগুলি ওয়েব ডেভেলপারদের জীবনকে অনেক সহজ করে তোলে, কারণ এটি কম কোডে দ্রুত এবং কার্যকর সমাধান প্রদান করে। jQuery এর এই দক্ষতাগুলি ওয়েব পেজের ইন্টারঅ্যাক্টিভিটি বাড়াতে এবং ইউজার এক্সপেরিয়েন্স উন্নত করতে সহায়ক।

jQuery-তে কনটেন্ট ম্যানিপুলেশনের জন্য text(), html(), এবং val() ফাংশনগুলি খুবই কার্যকর। এগুলি ডকুমেন্ট অবজেক্ট মডেল (DOM) থেকে কনটেন্ট পড়া এবং সেটি পরিবর্তন করার জন্য ব্যবহৃত হয়।

text() ফাংশন

text() ফাংশন দিয়ে এলিমেন্টের প্লেইন টেক্সট কনটেন্ট পাওয়া যায় এবং সেট করা যায়। এটি HTML ট্যাগ অগ্রাহ্য করে কেবল টেক্সট কনটেন্টই প্রদর্শন করে।

পাঠ্য পেতে:

var content = $("#myElement").text();
console.log(content); // এলিমেন্টের টেক্সট কনটেন্ট প্রদর্শন করবে

পাঠ্য সেট করতে:

$("#myElement").text("নতুন টেক্সট");

html() ফাংশন

html() ফাংশন দিয়ে এলিমেন্টের HTML কনটেন্ট পাওয়া যায় এবং সেট করা যায়। এটি এলিমেন্টের ভিতরের HTML, অর্থাৎ ট্যাগসহ সমস্ত কিছু প্রদর্শন করে।

HTML পেতে:

var htmlContent = $("#myElement").html();
console.log(htmlContent); // এলিমেন্টের HTML কনটেন্ট প্রদর্শন করবে

HTML সেট করতে:

$("#myElement").html("<strong>বোল্ড টেক্সট</strong>");

val() ফাংশন

val() ফাংশন দিয়ে ফর্ম এলিমেন্টস (যেমন ইনপুট, সিলেক্ট বক্স ইত্যাদি) থেকে ভ্যালু পাওয়া যায় এবং সেট করা যায়। এটি বিশেষত ফর্ম ডেটা প্রসেস করার সময় উপকারী।

ভ্যালু পেতে:

var inputValue = $("#myInput").val();
console.log(inputValue); // ইনপুট ফিল্ডের মান প্রদর্শন করবে

ভ্যালু সেট করতে:

$("#myInput").val("নতুন মান");

jQuery-র text(), html(), এবং val() ফাংশনগুলি ওয়েব ডেভেলপারদের জন্য কনটেন্ট ম্যানিপুলেশনে বিশেষ করে ডকুমেন্টের ডাটা পড়া এবং লিখার কাজকে সহজ করে দেয়। এই মেথডগুলির সহায়তায় ডিনামিক কনটেন্ট ম্যানেজমেন্ট এবং ডেটা হ্যান্ডলিং খুব সহজে করা যায়, যা ইউজার ইন্টারঅ্যাকশনের প্রতিক্রিয়াকে দ্রুত এবং নির্ভুল ভাবে প্রদর্শন করে।

jQuery-র মাধ্যমে HTML এলিমেন্টগুলির অ্যাট্রিবিউট এবং প্রোপার্টিগুলি পরিচালনা করা যায়। এই পরিচালনা করার জন্য মূলত attr(), prop(), এবং removeAttr() মেথডগুলি ব্যবহার করা হয়। প্রতিটি মেথডের ব্যবহার এবং কার্যক্রম নিচে বর্ণনা করা হলো।

attr() মেথড

attr() মেথডটি ব্যবহার করে HTML এলিমেন্টের অ্যাট্রিবিউট পড়া এবং লেখা যায়। এটি নির্দিষ্ট অ্যাট্রিবিউটের মান পেতে এবং সেট করতে ব্যবহার করা হয়।

অ্যাট্রিবিউট পড়া:

var title = $("#myElement").attr("title");
console.log(title); // এলিমেন্টের টাইটল অ্যাট্রিবিউটের মান প্রিন্ট করবে

অ্যাট্রিবিউট সেট করা:

$("#myElement").attr("title", "নতুন টাইটল");

prop() মেথড

prop() মেথডটি ব্যবহার করে এলিমেন্টের প্রোপার্টি পড়া এবং সেট করা যায়। এটি বিশেষ করে বুলিয়ান প্রোপার্টিগুলির জন্য প্রয়োজন, যেমন চেকবক্সের checked অবস্থা।

প্রোপার্টি পড়া:

var isChecked = $("#myCheckbox").prop("checked");
console.log(isChecked); // চেকবক্সের চেকড অবস্থা প্রিন্ট করবে

প্রোপার্টি সেট করা:

$("#myCheckbox").prop("checked", true);

removeAttr() মেথড

removeAttr() মেথডটি ব্যবহার করে এলিমেন্ট থেকে নির্দিষ্ট অ্যাট্রিবিউট সরিয়ে ফেলা যায়। এটি যখন কোনো অ্যাট্রিবিউট আর প্রয়োজন না হয়, তখন ব্যবহার করা হয়।

অ্যাট্রিবিউট সরানো:

$("#myElement").removeAttr("title");

jQuery-র attr(), prop(), এবং removeAttr() মেথডগুলি HTML এলিমেন্টের অ্যাট্রিবিউট এবং প্রোপার্টিগুলি পরিচালনা করার জন্য খুবই কার্যকর। এগুলি দ্বারা এলিমেন্টের অ্যাট্রিবিউট পরিবর্তন, প্রোপার্টি সেট করা এবং অ্যাট্রিবিউট সরানো সহজ হয়ে যায়, যা ওয়েব অ্যাপ্লিকেশনের ইন্টারঅ্যাকশন ও ডাইনামিক বিহেভিয়ার নিয়ন্ত্রণে অপরিহার্য।

jQuery ব্যবহার করে ওয়েব এলিমেন্টগুলোর স্টাইল ম্যানিপুলেশন খুব সহজ। এই ম্যানিপুলেশনগুলি করার জন্য মূলত তিনটি jQuery ফাংশন ব্যবহার করা হয়: css(), addClass(), এবং removeClass()। নিচে এই ফাংশনগুলির ব্যবহার এবং তাদের কার্যকারিতা ব্যাখ্যা করা হলো।

css() ফাংশন

css() ফাংশন দুই উপায়ে ব্যবহার করা যায়: একটি হলো একটি বা একাধিক CSS প্রোপার্টির মান পড়ার জন্য, এবং অন্যটি হলো একটি বা একাধিক CSS প্রোপার্টির মান সেট করার জন্য।

উদাহরণ: সিঙ্গেল প্রোপার্টি সেট করা

$("#myElement").css("color", "red");

এই কোডটি আইডি myElement ধারণকারী এলিমেন্টের টেক্সট রঙ লাল করে দেবে।

উদাহরণ: একাধিক প্রোপার্টি সেট করা

$("#myElement").css({
    "color": "blue",
    "background-color": "yellow",
    "font-size": "16px"
});

এই কোডটি আইডি myElement ধারণকারী এলিমেন্টের টেক্সট রঙ নীল, ব্যাকগ্রাউন্ড রঙ হলুদ, এবং ফন্ট সাইজ 16px করে দেবে।

addClass() এবং removeClass() ফাংশন

addClass() এবং removeClass() ফাংশনগুলি কোনও এলিমেন্টে CSS ক্লাস যোগ করার এবং মুছে ফেলার জন্য ব্যবহার করা হয়।

addClass() উদাহরণ:

$("#myElement").addClass("newClass");

এই কোডটি myElement আইডি ধারণকারী এলিমেন্টে newClass নামের ক্লাস যোগ করে, যা ঐ ক্লাসের সব স্টাইল সেটিংস প্রযোজ্য হবে।

removeClass() উদাহরণ:

$("#myElement").removeClass("oldClass");

এই কোডটি myElement আইডি ধারণকারী এলিমেন্ট থেকে oldClass নামের ক্লাস মুছে দেবে, যা এই ক্লাসের সব স্টাইল ইফেক্ট অপসারণ করবে।

সারাংশ

jQuery-র css(), addClass(), এবং removeClass() ফাংশনগুলি ওয়েব ডেভেলপারদের এলিমেন্টগুলোর স্টাইল সহজে ম্যানেজ করতে সাহায্য করে। এই ফাংশনগুলির মাধ্যমে ডাইনামিক ওয়েব অ্যাপ্লিকেশনের ইন্টারফেস অনায়াসে পরিবর্তন করা সম্ভব হয়, যা অ্যাপ্লিকেশনের ইউজার এক্সপেরিয়েন্সকে উন্নত করে।

jQuery এর মাধ্যমে DOM ট্রাভার্সাল খুবই সহজ। parent(), children(), এবং siblings() ফাংশনগুলি DOM এর বিভিন্ন অংশে নেভিগেট করতে সাহায্য করে। এই ফাংশনগুলি নিচে বিস্তারিত আলোচনা করা হলো।

parent()

parent() ফাংশনটি কোনো নির্দিষ্ট এলিমেন্টের প্যারেন্ট এলিমেন্ট নির্বাচন করে। এটি সাধারণত একটি নির্দিষ্ট এলিমেন্টের সরাসরি উপরের লেভেলের এলিমেন্ট নির্বাচন করার জন্য ব্যবহৃত হয়।

উদাহরণ:

<div class="parent">
    <p class="child">আমি একটি প্যারাগ্রাফ।</p>
</div>

$(".child").parent().css("border", "2px solid red");

উপরের কোডটি প্যারাগ্রাফের প্যারেন্ট ডিভকে লাল বর্ডার দেবে।

children()

children() ফাংশনটি কোনো নির্দিষ্ট এলিমেন্টের সরাসরি চাইল্ড এলিমেন্টগুলি নির্বাচন করে। এটি কোনো এলিমেন্টের অধীনে অবস্থিত সব চাইল্ডগুলির মধ্যে থেকে নির্বাচন করে।

উদাহরণ:

<div class="parent">
    <p class="child">প্রথম প্যারাগ্রাফ।</p>
    <p class="child">দ্বিতীয় প্যারাগ্রাফ।</p>
</div>

$(".parent").children().css("color", "blue");

উপরের কোডটি সব চাইল্ড প্যারাগ্রাফের টেক্সট রঙ নীল করবে।

siblings()

siblings() ফাংশনটি কোনো নির্দিষ্ট এলিমেন্টের সকল সিবলিংসকে নির্বাচন করে। এটি একই প্যারেন্টের অধীনে অন্যান্য চাইল্ডগুলি নির্বাচন করে।

উদাহরণ:

<div>
    <button>বোতাম ১</button>
    <button>বোতাম ২</button>
    <button>বোতাম ৩</button>
</div>

$("button").click(function() {
    $(this).siblings().css("color", "green");
});

উপরের কোডটি কোনো বোতাম ক্লিক করলে, অন্যান্য সিবলিং বোতামগুলির টেক্সট রঙ সবুজ করে দেবে।

সারাংশ

jQuery-র parent(), children(), এবং siblings() ফাংশনগুলি DOM ট্রাভার্সালের জন্য খুবই কার্যকর। এগুলি ব্যবহার করে কোড অনেক সংক্ষিপ্ত এবং ম্যানেজমেন্ট সহজ হয়, যা ওয়েব ডেভেলপমেন্টের জন্য অত্যন্ত প্রয়োজনীয়।

jQuery ব্যবহার করে DOM এলিমেন্ট তৈরি, যোগ, এবং মুছে ফেলার প্রক্রিয়া খুবই সহজ। এই লেখায় append(), prepend(), remove(), এবং empty() মেথডগুলির ব্যবহার এবং কার্যকারিতা আলোচনা করা হবে।

append() মেথড

append() মেথড নির্দিষ্ট এলিমেন্টের ভেতরের শেষে নতুন কন্টেন্ট যোগ করে। এটি এলিমেন্টের মধ্যে সর্বশেষে নতুন এলিমেন্ট বা কন্টেন্ট সংযুক্ত করে।

উদাহরণ:

<ul id="myList">
    <li>আইটেম 1</li>
    <li>আইটেম 2</li>
</ul>

<script>
$(document).ready(function(){
    $("#myList").append("<li>নতুন আইটেম</li>");
});
</script>

এই কোড দ্বারা "নতুন আইটেম" নামের একটি নতুন লিস্ট আইটেম #myList এর শেষে যোগ হবে।

prepend() মেথড

prepend() মেথড নির্দিষ্ট এলিমেন্টের ভেতরের শুরুতে নতুন কন্টেন্ট যোগ করে। এটি এলিমেন্টের মধ্যে প্রথমে নতুন এলিমেন্ট বা কন্টেন্ট সংযুক্ত করে।

উদাহরণ:

<ul id="myList">
    <li>আইটেম 2</li>
    <li>আইটেম 3</li>
</ul>

<script>
$(document).ready(function(){
    $("#myList").prepend("<li>আইটেম 1</li>");
});
</script>

এই কোড দ্বারা "আইটেম 1" নামের একটি নতুন লিস্ট আইটেম #myList এর শুরুতে যোগ হবে।

remove() মেথড

remove() মেথড নির্দিষ্ট এলিমেন্টসমূহ এবং তাদের চাইল্ড এলিমেন্টসমূহকে DOM থেকে মুছে ফেলে।

উদাহরণ:

<ul id="myList">
    <li>আইটেম 1</li>
    <li id="removeMe">আইটেম 2</li>
    <li>আইটেম 3</li>
</ul>

<script>
$(document).ready(function(){
    $("#removeMe").remove();
});
</script>

এই কোড দ্বারা "আইটেম 2" নামের লিস্ট আইটেম মুছে ফেলা হবে।

empty() মেথড

empty() মেথড নির্দিষ্ট এলিমেন্টের সব চাইল্ড এলিমেন্টসমূহ মুছে ফেলে, কিন্তু নির্দিষ্ট এলিমেন্টটি মুছে ফেলে না।

উদাহরণ:

<div id="myDiv">
    <p>প্যারাগ্রাফ 1</p>
    <p>প্যারাগ্রাফ 2</p>
</div>

<script>
$(document).ready(function(){
    $("#myDiv").empty();
});
</script>

এই কোড দ্বারা #myDiv এর ভেতরের সব প্যারাগ্রাফ মুছে ফেলা হবে, কিন্তু div টি থাকবে।

সারাংশ

jQuery-র এই মেথডগুলি DOM এলিমেন্ট হ্যান্ডলিংকে অনেক সহজ করে দেয়। append() এবং prepend() দিয়ে এলিমেন্ট যোগ করা, remove() দিয়ে এলিমেন্ট মুছে ফেলা, এবং empty() দিয়ে এলিমেন্টের কন্টেন্ট মুছে ফেলার ক্ষমতা ডেভেলপারদের জন্য অনেক সুবিধাজনক সমাধান প্রদান করে।