জে-কোয়েরী টিউটোরিয়াল
(কোনকিছু লুকানো এবং দেখানো)






1.HIDE এবং SHOW
কোনো div-কে অথবা কোনো image-কে কোনো ব্রাউজারে লুকানো অথবা দেখানোর জন্য আমরা জে-কোয়েরী ব্যবহার করবো।
এই কাজটি করার জন্য আমাদের কিছু কাজ করতে হবে। সেগুলো হলঃ
(ক) প্রথমে আমরা ডেস্কটপে যেকোন নাম দিয়ে একটি ফোল্ডার তৈরী করে নেবো। ফোল্ডারের ভেতর আমাদের পছন্দমত নাম দিয়ে আরেকটি ফোল্ডার তৈরী করে নেবো। ঐ ফোল্ডারে আমাদের পছন্দের ছবি রেখে দেবো।
(খ)মাউসের রাইট বাটন ক্লিক করে একটি নতুন টেক্সট ফাইল তৈরী করে নেবো। এবং এটিকে Rename করে নেবো। আমরা লিখবো index.html তারপর সেভ করে নেবো।
(গ) আবার মাউসের রাইট বাটন ক্লিক করে একটি নতুন টেক্সট ফাইল তৈরী করে নেবো। এবং এটিকে Rename করে নেবো। আমরা লিখবো style.css তারপর সেভ করে নেবো।
(ঘ)এরপরে আমরা আমাদের ব্রাউজারে গিয়ে jquery download করে নেবো। নিচের ছবির মতঃ

অথবা https://code.jquery.com/jquery-3.5.0.min.js এই লিংকে ক্লিক করে সব কোড কপি করুন। এরপর আরো একটি টেক্সট ডকুমেন্ট নিয়ে নিন এবং আগের মত Rename করে লিখুন main.js । এবার main.js এটাকে নোটপ্যাড++ এ ওপেন করে কপি করা jquery-এর সমস্ত ডকুমেন্ট পেস্ট করে দিন এবং সেভ করুন। তারপর আরো একটি নতুন টেক্সট ডকুমেন্ট নিয়ে নিন, এবং এটাকে Rename করে লিখুন script.js । কাজ শেষ।
(ঙ)এখন আমরা নোটপ্যাড++ ওপেন করে নিচের ছবিগুলোর কোডগুলো লিখবো।

এবার এটিকে ব্রাউজারে রান করে টেস্ট করে দেখবো। ‍নিচের ছবির মত দেখাবে।

(চ) এখন আমরা style.css ফাইলটি নোটপ্যাড++এ ওপেন করে style করবো। নিচের ছবির মত অথবা আপনার মনের মত ডিজাইন করে কোড লিখতে পারেন।
আবার ব্রাউজারটিকে রিলোড করে টেস্ট করে দেখতে পারেন, কিন্ত কাজ করবে না। কারন আমরা এখনো জে-কোয়েরী ব্যবহার করিনি।
(ছ)এখন আমরা script.js এই ফাইলটিকে নোটপ্যাড++এ ওপেন করে নিচের ছবির মত কোডগুলো লিখবো।

এবং সেভ করে ব্রাউজারে রান করে দেখলে কাজ করবে।
মনে রাখতে হবে যখন আপনি কোড লিখে ব্রাউজারে রান করে দেখবেন ,তার আগে অবশ্যই সেভ করে নিতে হবে।
এখানে শেষ করছি। শুভ কামনা রইল। না বুঝলে কমেন্ট করবেন।
ধন্যবাদ।