jQuery তে যে কাজটি করা হয় তা মেথড আকারে সিলেক্টরের উপরে এপ্লাই করা হয়। আর এখন বলছি সিলেক্টর কি জিনিস, আপনি যেহেতু CSS দেখেছেন সেই CSS সিলেক্টরগুলোকেই jQuery -তে jQuery এর স্টাইলে লিখা হয়
ঠিক এভাবে।
আর এতে মেথড এপ্লাই করা হয়
$('সিলেক্টর').methodName(আর্গুমেন্ট-১, আর্গুমেন্ট-২....)
.anotherMedhod(এক বা একাধিক প্রয়োজনীয় আর্গুমেন্ট বা প্যারামিটার)
.end()
.evenAnotherMethod(আর্গুমেন্ট-১, আর্গুমেন্ট-২....);
এভাবে। উপরের end() ও কিন্তু একটি মেথড যেটি ব্যবহার করেছি এর পূর্ববর্তী মেথডের কার্যকারিতা টারমিনেট করার জন্য। আর মেথডে আর্গুমেন্ট হতে পারে কোন ভেরিয়েবল, হতে পারে কোন ইভেন্ট যেমন ক্লিক, ফোকাস, হোভার কিংবা হতে পারে কোন অবজেক্ট কিংবা কোন ফাংশন। এই ফাংশন হতে পারে স্বনির্ভর ও স্বয়ংসম্পূর্ণ একক ফাংশন কিংবা হতে পারে ডেকে আনা কোন বহিরাগত ফাংশন যা আপনি এখানে ডাকার পূর্বে অন্যথায় ডিক্লেয়ার করেছেন এবং তার নির্দিষ্ট ফাংশন নাম অনুযায়ী তাকে ডাকা হয়।
সীমান্ত ঈগল (মেহেদী) লিখেছেন:1. কোডটার ব্যাখ্যা- ?
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
আপনি $(document) দিয়ে আপনার কাংখিত ওয়েবপেজটিকে jQuery এর আদলে সিলেক্ট করেছেন
তারপরে আপনি সেই সিলেক্টরের উপরে .ready() মেথডটি এপ্লাই করেছেন যাতে আপনি আর্গুমেন্ট হিসেবে একটি Self-invoking anonymous ফাংশন বা স্বনিয়ন্ত্রিত এবং নামবিহীন একটি অ্যানোনিমাস ফাংশনকে ব্যবহার করেছেন।
আর ডকুমেন্ট রেডি মেথড প্রয়োগের ফলে আপনার এই মেথডটি তখনই কাজ করবে যখন পুরো ডকুমেন্টটি ব্রাউজারে সম্পূর্ণ লোড হবে। মানে $(document).ready() এই জন্যই দিয়েছেন যেন আপনার jQuery (জাভাস্ক্রিপ্ট) রান করার পূর্বে ব্রাউজারে ওয়েব পেজটি লোড হওয়া পর্যন্ত অপেক্ষা করে। তাই যখনই পেজের কন্টেন্টগুলো পুরোপুরি লোড হয়ে যাবে তখনই jQuery এক্সিকিউট করবে এবং তখন নিচের কোডটি রান করবে যেটি আপনি ready() মেথডের অভ্যন্তরে একটি অ্যানোনিমাস ফাংশন আকারে লিখেছেন
$("p").click(function(){
$(this).hide();
});
এখানে $("p") মানে আপনি আপনার স্ক্রিপ্টে কাংখিত ওয়েবপেজের সকল p element তথা প্যারাগ্রাফ এলিমেন্টকে সিলেক্ট করলেন যেটিতে আপনি click() মেথডটি প্রয়োগ করলেন। আবারও পূর্বের ন্যায় click() মেথডটির ভিতর একটি অ্যানোনিমাস ফাংশন লিখেছেন যেটির কোন নাম নেই। একারণেই তাকে বলা হচ্ছে অ্যানোনিমাস ফাংশন।
আর আপনি সেই ফাংশনে $(this).hide(); অংশটি দিয়েছেন যেন ওয়েবপেজের যেকোন প্যারাগ্রাফের ওপরে ক্লিক করলে পরে ফাংশনটি রান করে এবং তখন এই অংশটি এক্সিকিউট করবে।
এই অংশের ব্যাখ্যা:
$(this) মানে আপনি ইতিমধ্যে যেটিকে সিলেক্ট করে রেখেছেন সেটিকেই বুঝাচ্ছে। আর এক্ষেত্রে সেটি হবে প্যারাগ্রাফ এলিমেন্ট । তার পরের অংশ অর্থাৎ আপনার বর্তমান jQuery সিলেক্টরের উপর hide() মেথড প্রয়োগ করেছেন। এর কাজটি নিশ্চয়ই অনুমেয় কেননা আপনি যেই click() মেথডটি ব্যবহার করেছিলেন সেটির দ্বারা এই hide() মেথডটি পরিচালিত হবে। তার মানে হলো যখন কোন প্যারাগ্রাফের উপর ক্লিক করা হবে তখন সেই প্যারাগ্রাফটি হাইড হয়ে যাবে বা লুকিয়ে যাবে।
আর click() এখানে jQuery মেথড হলেও এটি মূলত একটি জাভাস্ক্রিপ্ট ইভেন্ট। jQuery এর পূর্ববর্তী ভার্সনে এটিকে সেভাবেই ডিক্লেয়ার করা হয় বিধায় সেটির প্রয়োগ w3schools সাইটের এক্সামপল কোড-এ click কে jQuery মেথড আকারে লিখেছে। এটিকে jQuery এর নতুনতম ভার্সনগুলোতে on() মেথড এর ভেতর আর্গুমেন্ট আকারে লিখা হয়। যেমন
$('p').on( "click", function() {
$( this ).hide(3000) );
আর এখানে আমি যেভাবে লিখেছি এটি আপনি পূর্বের কোডটিকে অনুরূপে পরিবর্তিত করে চেস্টা করে দেখতে পারেন। কাজ একই হবে কিন্তু এটি আগের টির চেয়ে উত্তম। কেননা এটি বেশি বিবৃত এবং লজিক্যাল। আর সব চেয়ে বড় কথা এটি আপডেটেড।
.hide() মেথডে 3000 দিয়েছি যাতে আপনার উপরে বর্ণিত সিলেক্টরের উপর যে হাইড ইফেক্টটি প্রয়োগ হবে সেটি অপেক্ষাকৃত স্বাভাবিক গতির চেয়ে ধীরগতির হয় আর প্যারাগ্রাফটিতে ক্লিক করলে নির্দিষ্টভাবে 3 সেকেন্ড সময়ে প্যারাগ্রাফটি হাইড হয়।
আর
$(document).ready(function(){blah blah blah});)
এর ইকোভ্যালেন্ট নতুন স্টাইল হচ্ছে
$(function(){
function(){blah blah blah});
})
এভাবে আপনার শেয়ার করা কোডটিকে পরিবর্তন করে লিখলে সেটি হয় নিচের মতন
$(function(){
$("p").click(function(){
$(this).hide();
});
});
আমার পরামর্শ থাকবে jQuery শেখার আগে JavaScript শেখার। অন্তত জাভাস্ক্রিপ্টের বেসিক জিনিসগুলো বুঝা অত্যন্ত জরুরী যেমন ভেরিয়েবল, ফাংশন, কন্ট্রোল স্ট্রাকচার, লুপ, অবজেক্ট ইত্যাদি। আর তার পরে jQuery কোন বিষয়ই না।
আপনি jQuery তে বার বার একই কাজ করবেন। সিলেক্ট এলিমেন্ট, তার পর এর উপর যেই ইফেক্ট দিতে চান সেই মেথড প্রয়োগ করবেন। এই কাজটিই ঘুরে ফিরে বার বার করতে যাচ্ছেন তাই jQuery সহজ জাভাস্ক্রিপ্ট এর তুলনায়। তাই বলে জাভাস্ক্রিপ্ট শেখা কিন্তু কঠিন নয়।
আর পুরনো কোড এক্সাম্পল হিসেবে ব্যবহার করে এবং সেগুলোকে নিয়মিত আপডেট করে না বলেই w3schools নট রিকোমেন্ডেড। আপনি কম সময়ে jQuery তে দক্ষ হতে চাইলে আমি যেটি রিকোমেন্ড করবো সেটি হলো TutsPlus এর Jeffrey Way'র 30 Days to Learn jQyery। ইউটিউভে এর সম্পূর্ণ লেকচারগুলোর প্লে-লিস্ট রয়েছে এখানে। সেখানে কোর্সটি ধারাবাহিক আকারে সাজানো আছে যাতে আপনার শিখতে সুবিধা হবে। শুভ কামনা রইলো।
লেখাটি GPL v3 এর অধীনে প্রকাশিত
