জেকুয়েরি সিলেক্টরসমূহ
জেকুয়েরি লাইব্রেরীর গুরুত্বপূর্ণ অংশ হচ্ছে জেকুয়েরি সিলেক্টর। জেকুয়েরির একটি মেথড কোনো এলিমেন্টে প্রয়োগ করতে হলে অবশ্যই ঐ এলিমেন্টকে প্রথমে সিলেক্ট করতে হবে।
এক নজরে জেকুয়েরি সিলেক্টরসমূহ
| সিলেক্টর | উদাহরণ | যা সিলেক্ট করে |
|---|---|---|
| * | $("*") |
সকল এলিমেন্টকে সিলেক্ট করে। |
| #id | $("#test") |
id="test" যুক্ত সকল এলিমেন্টকে সিলেক্ট করে। |
| .class | $(".samp") |
class="samp" যুক্ত সকল এলিমেন্টকে সিলেক্ট করে। |
| .class, .class | $(".samp, .test") |
ক্লাস "samp" অথবা "test" যুক্ত সকল এলিমেন্টকে সিলেক্ট করে। |
| element | $("div") |
সকল <div> এলিমেন্টকে সিলেক্ট করে। |
| el1,el2,el3 | $("h3,div,p") |
সকল <h3>, <div> এবং <p> এলিমেন্টকে সিলেক্ট করে। |
| :first | $("p:first") |
প্রথম <p> এলিমেন্টকে সিলেক্ট করে। |
| :last | $("p:last") |
সর্বশেষ <p> এলিমেন্টকে সিলেক্ট করে। |
| :even | $("tr:even") |
সকল জোড় <tr> এলিমেন্টকে সিলেক্ট করে। |
| :odd | $("tr:odd") |
সকল বিজোড় <tr> এলিমেন্টকে সিলেক্ট করে। |
| :first-child | $("p:first-child") |
ঐ সকল <p> এলিমেন্ট সিলেক্ট করে যেগুলো তাদের প্যারেন্টের প্রথম চাইল্ড এলিমেন্ট। |
| :first-of-type | $("p:first-of-type") |
ঐ সকল <p> এলিমেন্টকে সিলেক্ট করে যেগুলো তাদের প্যারেন্ট এর প্রথম <p> এলিমেন্ট। |
| :last-child | $("p:last-child") |
ঐ সকল <p> এলিমেন্ট সিলেক্ট করে যেগুলো তাদের প্যারেন্টের শেষ চাইল্ড এলিমেন্ট। |
| :last-of-type | $("p:last-of-type") |
ঐ সকল <p> এলিমেন্টকে সিলেক্ট করে যেগুলো তাদের প্যারেন্ট এর শেষ <p> এলিমেন্ট। |
| :nth-child(n) | $("p:nth-child(2)") |
ঐ সকল <p> এলিমেন্টকে সিলেক্ট করে যেগুলো তাদের প্যারেন্ট এর দ্বিতীয় <p> এলিমেন্ট। |
| :nth-last-child(n) | $("p:nth-last-child(2)") |
ঐ সকল <p> এলিমেন্টকে সিলেক্ট করে যেগুলো নিচের থেকে তাদের প্যারেন্ট এলিমেন্টের দ্বিতীয় চাইল্ড এলিমেন্ট। |
| :nth-of-type(n) | $("p:nth-of-type(2)") |
ঐ সকল <p> এলিমেন্টকে সিলেক্ট করে যেগুলো তাদের প্যারেন্ট এলিমেন্টের দ্বিতীয় <p> এলিমেন্ট। |
| :nth-last-of-type(n) | $("p:nth-last-of-type(2)") |
ঐ সকল <p> এলিমেন্টকে সিলেক্ট করে যেগুলো নিচের দিক থেকে প্যারেন্ট এলিমেন্টের দ্বিতীয় <p> এলিমেন্ট। |
| :only-child | $("p:only-child") |
ঐ সকল <p> এলিমেন্টকে সিলেক্ট করে যেগুলো তাদের প্যারেন্টের একমাত্র চাইল্ড। |
| :only-of-type | $("p:only-of-type") |
ঐ সকল <p> এলিমেন্টকে সিলেক্ট করে যেগুলো তাদের প্যারেন্ট এর একমাত্র <p> এলিমেন্ট। |
| parent > child | $("div > p") |
ঐ সকল <p> এলিমেন্টকে সিলেক্ট করে যেগুলো <div> এলিমেন্টের সরাসরি চাইল্ড এলিমেন্ট। |
| parent descendant | $("div p") |
ঐ সকল <p>এলিমেন্টকে সিলেক্ট করে যেগুলো <div> এলিমেন্টের উত্তরসূরি। |
| element + next | $("div + p") |
ঐ সকল <p> এলিমেন্টকে সিলেক্ট করে যেগুলো <div> এলিমেন্টের পরবর্তী <p> এলিমেন্ট। |
| element ~ siblings | $("div ~ p") |
ঐ সকল <p> এলিমেন্টকে সিলেক্ট করে যেগুলো <div> এলিমেন্টের সহোদর(sibling)। |
| :eq(index) | $("ul li:eq(2)") |
একটি লিস্টের তৃতীয় এলিমেন্টকে সিলেক্ট করে। এক্ষেত্রে ইনডেক্স শুরু হয় ০(শূন্য) দিয়ে। |
| :gt(index) | $("ul li:gt(2)") |
দুই এর অধিক ইনডেক্স নাম্বার যুক্ত লিস্ট এলিমেন্টকে সিলেক্ট করে। |
| :lt(index) | $("ul li:lt(2)") |
দুই এর কম ইনডেক্স নাম্বার যুক্ত লিস্ট এলিমেন্টকে সিলেক্ট করে। |
| :not(selector) | $("input:not(:empty)") |
যেসকল ইনপুট এলিমেন্ট খালি না সেগুলোকে সিলেক্ট করে। |
| :header | $(":header") |
সকল হেডার এলিমেন্টকে সিলেক্ট করে; <h1>, <h2> ... |
| :animated | $(":animated") |
এনিমেশনযুক্ত সকল এলিমেন্টকে সিলেক্ট করে। |
| :focus | $(":focus") |
যে সকল এলিমেন্ট এই মুহুর্তে ফোকাস অবস্থায় আছে সেগুলোকে সিলেক্ট করে। |
| :contains(string) | $(":contains('satt')") |
যে সকল এলিমেন্টে "satt" টেক্সটি থাকবে সেগুলোকে সিলেক্ট করে। |
| :has(selector) | $("div:has(p)") |
যেসকল <div> এলিমেন্টের মধ্যে <p> এলিমেন্ট থাকবে সেগুলোকে সিলেক্ট করে। |
| :empty | $(":empty") |
সকল খালি এলিমেন্ট সিলেক্ট করে। |
| :parent | $(":parent") |
যে সকল এলিমেন্ট অন্য কোন এলিমেন্টের প্যারেন্ট সেগুলোকে সিলেক্ট করে। |
| :hidden | $("p:hidden") |
অদৃশ্য অবস্থায় থাকা সকল <p> এলিমেন্টকে সিলেক্ট করে। |
| :visible | $("div:visible") |
দৃশ্যমান সকল div এলিমেন্ট সিলেক্ট করে। |
| :root | $(":root") |
ডকুমেন্টের মূল এলিমেন্টকে সিলেক্ট করে। |
| :lang(language) | $("p:lang(bn)") |
lang:"bn" এট্রিবিউট যুক্ত <p> এলিমেন্টকে সিলেক্ট করে। |
| [attribute] | $("[href]") |
href এট্রিবিউট যুক্ত সকল এলিমেন্টকে সিলেক্ট করে। |
| [attribute=value] | $("[href='index.php']") |
href এট্রিবিউটের ভ্যালু "index.php" বিশিষ্ট সকল এলিমেন্টকে সিলেক্ট করে। |
| [attribute!=value] | $("[href!='index.php']") |
যে সকল এলিমেন্টের href এট্রিবিউটের ভ্যালু "index.php" নয়, ঐ সকল এলিমেন্টকে সিলেক্ট করে। |
| [attribute$=value] | $("[href$='.png']") |
যে সকল এলিমেন্টের href এট্রিবিউটের ভ্যালু ".png" দ্বারা শেষ হয় ঐ সকল এলিমেন্টকে সিলেক্ট করে। |
| [attribute|=value] | $("[title|='Academy']") |
যে সকল এলিমেন্টের title এট্রিবিউটের ভ্যালু 'Academy' এর সমান অথবা 'Academy' দিয়ে শুরু হয় সেগুলোকে সিলেক্ট করে। |
| [attribute^=value] | $("[title^='Aca']") |
যে সকল এলিমেন্টের title এট্রিবিউটের ভ্যালু "Aca" দিয়ে শুরু হয় সেগুলোকে সিলেক্ট করে। |
| [attribute~=value] | $("[title~='satt']") |
যে সকল এলিমেন্টের title এট্রিবিউটের ভ্যালু হিসাব একটি নির্দিষ্ট শব্দ "satt" থাকে সেগুলোকে সিলেক্ট করে। |
| [attribute*=value] | $("[title*='satt']") |
যে সকল এলিমেন্টে title এট্রিবিউটের ভ্যালুর মধ্যে "satt" থাকে সেগুলোকে সিলেক্ট করে। |
| :input | $(":input") |
সকল সকল ইনপুট এলিমেন্টকে সিলেক্ট করে। |
| :text | $(":text") |
type="text" যুক্ত সকল ইনপুট এলিমেন্টকে সিলেক্ট করে। |
| :password | $(":password") |
type="password" যুক্ত সকল ইনপুট এলিমেন্টকে সিলেক্ট করে। |
| :radio | $(":radio") |
type="radio" যুক্ত সকল ইনপুট এলিমেন্টকে সিলেক্ট করে। |
| :checkbox | $(":checkbox") |
type="checkbox" যুক্ত সকল ইনপুট এলিমেন্টকে সিলেক্ট করে। |
| :submit | $(":submit") |
type="submit" যুক্ত সকল ইনপুট এলিমেন্টকে সিলেক্ট করে। |
| :reset | $(":reset") |
type="reset" যুক্ত সকল ইনপুট এলিমেন্টকে সিলেক্ট করে। |
| :button | $(":button") |
type="button" যুক্ত সকল ইনপুট এলিমেন্টকে সিলেক্ট করে। |
| :image | $(":image") |
type="image" যুক্ত সকল ইনপুট এলিমেন্টকে সিলেক্ট করে। |
| :file | $(":file") |
type="file" যুক্ত সকল ইনপুট এলিমেন্টকে সিলেক্ট করে। |
| :enabled | $(":enabled") |
সকল সক্ষম(enabled) ইনপুট এলিমেন্টকে সিলেক্ট করে। |
| :disabled | $(":disabled") |
সকল অক্ষম(disabled) ইনপুট এলিমেন্টকে সিলেক্ট করে। |
| :selected | $(":selected") |
সকল selected ইনপুট এলিমেন্টকে সিলেক্ট করে। |
| :checked | $(":checked") |
সকল checked ইনপুট এলিমেন্টকে সিলেক্ট করে। |