4) سلکتورها در جی کوئری (Selectors)

تونل یادگیری جی کوئری

در روز چهارم یادگیری جی کوئری یاد میگیریم تا با ایجاد و انتخاب سلکتور های مناسب در سند HTML تغییراتمان را اعمال کنیم. کار با selector ها بسیار ساده است و تعداد آنها محدود است که در این بخش از تونل جی کوئری به آموزش Selector ها میپردازیم.

سلکتور ها در جی کوئری

سلکتور ها در جی کوئری امکان دسترسی به المان های مختلفی را در سند html برای ما فراهم میکند؛ این دسترسی از طریق کلاس (Class)، تگ (Tag)، آیدی (id)، خصیصه ها و مقادیر موجود در آنها برقرار میشود.

برای مشخص کردن هر سلکتور از علامت $ و پرانتز های باز و بسته استفاده میکنیم

$()

استفاده از Element ها به عنوان Selector در جی کوئری

برای استفاده از این سلکتور ها از نام تگ در جی کوئری استفاده میکنیم. به عنوان مثال:

$("h1")

در مثال زیر زمانی که کاربر روی دکمه (button) کلیک کند،  تگ یا تگهای  h1 پنهان میشوند:

$(document).ready(function(){
$("button").click(function(){
$("h1").hide();
});
});

استفاده از Class ها به عنوان Selector در Jquery

ویژگی ای که در جی کوئری به یک کلاس اختصاص میدهیم، تمامی تگ هایمان که آن کلاس را داشته باشند را تحت تاثیر خود قرار میدهد. در مثال زیر اگر بر روی دکمه کلیک شود، تمامی تگ هایی که کلاس test دارند پنهان می شوند:

$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
})

استفاده از id به عنوان سلکتور در جی کوئری

هر id در صفحه باید فقط یک بار استفاده شود. برای پیدا کردن عبارتی که id خاص خود را دارد باید از علامت هشتگ # استفاده کنیم. در مثال زیر زمانی که روی دکمه کلیک کنیم، تگی که id آن test هست، پنهان میشود:

$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});

چند مثال از پرکاربرد ترین Selector ها در جی کوئرِی

برای مشخص کردن تمام المنت ها از سلکتور (“ * ”)$ استفاده میکنیم.

$(“ * ”)

برای مشخص کردن المنت فعلی در فایل html از سلکتور (this)$ استفاده میکنیم

$(this)

سلکتور (“tr:even”)$ برای مشخص کردن المان های زوج به کار میرود: در کد زیر ردیف های زوج جدول انتخاب میشوند.

$("tr:even")

سلکتور (“tr:odd”)$ برای مشخص کردن المان های فرد به کار می رود: در کد زیر ردیف های فرد جدول انتخاب می شوند.

$("tr:odd")

سلکتور (“[href]”)$ تمامی تگ ها که خصیصه href را دارند را انتخاب می کند.

$("[href]")

سلکتور (“p.intro”)$ تمامی تگ های p که کلاس intro دارند را انتخاب میکند.

$("p.intro")