انتخابگرها (به انگلیسی: Selectors)

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Jquery-menu.png
موارد آموزشی
۱خانه
۲مقدمه
۳شروع کار
۴دستور زبان
۵انتخابگرها (Selectors)
۶رویدادها
جلوه‌ها در jQuery
۱نمایش دادن / پنهان کردن
۲محو شدن
۳اسلاید
۴متحرک ساختن
۵stop()
۶فراخوانی (Callback)
۷زنجیره‌سازی (Chaining)
HTML در jQuery
۱Get
۲Set
۳اضافه‌کردن (Add)
۴حذف‌کردن
۵کلاس‌های CSS
۶css()
۷ابعاد
پیمودن در jQuery
۱پیمودن (Traversing)
۲اجداد
۳نسل‌ها
۴برادرها (Siblings)
۵فیلترکردن
AJAX در jQuery
۱مقدمهٔ AJAX
۲بارگذاری
۳Get/Post
متفرقه‌های jQuery
۱noConflict()
۲فیلترها
مثال‌ها
۱مثال‌ها
مرجع‌ها

Selectorهای jQuery یکی از مهم‌ترین بخش‌های کتابخانه jQuery هستند.[۱]

Selectorهای jQuery

انتخابگرهای (به انگلیسی: Selectors) جی کوئری امکان انتخاب و دستکاری عنصرهای HTML را برای شما فراهم می‌کنند.

انتخابگرهای jQuery برای «پیدا کردن» (یا انتخاب) عنصرهای HTML براساس نام، شناسه، کلاس‌ها، نوع‌ها، ویژگی‌ها، مقدار ویژگی‌های آن‌ها و موارد دیگر استفاده می‌شوند. این کار براساس CSS Selectorsهای موجود است و علاوه براین jQuery برخی از انتخابگرهای سفارشی خود را نیز دارد.

همه selectorهای jQuery با علامت دلار و پرانتز آغاز می‌شوند: $().

انتخابگر عنصر

انتخابگر عنصر jQuery عنصرها را براساس نام عنصر انتخاب می‌کند.

می‌توان همه عنصرهای <p> در یک صفحه را به این شکل انتخاب کرد:

$("p")

مثال

هنگامی که یک کاربر بر روی کلیدی کلیک کند، همهٔ عنصرهای <p> پنهان خواهند شد:

مثال
1 $(document).ready(function(){
2   $("button").click(function(){
3     $("p").hide();
4   });
5 });


انتخابگر #id

انتخابگر #id در jQuery از ویژگی id یک تگ HTML برای پیدا کردن عنصر خاصی استفاده می‌کند.

یک id باید در صفحه منحصر بفرد باشد، بنابراین باید زمانی از انتخابگر #idپ استفاده کنید که می‌خواهید یک عنصر منحصر بفرد را انتخاب کنید.

برای پیدا کردن عنصری با id خاص، یک کاراکتر hash (#) را به همراه id عنصر HTML بنویسید:

$("#test")

مثال

هنگامی که کاربر بر روی یک کلید کلیک کند، عنصر با id="test" پنهان می‌شود:

مثال
1 $(document).ready(function(){
2   $("button").click(function(){
3     $("#test").hide();
4   });
5 });

انتخابگر .class

انتخابگر .class در jQuery عنصرهای دارای کلاس خاص را پیدا می‌کند.

برای یافتن عنصرهایی با یک کلاس خاص، یک کاراکتر نقطه (.) را به همراه نام کلاس بنویسید:

$(".test")

مثال

هنگامی که کاربر بر روی کلید کلیک کند، عنصرهای با class=”test” پنهان می‌شوند:

مثال
1 $(document).ready(function(){
2   $("button").click(function(){
3     $(".test").hide();
4   });
5 });

مثال‌های بیشتر از Selectorهای jQuery

نحو تعریف مثال
$("*") همه عنصرها را انتخاب می‌کند مشاهدهٔ نتیجه
$(this) عنصر HTML فعلی را انتخاب می‌کند مشاهدهٔ نتیجه
$("p.intro") همه عنصرهای <p> با class=”intro” را انتخاب می‌کند مشاهدهٔ نتیجه
$("p:first") اولین عنصر <p> را انتخاب می‌کند مشاهدهٔ نتیجه
$("ul li:first") اولین عنصر <li> ی اولین <ul> را انتخاب می‌کند مشاهدهٔ نتیجه
$("ul li:first-child") اولین عنصر <li> همه <ul>‌ها را انتخاب می‌کند مشاهدهٔ نتیجه
$("[href]") همه عنصرهای دارای یک ویژگی href را انتخاب می‌کند مشاهدهٔ نتیجه
$("a[target='_blank']") همه عنصرهای <a> با مقدار ویژگی target برابر با "_blank" را انتخاب می‌کند مشاهدهٔ نتیجه
$("a[target!='_blank']") همه عنصرهای <a> که مقدار ویژگی target آن‌ها برابر با "_blank" نیست را انتخاب می‌کند مشاهدهٔ نتیجه
$(":button") همه عنصرهای <button> و عنصرهای <input>، type="button" را انتخاب می‌کند مشاهدهٔ نتیجه
$("tr:even") همه عنصرهای <tr> زوج را انتخاب می‌کند مشاهدهٔ نتیجه
$("tr:odd") همه عنصرهای <tr> فرد را انتخاب می‌کند مشاهدهٔ نتیجه

از jQuery Selector Tester برای نشان دادن selectorهای مختلف استفاده کنید.

برای دستیابی به مرجع کامل همهٔ انتخابگرهای jQuery، به مرجع انتخابگرهای jQuery ما مراجعه کنید.

تابع‌ها در فایل مجزا

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

هنگامی نشان دادن jQuery در این آموزش، توابع مستقیماً به بخش <head> اضافه می‌شوند. با این حال، گاهی اوقات ترجیح داده می‌شود که آن‌ها در یک فایل مجزا قرار گیرند مانند این (استفاده از ویژگی src برای ارجاع به فایل .js):

مثال
1 <head>
2 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
3 <script src="my_jquery_functions.js"></script>
4 </head>


تمرین‌های jQuery


منابع آموزشی