একটি এইচটিএমএল ডকুমেন্টের কোন এলিমেন্ট বা কোন এলিমেন্টের আইডি/ক্লাস ব্যবহার করে যেমন আমরা সেই এইচটিএমএল এলিমেন্ট নির্ধারণ করে তার জন্য সিএসএস স্টাইল প্রয়োগ করতে পারি, যেক্যুয়েরীতেও ঠিক একই ভাবে কোন এলিমেন্টকে নির্ধারণ করে যেক্যুয়েরী কোড বা রুল প্রয়োগ করতে হয়।
যেক্যুয়েরী সিলেক্টর ব্যবহার করে এইচটিএমএল এলিমেন্ট কে গ্রুপ হিসাবে অথবা একটি একক উপাদান হিসাবে নির্ধারণ করার পর, তা পরিবর্ধন অর্থাৎ manipulate করা যায়। সিলেক্টর ব্যবহার করে ওয়েব পেজ এর পছন্দ অনুযায়ী কোন এলিমেন্ট কে নির্ধারণ বা grub করা যায়। যেক্যুয়েরী বিদ্যমান ( existing ) সিএসএস Selector গুলো সমর্থন করে এবং এ ছাড়াও, এর কিছু নিজস্ব selector আছে। সব ধরনের যেক্যুয়েরী সিলেক্টর গুলো dollar ছিনহ এবং parentheses: $() এর মাধ্যমে শুরু করতে হয়।
যেক্যুয়েরীর এলিমেন্ট সিলেক্টর গুলো এইচটিএমএল এলিমেন্টের নাম অনুসারে কোন এইচটিএমএল এলিমেন্ট নির্ধারণ করে। নিচে এইচটিএমএল এলিমেন্ট সিলেক্টর এর সিনট্যাক্স দেখুন।
$("p")
নিচের উদাহরণে কিছু কোড দেখুন, যেখানে যেক্যুয়েরী এর এলিমেন্ট সিলেক্টর ব্যবহার করা হয়েছে। এখনে ব্যবহারকারী বা user যখন কোন paragraph এর ওপর মাউস ক্লিক করে তখন সকল paragraph গুলো hide হয়।
$(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); });
একই class যুক্ত এইচটিএমএল এলিমেন্ট কে নির্ধারণ করার জন্য class বা ID সিলেক্টর ব্যবহার করা হয়। উদাহরণ স্বরূপ, যদি আমরা .test নাম যুক্ত ক্লাসের যে সকল এইচটিএমএল এলিমেন্ট আছে তাদেরকে নির্ধারণ অর্থাৎ সিলেক্ট করতে চাই, তবে .test ক্লাস কে reference হিসেবে ব্যবহার করতে হবে।
যেক্যুয়েরীতে ক্লাস সিলেক্টর ব্যবহার করার জন্য নিচে একটি সিনট্যাক্স দেখুন।
$(".test")
নিচে একটি উদাহরণ দেখুন, যেখানে যেক্যুয়েরী এর ক্লাস সিলেক্টর ব্যবহার করা হয়েছে। এখানে ব্যবহারকারী অর্থাৎ user যখন .test নাম যুক্ত প্যারাগ্রাফ এর ওপর মাউস ক্লিক করে তখন সকল .test ক্লাস এর নাম যুক্ত প্যারাগ্রাফ গুলো hide হয়।
$(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); });
নির্দিষ্ট কোন এইচটিএমএল এলিমেন্ট এর উপর কোন কার্য সম্পাদন অর্থাৎ action সম্পন্ন করতে চাইলে, ID সিলেক্টর ব্যবহার করা হয়। কারন, একই ID একাধিক এইচটিএমএল এলিমেন্টে থাকে না। নিচে এইচটিএমএল এলিমেন্ট আইডি সিলেক্টর ব্যবহার করার সিনট্যাক্স দেখুন।
$("#test")
নিচের উদাহরণে কিছু কোড দেখুন, যেখানে যেক্যুয়েরী এর আইডি সিলেক্টর ব্যবহার করা হয়েছে। এখনে ব্যবহারকারী অর্থাৎ user যখন কোন #test নাম এর আইডি যুক্ত প্যারাগ্রাফ এর ওপর মাউস ক্লিক করে তখন সকল #test নাম এর আইডি যুক্ত প্যারাগ্রাফ গুলো hide হয়।
$(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); });
কোন এইচটিএমএল এলিমেন্টকে নির্ধারণ করার জন্য যেক্যুয়েরীতে আরও বিভিন্নপ্রকার সিলেক্টর রয়েছে। নিচে এগুলোর নাম দেখুন।
শেয়ার করুন
