jQuery-তে ইভেন্ট বাইন্ডিং

প্রায় প্রতিটি JavaScript ইভেন্টেরই একটি নিজস্ব jQuery পদ্ধতি রয়েছে। উদাহরণস্বরূপ, উপাদানগুলিতে ক্লিক এইভাবে ক্যাপচার করা যেতে পারে: $(selector).click(function)।

নিম্নলিখিত HTML কোড বিবেচনা করুন:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

এর জন্য CSS লেখা হয়েছে:

li {
	width: 100px;
	cursor: pointer;
}

আসুন এমন করি যাতে যেকোনো li-এ ক্লিক করলে একটি বিস্ময়বোধক চিহ্ন প্রদর্শিত হয়। তালিকার আইটেমগুলিতে ক্লিক করুন:

$('li').click(function() {
	alert('!');
});

বাউন্ড ফাংশনের ভিতরে this উপলব্ধ, যা সেই উপাদানটিকে নির্দেশ করে যেখানে ইভেন্টটি ঘটেছে (আমাদের ক্ষেত্রে সেই li-কে, যেটিতে ক্লিক করা হয়েছিল)। এই this-টি JavaScript শৈলীতে ব্যবহার করা যেতে পারে, উদাহরণস্বরূপ, this.innerHTML বা jQuery শৈলীতে - এর জন্য এই this-টিকে $-তে মোড়ানো উচিত, এভাবে: $(this)।

নিম্নলিখিত HTML কোড নিন:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

এই কোডের জন্য নিম্নলিখিত CSS স্টাইল লেখা হয়েছে:

li {
	width: 100px;
}
li:hover {
	color: red;
	cursor: pointer;
}

আসুন এমন করি যাতে li-এ ক্লিক করলে এর শেষে একটি '!' যোগ হয়। কাজ পরীক্ষা করতে তালিকার আইটেমগুলিতে ক্লিক করুন:

$('li').click(function() {
	$(this).append('!');
});

এমন করুন যাতে ক্লিক করলে প্রতিটি li-এর শুরুতে '?' যোগ হয়।

প্যারাগ্রাফ দেওয়া আছে। এমন করুন যাতে ক্লিক করলে প্রতিটি প্যারাগ্রাফের তার বিষয়বস্তু প্রদর্শিত হয়।

সংখ্যা সহ প্যারাগ্রাফ দেওয়া আছে। প্যারাগ্রাফে ক্লিক করলে সেখানে অবশ্যই সংখ্যাটির বর্গ প্রকাশ পাবে।