انتخابگرها (Selector) در jQuery
کتابخانه جی کوئری توانایی استفاده از انتخابگرهای CSS را به ما میدهد تا بتوانیم به سرعت و به آسانی به عناصر و گروههای عناصر موجود در DOM دسترسی پیدا کنیم. انتخابگر در jQuery یک تابع است که بر اساس معیارهای داده شده عناصر تطبیقی را از DOM پیدا می کند. به عبارت دیگر می توان گفت که انتخابگر، یک عنصر HTML را انتخاب می کند تا ما بتوانیم عملیات های مختلف را بر روی آن اعمال کنیم.
انتخابگر $()
انتخابگرهای jQuery با علامت $ و پرانتز شرو می شوند (نمونه یک انتخابگر $()). برای انتخاب یک عنصر با استفاده از انتخابگر، می توانید از یکی از سه روش زیر استفاده کنید:
ردیف | توضیحات |
1 | اسم تگ انتخاب یک عنصر با استفاده از اسم تگ آن. برای مثال $(‘p’) تمامی تگ های p موجود در سند را انتخاب می کند. |
2 | شناسه (Id) تگ انتخاب یک عنصر با استفاده از شناسه آن. برای مثال $(‘#some-id’) عنصری را که شناسه آن some-id باشد انتخاب می کند. |
3 | نام کلاس (Class) تگ انتخاب یک عنصر با استفاده از کلاس آن. برای مثال $(‘.some-class’) تمام عناصری که کلاس some-class را دارند انتخاب می کند. |
مثال
در زیر یک مثال ساده است که از Tag Selector استفاده می کند را مشاهده می کنید. مثال زیر همه تگ p انتخاب می کند.
نتیجه کد بالا:
نحوه استفاده از انتخابگرها در jQuery
در زیر لیست انتخابگرهای اصلی را مشاهده می کنید که با یک مثال توضیح داده شده اند.
ردیف | توضیحات |
1 | نام (Name) تمام عناصری که با نام مشخص شده مطابقت دارند را انتخاب می کند. |
2 | شناسه (#ID) عنصری را که منطبق با شناسه داده شده است، انتخاب می کند. |
3 | کلاس (.Class) عناصری را که منطبق با کلاس داده شده هستند، انتخاب می کند. |
4 | جهانی (*) تمامی عناصر موجود در DOM را انتخاب می کند. |
5 | انتخاب چندتایی چند عنصر مختلف را انتخاب می کند. |
مثال های انتخابگرها
همانند قواعد و سینتکس نمونه های بالا، نمونه های زیر به شما در درک و استفاده از انواع مختلف انتخابگرهای مفید به شما کمک می کنند.
هایی که ایندکس فرد دارند را انتخاب می کند.ردیف | توضیحات |
1 | $(‘*’) این انتخابگر همه عناصر موجود در سند را انتخاب می کند. |
2 | $(“p > *”) این انتخابگر تمام عناصری که به عنوان فرزند عنصر هستند انتخاب می کند. |
3 | $(“#specialID”) عنصری که شناسه آن specialID باشد، انتخاب می کند. |
4 | $(“.specialClass”) تمام عناصری که کلاس specialClass را داشته باشند، انتخاب می کند. |
5 | $(“li:not(.myclass)”) تمام عناصر |
6 | $(“a#specialID.specialClass”) این انتخابگر لینک هایی را که دارای شناسه specialID و کلاس specialClass هستند، انتخاب می کند. |
7 | $(“p a.specialClass”) این انتخابگر لینک هایی را که در داخل عنصر و دارای کلاس specialClass هستند، را انتخاب می کند. |
8 | $(“ul li:first”) اولین عنصر |
9 | $(“#container p”) همه عناصر که زیر مجموعه یک عنصر پدر با شناسه container هستند را انتخاب می کند. |
10 | $(“li > ul”) همه عناصر
|
11 | $(“strong + em”) اولین عنصر که بعد از عنصر قرار دارد را انتخاب می کند. |
12 | $(“p ~ ul”) تمام عنصر
قرار دارند را انتخاب می کند. |
13 | $(“code, em, strong”) تمام عناصر code، em و strong موجود در سند را انتخاب می کند. |
14 | $(“p strong, .myclass”) عناصر که زیر مجموعه عنصر هستند و عناصری که دارای کلاس myClass هستند را انتخاب می کند. |
15 | $(“:empty”) همه عناصری که فرزند نداشته باشند را انتخاب می کند. |
16 | $(“p:empty”) همه هایی که فرزند ندارند، انتخاب می کند. |
17 | $(“div[p]”) تمام هایی که شامل یک عنصر باشند را انتخاب می کند. |
18 | $(“p[.myclass]”) همه هایی که دارای کلاس myClass هستند را انتخاب می کند. |
19 | $(“a[@rel]”) همه لینک هایی که دارای صفت rel هستند را انتخاب می کند. |
20 | $(“input[@name = myname]”) هایی که مقدار صفت name آن ها برابر با myname باشد را انتخاب می کند. |
21 | $(“input[@name^=myname]”) هایی که مقدار صفت name آن ها با myname شروع شود را انتخاب می کند. |
22 | $(“a[@rel$=self]”) همه لینک هایی که مقدار صفت rel آن ها به self ختم شود را انتخاب می کند. |
23 | $(“a[@href*=domain.com]”) همه لینک هایی که مقدار صفت href آن ها شامل domain.com باشد را انتخاب می کند. |
24 | $(“li:even”)
|
25 | $(“tr:odd”) |
26 | $(“li:first”) اولین عنصر |
27 | $(“li:last”) آخرین عنصر |
28 | $(“li:visible”)
|
29 | $(“li:hidden”)
|
30 | $(“:radio”) تمام دکمه های رادیویی موجود فرم را انتخاب می کند. |
31 | $(“:checked”) چک باکس هایی که در حالت انتخاب شده هستند را انتخاب می کند. |
32 | $(“:input”) فقط عناصر (input، textarea، select و button) موجود در فرم را انتخاب می کند. |
33 | $(“:text”) فقط هایی که مقدار صفت type آن ها برابر text باشد را انتخاب می کند (input[type = text]). |
34 | $(“li:eq(2)”) سومین عنصر |
35 | $(“li:eq(4)”) چهارمین عنصر |
36 | $(“li:lt(2)”)
|
37 | $(“p:lt(3)”)
|
38 | $(“li:gt(1)”)
|
39 | $(“p:gt(2)”) هایی که بعد از سومین قرار دارند را انتخاب می کند. |
40 | $(“li:first-child”)
|
41 | $(“li:last-child”)
|
42 | $(“:parent”) عناصری که به عنوان پدر عناصر دیگر هستند را انتخاب می کند. |
43 | $(“li:contains(second)”) همه |
شما می توانید از تمام انتخابگرهای بالا، برای انتخاب همه عناصر HTML و XML استفاده کنید. برای مثال اگر انتخابگر $(“li:first”) برای عنصر
کار خواهد کرد.
هیچ نظری ثبت نشده است