مرجع انتخابگرها در jQuery
دسته بندی : آموزش jQuery سطح مقاله : متوسط زمان مطالعه : 7 دقیقه آخرین بروز رسانی: 10 خرداد 1401مرجع انتخابگرها در jQuery در این مقاله از سری مقالات آموزش جی کوئری دویکس بررسی می‌شود. در زیر لیستی جامع از تمام انتخابگرهای jQuery آمده است.
مرجع انتخابگرها در jQuery – لیست Selectorها در جی کوئری
| انتخابگر | مثال | شرح |
| * | $(“*”) | این انتخابگر جهانی نامیده می‌شود و برای انتخاب همه عناصر استفاده می‌شود |
| #id | $(“#foo”) | در این مثال عنصر با “id=foo” انتخاب می‌شود |
| .class | $(“.foo”) | در این مثال همه عناصر با “class=foo” انتخاب می‌شوند |
| class,.class | $(“.foo,.bar”) | در این مثال همه عناصر با کلاس “foo” و یا “bar” انتخاب می‌شوند |
| element | $(“p”) | در این مثال تمام عناصر p انتخاب می‌شوند |
| el1,el2,el3 | $(“h1,div,p”) | در این مثال تمام عناصر h1 ، div و p انتخاب می‌شوند |
| el1,el2,el3: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(3)”) | در این مثال تمام عناصر p که سومین فرزند والدین خود هستند انتخاب می‌شوند |
| :nth-last-child(n) | $(“p:nth-last-child(3)”) | در این مثال تمام عناصر p که سومین فرزند والدینشان هستند، از آخرین فرزند، انتخاب می‌شوند |
| :nth-of-type(n) | $(“p:nth-of-type(3)”) | در این مثال تمام عناصر p که سومین عنصر p والد خود هستند انتخاب می‌شوند |
| :nth-last-of-type(n) | $(“p:nth-last-of-type(3)”) | در این مثال تمام عناصر p که سومین عنصر p هستند انتخاب می‌شوند و این انتخاب از آخرین فرزند حساب می‌شود |
| :only-child | $(“p:only-child”) | در این مثال تمام عناصر p که تنها فرزند والد خود هستند انتخاب می‌شوند |
| :only-of-type | $(“p:only-of-type”) | در این مثال تمام عناصر p که در نوع خود تنها فرزند والد خود هستند انتخاب می‌شوند |
| parent > child | $(“div > p”) | در این مثال تمام عناصر p که فرزند مستقیم یک عنصر div هستند انتخاب می‌شوند |
| parent descendant | $(“div p”) | در این مثال تمام عناصر p که از فرزندان یک عنصر div هستند انتخاب می‌شوند |
| element + next | $(“div + p”) | در این مثال هر عنصر p که در کنار هر عنصر div قرار دارد انتخاب می‌شود |
| element ~ siblings | $(“div ~ p”) | در این مثال تمام عناصر p که خواهر و برادر (هم نیا) یک عنصر div هستند انتخاب می‌شوند |
| :eq(index) | $(“ul li:eq(3)”) | در این مثال عنصر چهارم در لیست ul انتخاب می‌شود (شاخص از 0 شروع می‌شود) |
| :gt(no) | $(“ul li:gt(2)”) | در این مثال عناصر لیست ul با شاخص بزرگتر از 2 انتخاب می‌شوند |
| :lt(no) | $(“ul li:lt(2)”) | در این مثال عناصر لیست ul با شاخص کمتر از 2 انتخاب می‌شوند |
| :not(selector) | $(“input:not(:empty)”) | در این مثال تمام عناصر input که خالی نیستند انتخاب می‌شوند |
| :header | $(“:header”) | در این مثال تمام عناصر هدر (h1، h2 … h6) انتخاب می‌شوند |
| :animated | $(“:animated”) | در این مثال تمام عناصر animated انتخاب می‌شوند |
| :focus | $(“:focus”) | در این مثال عنصری که در حال حاضر ویژگی focus برای آن تعریف شده انتخاب می‌شود |
| :contains(text) | $(“:contains(‘Foo’)”) | در این مثال همه عناصری که حاوی متن “Foo” هستند انتخاب می‌شوند |
| :has(selector) | $(“div:has(p)”) | در این مثال تمام عناصر div که دارای عنصر p هستند انتخاب می‌شوند |
| :empty | $(“:empty”) | در این مثال تمام عناصر خالی انتخاب می‌شوند |
| :parent | $(“:parent”) | در این مثال همه عناصری که والد عنصر دیگری هستند انتخاب می‌شوند |
| :hidden | $(“p:hidden”) | در این مثال تمام عناصر p پنهان شده انتخاب می‌شوند |
| :visible | $(“table:visible”) | در این مثال همه جداول قابل مشاهده انتخاب می‌شوند |
| :root | $(“:root”) | در این مثال عنصر ریشه سند انتخاب می‌شود |
| :lang(language) | $(“p:lang(de)”) | در این مثال همه عناصر p با مقدار مشخصه lang که با “de” شروع می‌شوند انتخاب می‌شوند |
| [attribute] | $(“[href]”) | در این مثال همه عناصر با ویژگی href انتخاب می‌شوند |
| [attribute=value] | $(“[href=’index.htm’]”) | در این مثال همه عناصر با مقدار ویژگی href برابر با “index.htm” انتخاب می‌شوند |
| [attribute!=value] | $(“[href!=’index.htm’]”) | در این مثال تمام عناصر با مقدار ویژگی href که برابر با “index.htm” نیست انتخاب می‌شوند |
| [attribute$=value] | $(“[href$=’.jpg’]”) | در این مثال تمام عناصر با مقدار مشخصه href که به “.jpg” ختم می‌شود انتخاب می‌شوند |
| [attribute|=value] | $(“[title|=’Tomorrow’]”) | در این مثال همه عناصر با مقدار مشخصه title برابر با “Tomorrow” یا رشته‌ای با مقدار “Tomorrow” انتخاب می‌شوند |
| [attribute^=value] | $(“[title^=’Tom’]”) | در این مثال همه عناصری که با مقدار مشخصه title که با “Tom” شروع می‌شوند انتخاب می‌شوند |
| [attribute~=value] | $(“[title~=’foo’]”) | در این مثال همه عناصر با مقدار مشخصه title حاوی کلمه خاص “foo” انتخاب می‌شوند |
| [attribute*=value] | $(“[title*=’foo’]”) | در این مثال همه عناصر با مقدار مشخصه title حاوی کلمه “foo” انتخاب می‌شوند |
| :input | $(“:input”) | در این مثال تمام عناصر input انتخاب می‌شوند |
| :text | $(“:text”) | در این مثال تمام عناصر input با نوع text انتخاب می‌شوند |
| :password | $(“:password”) | در این مثال تمام عناصر input با نوع password انتخاب می‌شوند |
| :radio | $(“:radio”) | در این مثال تمام عناصر input با نوع radio انتخاب می‌شوند |
| :checkbox | $(“:checkbox”) | در این مثال تمام عناصر input با نوع checkbox انتخاب می‌شوند |
| :submit | $(“:submit”) | در این مثال تمام عناصر input با نوع submit انتخاب می‌شوند |
| :reset | $(“:reset”) | در این مثال تمام عناصر input با نوع reset انتخاب می‌شوند |
| :button | $(“:button”) | در این مثال تمام عناصر input با نوع button انتخاب می‌شوند |
| :image | $(“:image”) | در این مثال تمام عناصر input با نوع image انتخاب می‌شوند |
| :file | $(“:file”) | در این مثال تمام عناصر input با نوع file انتخاب می‌شوند |
| :enabled | $(“:enabled”) | در این مثال تمام عناصر input فعال انتخاب می‌شوند |
| :disabled | $(“:disabled”) | در این مثال تمام عناصر input غیر فعال انتخاب می‌شوند |
| :selected | $(“:selected”) | در این مثال تمام عناصر input انتخاب شده، انتخاب می‌شوند |
| :checked | $(“:checked”) | در این مثال تمام عناصر input چک شده (checked) انتخاب می‌شوند |
مقاله مرجع انتخابگرها در jQuery در اینجا به پایان می‌رسد، نظرات خود را با ما به اشتراک بگذارید.
این مقاله چقدر براتون مفید بود؟