jQuery পরিচিতি
jQuery হলো একটি জনপ্রিয় JavaScript লাইব্রেরি, যা DOM ম্যানিপুলেশন, ইফেক্ট, ইভেন্ট হ্যান্ডলিং, এবং AJAX অপারেশন সহজ করে।
jQuery Syntax (সিনট্যাক্স)
jQuery-এর সাধারণ সিনট্যাক্স হলো:
$(selector).action();
✦ $ 
এটি jQuery কে বোঝায়।
✦ selector এটি HTML এলিমেন্ট সিলেক্ট করার জন্য ব্যবহার করা হয়।
✦ action() এটি সিলেক্ট করা এলিমেন্টের উপর কোনো কাজ বা পরিবর্তন করে।
উদাহরণ:
$(document).ready(function(){
$("p").hide(); // সব <p> ট্যাগ লুকিয়ে ফেলবে
});
$(document).ready() ফাংশনটি নিশ্চিত করে যে কোডটি তখনই রান করবে, যখন সম্পূর্ণ HTML লোড হয়ে যাবে।
jQuery Selectors (সিলেক্টর)
সিলেক্টর ব্যবহার করে আমরা HTML এলিমেন্ট বাছাই করতে পারি। নিচে কিছু গুরুত্বপূর্ণ jQuery সিলেক্টর দেওয়া হলো—
| সিলেক্টর | বর্ণনা | উদাহরণ |
|---|---|---|
$("p") |
সব <p> ট্যাগ সিলেক্ট করবে |
$("p").hide(); |
$("#id") |
নির্দিষ্ট আইডির এলিমেন্ট সিলেক্ট করবে | $("#myDiv").hide(); |
$(".class") |
নির্দিষ্ট ক্লাসের এলিমেন্ট সিলেক্ট করবে | $(".myClass").fadeOut(); |
$("ul li") |
<ul> এর সব <li> সিলেক্ট করবে |
$("ul li").css("color", "red"); |
$("input[type='text']") |
নির্দিষ্ট টাইপের ইনপুট সিলেক্ট করবে | $("input[type='text']").val("Hello!"); |
jQuery Events (ইভেন্ট)
ইভেন্ট হলো ইউজারের কোনো একশন (যেমন: ক্লিক, হোভার, টাইপ করা) যা ওয়েবপেজে ঘটে।
সাধারণ ইভেন্ট ফাংশনসমূহ:
| ইভেন্ট | বর্ণনা | উদাহরণ |
|---|---|---|
click() |
ক্লিক করলে কাজ করবে | $("button").click(function(){ alert("Clicked!"); }); |
dblclick() |
ডাবল ক্লিক করলে কাজ করবে | $("p").dblclick(function(){ $(this).hide(); }); |
hover() |
মাউস নিয়ে গেলে কাজ করবে | $("div").hover(function(){ $(this).css("background", "yellow"); }); |
focus() |
ইনপুটে ক্লিক করলে কাজ করবে | $("input").focus(function(){ $(this).css("border", "2px solid blue"); }); |
blur() |
ইনপুট থেকে বাইরে ক্লিক করলে কাজ করবে | $("input").blur(function(){ $(this).css("border", "1px solid gray"); }); |
উদাহরণ: ক্লিক ইভেন্ট
$(document).ready(function(){
$("#btn").click(function(){
$("#text").hide();
});
});
ব্যাখ্যা: যখন আইডি btn-এর উপর ক্লিক করা হবে, তখন আইডি text-এর এলিমেন্ট লুকিয়ে যাবে।