জেকুয়েরি - এট্রিবিউট এবং কন্টেন্ট খোজা
এইচটিএমএল এলিমেন্ট এবং এট্রিবিউট পরিবর্তন ও পরিচালনার জন্য জেকুয়েরিতে অনেক ক্ষমতাসম্পন্ন মেথড রয়েছে।
জেকুয়েরি DOM পরিচালনা
জেকুয়েরিতে ডোম সম্পর্কিত অনেক মেথড আছে যেগুলো দিয়ে এইচটিএমএল এলিমেন্ট এবং এট্রিবিউটকে খুব সহজেই এক্সেস এবং পরিচালনা করা যায়।
জেকুয়েরির সবচেয়ে গুরুত্বপূর্ণ অংশ হচ্ছে ডোম পরিচালনা করা।
DOM = Document Object Model
এইচটিএমএল এবং এক্সএমএল(XML) ডকুমেন্টেকে এক্সেস করার জন্য DOM স্ট্যান্ডার্ড নির্ধারণ করে।
"W3C Document Object Model (DOM) হলো একটি প্লাটফর্ম এবং ভাষা স্বাধীন(language-neutral) ইন্টারফেস যা প্রোগ্রাম বা স্ক্রিপ্টকে ডকুমেন্টে ডায়নামিকভাবে এক্সেস করার সম্মতি দেয় এবং কন্টেন্ট, স্ট্রাকচার ও স্টাইলকে আপডেট করার সুযোগ দেয়।"
text(), html() এবং val() মেথড
এই তিনটি মেথড খুবই সহজ এবং এইচটিএমএল ডোম পরিচালনার(manipulate) ক্ষেত্রে অনেক গুরুত্বপূর্ণ ভূমিকা রাখেঃ
text()- নির্বাচিত এলিমেন্টের টেক্সট কন্টেন্ট সেট/রিটার্ন করে।html()-নির্বাচিত এলিমেন্টের মার্কআপসহ কন্টেন্ট সেট/রিটার্ন করে।val()- নির্বাচিত ফর্ম এলিমেন্টের ভ্যালু সেট/রিটার্ন করে।
নিচের উদাহরণে text() মেথডের মাধ্যমে কিভাবে এইচটিএমএল এলিমেন্টের কন্টেন্ট পাওয়া যায় তা দেখানো হয়েছেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("p").text());
});
});
</script>
</head>
<body>
<button>বাটনে ক্লিক করুন</button>
<p>এটি একটি <b>প্যারাগ্রাফ</b>।</p>
</body>
</html>
ফলাফল
নিচের উদাহরণে html() মেথডের মাধ্যমে কিভাবে এইচটিএমএল এলিমেন্টের কন্টেন্ট পাওয়া যায় তা দেখানো হয়েছেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("p").html());
});
});
</script>
</head>
<body>
<button>বাটনে ক্লিক করুন</button>
<p>এটি একটি <b>প্যারাগ্রাফ</b>।</p>
</body>
</html>
ফলাফল
বিঃদ্রঃ text() ব্যবহার করায় শুধুমাত্র <p> এলিমেন্টের টেক্সট রিটার্ণ করেছে। আর html() ব্যবহার করায় এইচটিএমএল মার্ক-আপ সহ টেক্সট রিটার্ণ করেছে।
নিচের উদাহরণে val() মেথডের মাধ্যমে কিভাবে এইচটিএমএল ফর্ম এলিমেন্ট এর ইনপুট ফিল্ড এর ভ্যালু পাওয়া যায় তা দেখানো হয়েছেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("input").val());
});
});
</script>
</head>
<body>
<button>ভ্যালু প্রদর্শন করুন</button>
<p>Name: <input type="text" value="Rasel"></p>
</body>
</html>
ফলাফল
জেকুয়েরি attr() মেথড
জেকুয়েরি attr() মেথডের মাধ্যমে এট্রিবিউটের ভ্যালু পাওয়া যায়।
নিচের উদাহরণে attr() মেথডের মাধ্যমে কিভাবে target এট্রিবিউটের ভ্যালু পাওয়া যায় তা দেখানো হয়েছেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Target= " + $("a").attr("target"));
});
});
</script>
</head>
<body>
<button>Target এর ভ্যালু প্রদর্শন</button>
<p><a href="https://sattacademy.com" target="_blank">Satt Academy</a></p>
</body>
</html>
ফলাফল
এট্রিবিউটের ভ্যালু কিভাবে সেট/পরিবর্তন করা যায় তা পরবর্তী অধ্যায়ে দেখানো হয়েছে।
জেকুয়েরি এইচটিএমএল রেফারেন্স
জেকুয়েরি এইচটিএমএল মেথডের সম্পূর্ণ রেফারেন্সের জন্য আমাদের জেকুয়েরি এইচটিএমএল/সিএসএস রেফারেন্স পেজে ভিজিট করুন।