jQuery অন() এর জন্য একটি বিগিনারস গাইড

jQuery on() পদ্ধতি হল একটি উপাদানে একটি ইভেন্ট হ্যান্ডলার সংযুক্ত করার একটি উপায়। নির্বাচককে পাস করা উপাদান পৃষ্ঠার যেকোনো কিছু হতে পারে। সাধারণত, on() একটি বোতামে একটি ক্লিক হ্যান্ডলার সংযুক্ত করার একটি উপায়। অনুশীলনে, on() যেকোনো নির্বাচিত উপাদানের সাথে যেকোনো ইভেন্ট হ্যান্ডলার সংযুক্ত করতে পারে।

এই নির্দেশিকায়, আমরা on()-এর মৌলিক সিনট্যাক্স কভার করব এবং কর্মে কিছু বাস্তব উদাহরণ দেখুন। এটা উল্লেখ করা গুরুত্বপূর্ণ যে jQuery on() ঐচ্ছিক আর্গুমেন্ট গ্রহণ করে যা এখানে কভার করা হবে না। আমরা প্রয়োজনীয় আর্গুমেন্ট এবং সাধারণ ব্যবহারে লেগে থাকব। ঐচ্ছিক আর্গুমেন্ট সম্পর্কে আরো এখানে পাওয়া যাবে.

jQuery অন()

jQuery on() পদ্ধতি একটি নির্বাচিত উপাদানের সাথে একটি ইভেন্ট হ্যান্ডলার সংযুক্ত করার একটি স্থিতিশীল উপায় প্রদান করে। হ্যান্ডলারের নাম হয়ে গেলে, on() একটি কলব্যাক ফাংশন নেয়। একটি কলব্যাক ফাংশন একটি ফাংশন যা একটি পদ্ধতিতে পাস করা হয় যা পরবর্তী সময়ে কার্যকর করা হয়। আমাদের উদ্দেশ্যে, কলব্যাক ফাংশন হল যেখানে কিছু ঘটবে।

ধরা যাক আমরা on() ব্যবহার করেছি একটি বোতামে একটি ক্লিক ইভেন্ট হ্যান্ডলার সংযুক্ত করতে। আমাদের কলব্যাক ফাংশন যেখানে বোতামটি ক্লিক করার পরে কী হবে তা আমরা নির্ধারণ করব৷

on() jQuery সিনট্যাক্স

এখন আমরা কিভাবে on() সম্পর্কে ধারণা পেয়েছি কাজ করে, এর নির্দিষ্ট সিনট্যাক্স দেখি। সমস্ত jQuery মনে রাখবেন, আমরা আমাদের উপাদান নির্বাচন দিয়ে শুরু করি। তারপর আমরা on() কল করি আমাদের ইভেন্ট হ্যান্ডলার সংযুক্ত করার পদ্ধতি। প্রথম আর্গুমেন্ট on()-এ পাস হয়েছে ইভেন্ট হ্যান্ডলার নাম নিজেই, এবং কলব্যাক ফাংশন দ্বারা অনুসরণ করা হয়।

$('.btn').on('click', function() {
  alert("You clicked the button!")
})

এখানে, আমরা আমাদের বোতাম নির্বাচন করছি, কল করছি on() , এবং আমাদের প্রয়োজনীয় আর্গুমেন্ট পাস. লক্ষ্য করুন ইভেন্ট হ্যান্ডলারের নাম অবশ্যই উদ্ধৃতিতে থাকতে হবে। আমাদের কলব্যাক ফাংশনে, আমরা একটি বার্তা সহ একটি সতর্কতা প্রদর্শন করছি। এটি আমাদের জানতে দেয় যে কলব্যাক ফাংশন সঠিকভাবে কাজ করছে।

jQuery সম্পর্কে আরও alert() এখানে পাওয়া যাবে।

jQuery অন() উদাহরণ

আমাদের উপরের বোতামের উদাহরণে প্রসারিত করা যাক। আমরা এখন জানি কিভাবে jQuery on() এর জন্য মৌলিক সিনট্যাক্স কাজ করে . আমাদের উদাহরণের জন্য, বোতামটি ক্লিক করার পরে একটি সতর্কতা বার্তা প্রদর্শনের চেয়ে আরও কিছু করা যাক।

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।

সতর্কতা বার্তার পরিবর্তে, বোতামটি ক্লিক করার পরে আমরা নতুন সামগ্রী প্রদর্শন করতে পারি। এটি করার জন্য, আমরা jQuery append() ব্যবহার করব আমাদের কলব্যাক ফাংশনের ভিতরের পদ্ধতি। jQuery append() নির্বাচিত উপাদানের শেষে একটি যুক্তি হিসাবে পাস করা বিষয়বস্তু সংযুক্ত করে। jQuery append() সম্পর্কে আরও পড়ুন এখানে.

