پاسارگاد گرافیک

آموزش jQuery بخش سوم: سلکتورها

پويا صادقى , jQuery

قبلا با jQuery آشنا شدیم و چند تا از سلکتورهای جی کوئری رو معرفی کردیم، در بخش سوم آموزش jQuery ، بقیه سلکتورها رو معرفی میکنیم.

سلکتور همونطور که از اسمش پیداست برای انتخاب کردن المنت ها (جهت اعمال کد روی اون‌ها) استفاده میشه.

انتخاب چند عنصر
برای انتخاب یه عنصر، از کدی شبیه به این استفاده میکردیم:

$(".myclass1").css("color":"orange");

برای انتخاب چند تا عنصر ، فقط کافیه نام عنصر رو به همراه کاما “,” اضافه کنیم

$(".myclass1,.myclass2,.myclass3").css("color":"orange");

کد بالا همه عناصری که کلاس myclass1 و myclass2 و myclass3 دارن رو انتخاب میکنه و رنگشون رو به نارنجی تغییر میده

انتخاب عنصر اول
“first” عنصر اول رو از بین تعدادی عنصر انتخاب میکنه.
کد زیر اولین پاراگراف رو انتخاب میکنه و border قرمز براش تعیین میکنه

$("p:first").css("border":"1px solid red");

انتخاب first-child یا فرزند اول
first-child عنصر فرزند اول رو از بین تعدادی عنصر انتخاب میکنه. تقریبا شبیه first کار میکنه.
کد زیر اولین پاراگراف داخل تگ div رو انتخاب میکنه و border قرمز براش تعیین میکنه

$("div p:first-child").css("border":"1px solid red");

انتخاب عنصر آخر
“Last” عنصر آخر رو از بین تعدادی عنصر انتخاب میکنه.
کد زیر آخرین پاراگراف رو انتخاب میکنه و border سبز براش تعیین میکنه

$("p:last").css("border":"1px solid green");

انتخاب last-child یا فرزند آخر
first-child عنصر فرزند اول رو از بین تعدادی عنصر انتخاب میکنه. تقریبا شبیه Last کار میکنه.
کد زیر آخرین پاراگراف داخل تگ div رو انتخاب میکنه و border قرمز براش تعیین میکنه

$("div p:last-child").css("border":"1px solid green");

انتخاب فرزند n ام
nth-child فرزند n ام رو از بین تعدادی عنصر انتخاب میکنه. یعنی به جای فرزند اول یا آخر میتونید بهش بگید فرزند سوم یا بیستم و… رو انتخاب کنه
کد زیر سومین پاراگراف داخل تگ div رو انتخاب میکنه و رنگ متنش رو آبی میکنه

$("div p:nth-child(3)").css("color":"blue");

انتخاب عنصر دارای خصوصیت
با این سلکتور میشه عناصری رو انتخاب کرد که Attribute های خاصی دارن.
مثلا با کد زیر همه عکس‌هایی که خصوصیت Alt باشن رو انتخاب میکنه و border قرمز براشون میذاره

$('img[alt]').css("border":"4px solid red");

منفی کردن انتخابگر با not
بعضی وقتا لازمه که نتیجه انتخاب رو برعکس کنیم. مثلا به جای چک باکس های تیک خورده (که در بخش دوم آموزش jQuery درموردش گفتم) ، میخوایم چک باکس های تیک نخورده رو انتخاب کنیم. سلکتور “not” برای اینجور مواقع ساخته شده؛ به جای

$("input:checked").css({"border":"3px black solid"});

که به چک باکس های تیک خورده بوردر سه پیکسلی میده ، با اضافه کردن :not ، چک باکس های تیک نخورده رو انتخاب میکنیم:

$("input:not(:checked)").css({"border":"3px black solid"});

درواقع :not ، کلمه :checked که داخل پرانتز گذاشتیم رو منفی میکنه

gt: انتخاب عناصر بزرگتر
اگه چندتا پاراگراف داشته باشیم و بخوایم بکگراند پاراگراف سوم به بعد رو عوض کنیم، میتونیم از سلکتور gt (Greater than…) استفاده کنیم:

$('p:gt(3)').css("background":"yellow");

کد بالا از بین همه پاراگراف ها، فقط پاراگراف سوم به بعد (4 و 5 و 6 و…) رو انتخاب میکنه

lt: انتخاب عناصر کوچیکتر
مثل مورد قبلی (gt) ولی اینبار برای انتخاب عناصر قبل از مورد مشخص شده:

$('p:lt(3)').css("background":"orange");

کد بالا از بین همه پاراگراف ها، فقط پاراگراف‌های قبل از پاراگراف سوم رو انتخاب میکنه (پاراگراف 1 و 2)و بکگراندشون رو نارنجی مکینه

انتخاب عناصر تک فرزند “only-child”
ممکنه این جمله رو متوجه نشید:
“اگه عنصری ، تنها عنصرِ عنصر والدِ خودش باشه ، انتخاب میشه”
پس بیشتر توضیح میدم:
اگه داخل عنصر والد ، 2 تا عنصر فرزند داشته باشیم:

<ul><li></li><li></li></ul>

یعنی ul پدر ، 2تا فرزند li داره
ولی اگه فقط یه فرزند داشته باشه:

<ul><li></li></ul>

li میشه تنها فرزند ul که برای انتخاب این نوع عناصر در jQuery ، از سلکتور only-child استفاده می‌کنیم. سلکتور only-child در جی کوئری ، فقط عناصری رو انتخاب میکنه که هیچ عنصر مشابهی ، قبل یا بعدشون نداشته باشن
در کد زیر ، فقط li هایی که تک فرزند باشن ، بوردر آبی میگیرن:

$("ul li:only-child").css("border", "3px solid blue");

انتخاب first-child یا فرزند اول
first-child عنصر فرزند اول رو از بین تعدادی عنصر انتخاب میکنه. تقریبا شبیه first کار میکنه.
کد زیر اولین پاراگراف داخل تگ div رو انتخاب میکنه و border قرمز براش تعیین میکنه

$("div p:first-child").css("border":"1px solid red");

نوشته شده توسط پويا صادقى

سلام! من پویا صادقی هستم؛ طراح رابط کاربری و توسعه دهنده وب. می تونید من رو در توییتر دنبال کنید، در گوگل پلاس یا صفحه فیسبوک پاسارگاد گرافیک با من در ارتباط باشید، یا با ایمیل info[‌a‌t‌]Pasargad-Graphic.com تماس بگیرید.

• آموزش jQuery بخش دوم: سلکتورها
• آموزش jQuery بخش اول

jQuery آموزش jQuery آموزش جی کوئری جی کوئری سلکتورهای jQuery