انتخاب first-child یا فرزند اول
first-child عنصر فرزند اول را از بین تعدادی عنصر انتخاب میکند. کد زیر اولین پاراگراف داخل تگ 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
هنگامی که میخواهیم نتیجه را برعکس کنیم از این انتخابگر استفاده میکنیم ، کد زیر به چک باکس های تیک خورده border سه پیکسلی میدهد.
$("input:checked").css({"border":"3px black solid"});
کد زیر به چک باکس های تیک خورده border سه پیکسلی میدهد ، که با اضافه کردن :not ، چک باکس های تیک نخورده رو انتخاب میکنیم:
$("input:not(:checked)").css({"border":"3px black solid"});
gt: انتخاب عناصر بزرگتر
اگه چندتا پاراگراف داشته باشیم و بخواهیم پیش زمینه پاراگراف سوم به بعد را عوض کنیم، میتوانیم از انتخابگر gt (Greater than…) استفاده کنیم:
$('p:gt(3)').css("background":"yellow");
کد بالا از بین همه پاراگراف ها، فقط پاراگراف سوم به بعد (4 و 5 و 6 و…) را انتخاب میکند.
طراحی سایت و تجارت آنلاین آواتم ...برچسب : فرزند اول, عنصر آخر,فرزند آخر,فرزند n ام,عنصر دارای خصوصیت,منفی کردن انتخابگر, عناصر بزرگتر, نویسنده : مهلا سوری avatheme بازدید : 320