سلکتورهای jQuery

انتخاب عناصر با سلکتور تگ، id، class و سلکتورهای ترکیبی

سلکتور چیست؟

سلکتورها به jQuery می‌گویند روی کدام عنصر یا عناصر صفحه کار کند. سلکتورهای jQuery دقیقاً مثل سلکتورهای CSS هستند؛ اگر CSS بلدید، این درس برایتان خیلی آسان است!

همه سلکتورها با علامت $() و داخل گیومه نوشته می‌شوند:

$(selector).action()

سه سلکتور اصلی

سلکتورمثالانتخاب می‌کند...
تگ (element)$("p")همه عناصر <p>
شناسه (id)$("#test")عنصری با id="test" (فقط یکی!)
کلاس (class)$(".test")همه عناصر با class="test"
فراموش کردن # برای id یا . برای class رایج‌ترین خطای تازه‌کارهاست! $("test") یعنی تگ <test> — نه عنصر با شناسه test.

سلکتورهای ترکیبی و پیشرفته

سلکتورمثالتوضیح
همه عناصر$("*")تمام عناصر صفحه
عنصر فعلی$(this)عنصری که رویداد در آن رخ داده
چند سلکتور$("p, .intro, #main")هر سه گروه با هم
فرزند مستقیم$("ul > li")liهایی که فرزند مستقیم ul هستند
نوه و پایین‌تر$("ul li")همه liهای داخل ul (در هر عمقی)
اولین عنصر$("ul li:first")اولین li صفحه
عنصر با ویژگی$("[href]")همه عناصری که href دارند
تگ + کلاس$("p.intro")فقط پاراگراف‌هایی که کلاس intro دارند
اولین فرزند$("p:first-child")pهایی که اولین فرزند والدشان هستند
فرزند زوج/فرد$("tr:even")ردیف‌های زوج جدول

مثال‌های عملی

۱. انتخاب با تگ

// کلیک روی هر پاراگراف، آن را مخفی می‌کند
$("p").click(function() {
    $(this).hide();
});

۲. انتخاب با id

// تغییر متن عنصر با شناسه message
$("#message").text("متن جدید!");

۳. انتخاب با کلاس

// مخفی کردن همه عناصر با کلاس special
$(".special").hide();

۴. سلکتور ترکیبی

// همه دکمه‌ها و لینک‌ها را انتخاب کن
$("button, a").css("cursor", "pointer");

سلکتورهای ویژگی (Attribute)

می‌توانید عناصر را بر اساس ویژگی‌هایشان انتخاب کنید:

$("[href]")           // همه عناصری که href دارند
$("[href='#']")       // عناصری که href آنها # است
$("[href!='#']")      // عناصری که href آنها # نیست
$("[href$='.jpg']")   // hrefهایی که به .jpg ختم می‌شوند
$("[title*='hello']") // titleهایی که شامل کلمه hello هستند

چه سلکتوری استفاده کنم؟

  • برای عنصر یکتا (مثل یک دکمه خاص) از id استفاده کنید — سریع‌ترین روش
  • برای گروهی از عناصر (مثل همه کارت‌ها) از class استفاده کنید
  • برای همه عناصر هم‌نوع از تگ استفاده کنید

مثال کامل: جدول راه‌راه با سلکتورها

// رنگ‌آمیزی ردیف‌های زوج جدول (جدول راه‌راه)
$("tr:even").css("background-color", "#f2f2f2");
$("tr:odd").css("background-color", "#ffffff");

// هایلایت آخرین ردیف
$("tr:last").css("background-color", "yellow");

جمع‌بندی

این مبحث بخشی از دوره آموزش کامل jQuery است.

ابزارهای مرتبط