انتخاب گرها (Selectors Reference)

در jQuery، «انتخاب گرهای jQuery» ابزارهایی هستند که کمک می کنند عناصر صفحه را پیدا کنیم. مثل وقتی در کلاس، فقط دانش آموزان ردیف اول را صدا می زنی.

انتخاب گرهای jQuery یعنی چه؟

انتخاب گر (Selector) یک الگوی کوتاه برای پیدا کردن عنصر است. مثلا #id یعنی عنصری که id مشخصی دارد. همچنین .class یعنی همه عناصری که یک کلاس خاص دارند.

در این رفرنس، سایت منبع یک جدول بزرگ نشان می دهد. ستون اول خود انتخاب گر است، ستون دوم مثال jQuery، ستون سوم توضیح می دهد چه عناصری انتخاب می شوند.

گروه های مهم انتخاب گرهای jQuery

در جدول منبع، انتخاب گرهای jQuery در چند گروه مهم دیده می شوند:

• انتخاب گرهای ساده مثل *، #id، .class و نام تگ.
• ترکیب چند تگ یا کلاس مثل h1,div,p یا .intro,.demo.
• انتخاب گرهای موقعیت مثل :first، :last، :even و :odd.
• انتخاب گرهای فرزند و والد مثل div > p و div p.
• انتخاب گرهای بر اساس شاخص مثل :eq()، :gt()، :lt().
• انتخاب گرهای محتوایی مثل :contains()، :empty، :has().
• انتخاب گرهای صفتی مثل [href]، [href='default.htm']، [title^='Tom'].
• انتخاب گرهای فرم مثل :input، :text، :checkbox، :selected و دیگرها.

نمونه ساده کار با انتخاب گرها

یک مثال خیلی ساده از استفاده انتخاب گر کلاس و تگ را ببین:

$(document).ready(function() {
  $("p.intro").css("background-color", "yellow");
});

مشاهده در ادیتور

در این مثال، انتخاب گر p.intro همه تگ های <p> با کلاس intro را می گیرد. بعد با متد css() رنگ پس زمینه آن ها زرد می شود.

خواندن جدول رفرنس انتخاب گرهای jQuery

در منبع، یک جدول کامل از انتخاب گرهای jQuery قرار دارد. چند ردیف مهم آن این ها هستند:

• $("*") همه عناصر صفحه را انتخاب می کند.
• $("#lastname") عنصری با id="lastname" را انتخاب می کند.
• $(".intro") همه عناصری با کلاس intro را می گیرد.
• $("p") همه تگ های <p> را انتخاب می کند.
• $("p:first") فقط اولین <p> را برمی گرداند.
• $("tr:odd") تمام سطرهای فرد جدول را می گیرد.
• $("div > p") فقط <p>هایی که فرزند مستقیم div هستند را می گیرد.
• $("ul li:eq(3)") چهارمین li را می گیرد؛ چون اندیس از صفر شروع می شود.
• $("[href$='.jpg']") عناصری با href که با .jpg تمام می شود را می گیرد.
• $(":input") همه ورودی های فرم را برمی گرداند.

هر وقت هنگام کار با انتخاب گرهای jQuery گیج شدی، به این جدول نگاه کن. ستون «Example» دقیقا همان چیزی است که در کد می نویسی.

چطور سریع انتخاب گر درست را پیدا کنیم؟

برای تمرین انتخاب گرها، منبع یک ابزار ساده معرفی کرده است.

1. اول تصمیم بگیر دقیقا کدام عناصر را لازم داری.
2. بعد از جدول یک انتخاب گر مناسب پیدا کن.
3. در ابزار jQuery Selector Tester آن را امتحان کن.

اگر نیاز به دیدن تصویر کلی داشتی، می توانی اول صفحه نمای کلی مرجع jQuery را ببینی. بعد برگردی سراغ جزئیات انتخاب گرها.

جمع بندی سریع

• انتخاب گرهای jQuery برای پیدا کردن عناصر صفحه استفاده می شوند.
• این صفحه یک رفرنس جمع وجور از انواع انتخاب گرهاست.
• جدول منبع، مثال واقعی هر انتخاب گر را نشان می دهد.
• از ابزار Selector Tester برای تمرین سریع استفاده کن.
• برای دیدن تصویر کلی، صفحه نمای کلی مرجع jQuery را ببین.