انتخاب گرها (Selectors)
در این صفحه با انتخاب گرهای jQuery آشنا می شوی. انتخاب گر (Selector) یعنی روشی برای پیدا کردن عناصر HTML. مثل وقتی در دفتر حضور و غیاب اسم یک دانش آموز را پیدا می کنی، اینجا هم با الگو، عنصر را پیدا می کنی و بعد روی آن کاری انجام می دهی.
انتخاب گرهای jQuery چه کار می کنند؟
انتخاب گرهای jQuery به تو اجازه می دهند عناصر HTML را پیدا کنی و روی آن ها عمل انجام دهی. این انتخاب گرها بر اساس نام تگ، id، کلاس (Class)، نوع، صفت (Attribute)، مقدار صفت و موارد دیگر کار می کنند. jQuery روی همان انتخاب گرهای CSS ساخته شده است و چند انتخاب گر اضافه مخصوص خودش هم دارد.
همه انتخاب گرها در jQuery با علامت دلار و پرانتز شروع می شوند: $(). داخل پرانتز، الگوی انتخاب گر را می نویسی و بعد روی نتیجه، متد یا همان عمل jQuery را صدا می زنی. این همان الگویی است که در صفحه سینتکس jQuery دیدی: $(selector).action().
انتخاب گر عنصری (element selector)
انتخاب گر عنصری ساده ترین نوع انتخاب گر است. این انتخاب گر بر اساس نام تگ کار می کند. مثلاً "p" یعنی همه تگ های پاراگراف <p> در صفحه. وقتی این الگو را به jQuery می دهی، می توانی روی همه آن پاراگراف ها یک عمل مشترک انجام دهی.
در مثال منبع، می خواهیم وقتی کاربر روی یک دکمه کلیک کرد، همه پاراگراف ها مخفی شوند. کد جوری نوشته می شود که بعد از آماده شدن صفحه، روی رویداد کلیک دکمه واکنش نشان دهد.
$(document).ready(function() {
$("button").click(function() {
$("p").hide();
});
});
اول صبر می کنیم تا سند آماده شود. بعد می گوییم هر وقت روی دکمه کلیک شد، همه تگ های <p> مخفی شوند. این یک نمونه ساده از استفاده از انتخاب گرهای jQuery برای کنترل چند عنصر با یک دستور است.
انتخاب گر #id برای یک عنصر خاص
انتخاب گر #id برای زمانی است که یک عنصر خاص و یکتا می خواهی. ویژگی id در HTML باید در صفحه تکراری نباشد. برای انتخاب آن، یک علامت # می گذاری و بعد نام id را می نویسی. مثلاً "#test" یعنی عنصر با id برابر test.
در مثال منبع، وقتی روی دکمه کلیک می شود، فقط همان عنصر با id مشخص مخفی می شود، نه بقیه پاراگراف ها یا عناصر دیگر.
$(document).ready(function() {
$("button").click(function() {
$("#test").hide();
});
});
اینجا تفاوت مهم این است که فقط همان عنصر test مخفی می شود. اگر ده پاراگراف دیگر در صفحه باشد، آن ها دست نخورده می مانند. پس برای کنترل جزء به جزء، انتخاب گر id انتخاب خوبی است.
انتخاب گر .class برای گروهی از عناصر
انتخاب گر کلاس (Class) برای زمانی است که می خواهی یک گروه از عناصر را با هم هدف بگیری. کلاس معمولاً روی چند عنصر تکرار می شود. برای انتخاب با کلاس، یک نقطه می گذاری و بعد نام کلاس را می نویسی. مثلاً ".test" یعنی همه عناصر با کلاس test.
در مثال منبع، با یک کلیک روی دکمه، همه عناصر با کلاس test مخفی می شوند. این شبیه انتخاب یک گروه دانش آموز در کلاس است که روی همه آن ها یک قانون مشترک اجرا می کنی.
$(document).ready(function() {
$("button").click(function() {
$(".test").hide();
});
});
اگر بعداً یک عنصر جدید با همین کلاس به صفحه اضافه کنی، این کد روی آن هم اثر می گذارد. همین باعث می شود انتخاب گرهای jQuery با کلاس برای طراحی رابط های داینامیک خیلی کاربردی باشند.
نمونه های دیگر از انتخاب گرهای jQuery
در منبع، یک جدول پر از مثال های انتخاب گرها وجود دارد. مثلاً "*" همه عناصر صفحه را برمی گرداند. انتخاب گر $(this) عنصر فعلی را می گیرد. "p.intro" همه پاراگراف هایی را می گیرد که کلاس intro دارند.
مثال های دیگر شامل انتخاب اولین پاراگراف، اولین li داخل اولین ul، یا اولین li در هر ul است. همچنین می توانی با "[href]" همه عناصری را که صفت href دارند پیدا کنی. یا با "a[target='_blank']" فقط لینک هایی را بگیری که در تب جدید باز می شوند.
برای تمرین این حالت ها، خود منبع یک ابزار تست دارد: jQuery Selector Tester. همچنین می توانی مرجع کامل انتخاب گرها را در این آدرس ببینی: jQuery Selectors Reference.
قرار دادن توابع jQuery در فایل جداگانه
اگر سایت تو چند صفحه مختلف دارد، بهتر است توابع jQuery را در یک فایل جداگانه قرار دهی. این کار نگه داری کد را ساده تر می کند. در منبع، فایل jQuery اصلی از CDN بارگذاری می شود و بعد یک فایل دیگر به نام my_jquery_functions.js اضافه می گردد.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="my_jquery_functions.js"></script>
</head>
در فایل جداگانه می توانی همه کدهای انتخاب گرهای jQuery و دستورات مربوط به آن ها را نگه داری. بعد اگر در چند صفحه نیاز داشتی، فقط همین فایل را دوباره لود می کنی و دیگر لازم نیست کد را تکرار کنی.
گام های عملی برای تمرین انتخاب گرها
- از صفحه شروع کار jQuery مطمئن شو کتابخانه jQuery را درست به صفحه اضافه کرده ای.
- یک فایل HTML ساده بساز و چند تگ <p>، یک دکمه و یک عنصر با id و کلاس متفاوت تعریف کن.
- در فایل اسکریپت، یک رویداد
$(document).ready()بنویس و داخل آن انتخاب گر عنصری، id و کلاس را با متدhide()امتحان کن. - حالا از انتخاب گرهای دیگری مثل
"p.intro"یا"tr:odd"کمک بگیر و نتیجه را در مرورگر ببین. - در نهایت، کدهای خودت را در یک فایل جداگانه قرار بده و آن را درست مثل مثال بخش فایل جداگانه در صفحه head بارگذاری کن.
اگر این مراحل را انجام دهی، کار با انتخاب گرهای jQuery برای تو خیلی طبیعی می شود و در صفحات بعدی مثل رویدادهای jQuery راحت تر حرکت می کنی.
جمع بندی سریع
- انتخاب گرهای jQuery برای پیدا کردن عناصر HTML و کار روی آن ها هستند.
- انتخاب گر عنصری مثل
"p"روی همه آن تگ ها اثر می گذارد. - انتخاب گر
#idیک عنصر یکتا را هدف می گیرد. - انتخاب گر
.classیک گروه از عناصر مشابه را کنترل می کند. - می توانی توابع مربوط به انتخاب گرها را در یک فایل جاوااسکریپت جداگانه نگه داری.