শুরু করার জন্য, আমরা একটি HTML বোতাম এবং একটি

রেন্ডার করছি যেখানে আমরা নতুন বিষয়বস্তু যুক্ত করব।

<button class="btn">
Click me!
</button>

<div class="message">

</div>

এটি আপাতত শুধু বোতামটি রেন্ডার করবে।

আমাদের বোতামটি ক্লিক করতে চায়! এখন, আমরা jQuery দিয়ে এটি নির্বাচন করি এবং এটি ক্লিক করার পরে একটি বার্তা প্রদর্শিত হয়।

$('.btn').on('click', function() {
  $('.message').append('The button has been clicked.')
})

আমাদের বোতামটি তার শ্রেণীর নাম দ্বারা নির্বাচিত হয় এবং একটি ক্লিক ইভেন্ট হ্যান্ডলার পাস হয়। আমাদের কলব্যাক ফাংশনে, আমরা আমাদের

-এ একটি বার্তা যুক্ত করছি যার একটি ক্লাস নাম “বার্তা”।

আমাদের on() পদ্ধতি কাজ করে! jQuery append() ব্যবহার করার বিষয়ে একটি জিনিস লক্ষ্য করুন এখানে প্রতিবার বোতামটি ক্লিক করার সময় আমাদের

এর নীচে আমাদের বার্তাটি সংযুক্ত থাকবে। চলুন একটি ভিন্ন উদাহরণ কটাক্ষপাত করা যাক.

আমাদের পরবর্তী উদাহরণে, ক্লিক করার পর আমরা নতুন বিষয়বস্তু দিয়ে বোতামটি প্রতিস্থাপন করব। এটি আরও নিয়ন্ত্রিত ব্যবহারকারীর অভিজ্ঞতার অনুকরণ করবে।

<div>
<button class="btn">
Click me!
</button>
</div>

এখানে, আমরা আমাদের বোতামটি একটি

এ আবৃত করেছি। এটি আমাদের jQuery html() ব্যবহার করার অনুমতি দেবে এবং টেক্সট ধারণকারী একটি

ট্যাগ দিয়ে বোতামটি প্রতিস্থাপন করুন। কখনও কখনও আমরা চাই যে ব্যবহারকারীরা শুধুমাত্র একবার একটি বোতামে ক্লিক করুক এবং নতুন সামগ্রীতে নির্দেশিত হোক!

$('.btn').on('click', function() {
  $('div').html('<p>The button has been replaced</p>')
})

আমাদের আগের উদাহরণের মতই, আমরা বোতামটি নির্বাচন করছি এবং on() ব্যবহার করছি একটি ক্লিক হ্যান্ডলার সংযুক্ত করতে। আমাদের কলব্যাক ফাংশনের ভিতরে, আমরা নতুন HTML বিষয়বস্তু সমন্বিত একটি অনুচ্ছেদ উপাদান দিয়ে HTML বোতামটি প্রতিস্থাপন করছি।

একবার বোতামটি ক্লিক করা হলে:

আমরা নতুন কন্টেন্ট এবং কোন বোতাম আছে! এটি আরও নিয়ন্ত্রিত উপায়ে ব্যবহারকারীর অভিজ্ঞতাকে গাইড করার একটি শক্তিশালী উপায়।

উপসংহার

আমরা দেখেছি কিভাবে jQuery on() শক্তিশালী কোডের কয়েকটি লাইনে একটি উপাদানের সাথে একটি ইভেন্ট হ্যান্ডলার সংযুক্ত করতে পারে। আমরা মৌলিক সিনট্যাক্স শেখার পরে, আমরা কিভাবে jQuery on() এর দুটি উদাহরণ দেখেছি ব্যবহার করা যেতে পারে. এটি পছন্দসই ফলাফলের উপর নির্ভর করে একটি নির্দিষ্ট উপায়ে বা আরও সাধারণ উপায়ে ব্যবহার করার জন্য যথেষ্ট নমনীয়।

যেহেতু এই নির্দেশিকাটি jQuery on() ব্যবহার করার একটি ভূমিকা , কিছু সময় অনুশীলন ব্যয় করতে ভুলবেন না. আপনি ইভেন্ট হ্যান্ডলার আয়ত্তের দিকে অগ্রসর হওয়ার সাথে সাথে আবিষ্কার করার জন্য অনেকগুলি ব্যবহার অপেক্ষা করছে!