jQuery নির্বাচক jQuery লাইব্রেরির সবচেয়ে গুরুত্বপূর্ণ অংশ।
jQuery নির্বাচক
jQuery নির্বাচক আপনাকে এইচটিএমএল উপাদান (গুলি) নির্বাচন এবং নিপূণভাবে ব্যবহার করার অনুমতি দেয়। HTML উপাদান আইডি, ক্লাস, টাইপ, এট্রিবিউট, এট্রিবিউট এর মান সহ আরও অনেক কিছুর উপর ভিত্তি করে “খুঁজতে” (বা নির্বাচন করতে) jQuery নির্বাচক ব্যবহৃত হয়। এটা বিদ্যমান সিএসএস সিলেক্টর এর উপর নির্ভর করে এবং এ ছাড়াও, এটার কিছু নিজস্ব সিলেক্টর আছে।
JQuery মধ্যে সকল নির্বাচক ডলার চিহ্ন এবং বন্ধনী দিয়ে শুরু হয়: $ ()।
এলিমেন্ট নির্বাচক
JQuery এলিমেন্ট নির্বাচক এলিমেন্ট এর নাম অনুসারে নির্বাচন করে।
আপনি একটি পেজ এর সকল <p> এলিমেন্ট নির্বাচন করতে পারেন:
$ (“p”)
উদাহরণ:
যখন একজন ব্যবহারকারী একটি বাটন ক্লিক করবে, তখন সকল <p> এলিমেন্ট অদৃশ্য হয়ে যাবে:
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
#id নির্বাচক
JQuery এর #id নির্বাচক একটি HTML ট্যাগ এর আইডি অ্যাট্রিবিউট ব্যবহার করে নির্দিষ্ট এলিমেন্ট খোজে।
একটি পেজ এর মধ্যে আইডি অনন্য হতে হবে,যাতে নির্দিষ্ট এলিমেন্ট খুঁজে বের করার জন্য আপনি #id নির্বাচক ব্যবহার করতে পারেন।
নির্দষ্ট আইডি বিশিষ্ট কোন এলিমেন্ট খুঁজে বের করার জন্য উক্ত আইডি এর পূর্বে # (হ্যাস) ব্যবহার করুন।
$ (“#test”)
উদাহরণ
একজন ব্যবহারকারী যখন একটি বাটন ক্লিক করে, id=”test” এলিমেন্ট অদৃশ্য হয়ে যাবে:
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
JQuery নির্বাচক এর আরো উদাহরণ
| সিনটেক্স | বর্ণনা |
| $(“*”) | সকল এলিমেন্ট নির্বাচন করে |
| $(this) | বর্তমান এইচটিএমএল এলিমেন্ট নির্বাচন করে |
| $(“p.intro”) | class=”intro” বিশিষ্ট সকল <p> এলিমেন্ট নির্বাচন করে |
| $(“p:first”) | প্রথম <p> এলিমেন্ট নির্বাচন করে |
| $(“ul li:first”) | প্রথম <ul> এলিমেন্ট এর প্রথম <li> এলিমেন্ট নির্বাচন করে |
| $(“ul li:first-child”) | প্রতিটি <ul> এলিমেন্ট এর প্রথম <li> এলিমেন্ট নির্বাচন করে |
| $(“[href]”) | href এট্রিবিউট বিশিষ্ট সকল এলিমেন্ট নির্বাচন করে |
| $(“a[target=’_blank’]”) | টার্গেন এট্রিবিউট মান “_blank” বিশিষ্ট সকল <a> এলিমেন্ট নির্বাচন করে |
| $(“a[target!=’_blank’]”) | টার্গেন এট্রিবিউট মান NOT সমান “_blank” বিশিষ্ট সকল <a> এলিমেন্ট নির্বাচন করে |
| $(“:button”) | type=”button” এর সকল <button> এবং <input> এলিমেন্ট নির্বাচন করে |
| $(“tr:even”) | সকল জোড় <tr> এলিমেন্ট নির্বাচন করে |
| $(“tr:odd”) | সকল বেজোড় <tr> এলিমেন্ট নির্বাচন করে |
একটি পৃথক ফাইলে jQuery ফাংশান রাখা
যদি আপনার ওয়েব সাইটে প্রচুর সংখ্যক পেজ থাকে এবং jQuery ফাংশন সহজে ব্যবহার করতে চান তাহলে jQuery ফাংশনগুলোকে একটি আলাদা ফাইলে রাখতে পারেন, যার এক্সটেনশন হবে .js
আমাদের টিউটোরিয়াল এর উদাহরণগুলোতে jQuery ফাংশন হেড সেকশন এর ভিতরে রাখা হয়েছে। কিছু কিছু ক্ষেত্রে নিচের মতো করে আলাদা ফাইল এও রাখা হয়েছে:
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”>
</script>
<script src=”my_jquery_functions.js”></script>
</head>