انتخابگرها (Selector) در jQuery – آموزش jQuery

جمعه ۲۶ مرداد ۱۳۹۷
بازدید ۱,۴۲۶ نفر
AmRo
(19 امتیاز از 4 رای)
Loading...

تصویر jquery-selectors_3389 انتخابگرها (Selector) در jQuery - آموزش jQuery

انتخابگرها (Selector) در jQuery

کتابخانه جی کوئری توانایی استفاده از انتخابگرهای CSS را به ما میدهد تا بتوانیم به سرعت و به آسانی به عناصر و گروههای عناصر موجود در DOM دسترسی پیدا کنیم. انتخابگر در jQuery یک تابع است که بر اساس معیارهای داده شده عناصر تطبیقی را از DOM پیدا می کند. به عبارت دیگر می توان گفت که انتخابگر، یک عنصر HTML را انتخاب می کند تا ما بتوانیم عملیات های مختلف را بر روی آن اعمال کنیم.

انتخابگر $()

انتخابگرهای jQuery با علامت $ و پرانتز شرو می شوند (نمونه یک انتخابگر $()). برای انتخاب یک عنصر با استفاده از انتخابگر، می توانید از یکی از سه روش زیر استفاده کنید:

ردیف	توضیحات
1	اسم تگ انتخاب یک عنصر با استفاده از اسم تگ آن. برای مثال $(‘p’) تمامی تگ های p موجود در سند را انتخاب می کند.
2	شناسه (Id) تگ انتخاب یک عنصر با استفاده از شناسه آن. برای مثال $(‘#some-id’) عنصری را که شناسه آن some-id باشد انتخاب می کند.
3	نام کلاس (Class) تگ انتخاب یک عنصر با استفاده از کلاس آن. برای مثال $(‘.some-class’) تمام عناصری که کلاس some-class را دارند انتخاب می کند.

توجه! علامت $ مترادف jQuery می باشد. بنابراین هنگامی که نمی توانید از علامت $ استفاده کنید. می توانید به جای آن از jQuery استفاده کنید (مانند jQuery(‘p’)).

مثال

در زیر یک مثال ساده است که از Tag Selector استفاده می کند را مشاهده می کنید. مثال زیر همه تگ p انتخاب می کند.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("p").css("background-color", "yellow");
         });
      </script>
   </head>
	
   <body>
      <div>
         <p class = "myclass">This is a paragraph.</p>
         <p id = "myid">This is second paragraph.</p>
         <p>This is third paragraph.</p>
      </div>
   </body>
</html>

<html>

<head>

<title>The jQuery Example</title>

src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">

</script>

$(document).ready(function() {

$("p").css("background-color", "yellow");

});

</script>

</head>

<body>

<div>

<p class = "myclass">This is a paragraph.</p>

<p id = "myid">This is second paragraph.</p>

<p>This is third paragraph.</p>

</div>

</body>

</html>

امتحان کنید

نتیجه کد بالا:

This is a paragraph.
This is second paragraph.
This is third paragraph.

This is a paragraph.

This is second paragraph.

This is third paragraph.

نحوه استفاده از انتخابگرها در jQuery

در زیر لیست انتخابگرهای اصلی را مشاهده می کنید که با یک مثال توضیح داده شده اند.

ردیف	توضیحات
1	نام (Name) تمام عناصری که با نام مشخص شده مطابقت دارند را انتخاب می کند.
2	شناسه (#ID) عنصری را که منطبق با شناسه داده شده است، انتخاب می کند.
3	کلاس (.Class) عناصری را که منطبق با کلاس داده شده هستند، انتخاب می کند.
4	جهانی *()** تمامی عناصر موجود در DOM را انتخاب می کند.
5	انتخاب چندتایی چند عنصر مختلف را انتخاب می کند.

مثال های انتخابگرها

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

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

شما می توانید از تمام انتخابگرهای بالا، برای انتخاب همه عناصر HTML و XML استفاده کنید. برای مثال اگر انتخابگر $(“li:first”) برای عنصر <li> کار می کند، پس انتخابگر $(“p:first”) هم برای عنصر <p> کار خواهد کرد.

JQuery - مبانی و مفاهیم