نظاره گر پیشرفت کسب و کار خود باشید ، وقتی اسپیناس وب جرئی از تیم شما می شود

ادامه اموزش طراحی وب با jquery

مشابه گزینشگر بالاست و فقط اندیس می پذیرد و اندیس کذاری را از صفر شروع می کند.

$(“p:nth(5)”);

کد بالا ششمین تگ <p> را انتخاب می کند،زیرا اندیس گذاری از صفر شروع می شود.

$(“:first-child”);

تمامی المنتهایی را که اولین فرزند پدرشان هستند، انتخاب می کند.این گزینشگر عملی مشابه به :nth-child(1) را انجاممی دهد.

$(“canvas:first-child”);

این گزینشگر اولین تگ  <canvas> را انتخاب می کند.

$(“:last-child”);

تمامی المنتهایی را که آخرین فرزند پدرشان هستند، انتخاب می کند.

$(“canvas:last-child”);

این گزینشگر آخرین تگ  <canvas> را انتخاب می کند.

$(“:only-child”);

تمامی المنتهایی که تنها فرزند پدرشان هستند را انتخاب می کند. برای مثال کد  html زیر:

<div>

<ol>

<li>item1</li>

<li>item2</li>

</ol>

</div>

<b>

<p> p-Tag</p> </b>

و کد  jQuery زیر را در نظر داشته باشید:

$(“p:only-child”);

در این تکه کد تگ <p> انتخاب می شود زیرا تنها فرزند  والدش یعنی تگ  <b>است.

.زیر را در نظر بگیرید   jQuery حالا  کد$(“div ol li:only-child”)  

این تکه کد هیچ المنتی را انتخاب نمی کند. چرا؟؟؟

چون در تگ <ol> دو تگ  <li> وجود دارد و تنها فرزند پدرشان نیستند پس، هیچ کدام از آن ها انتخاب نمی شوند.

$(“:not(element)”);

تمامی المنتها به جز المنت داخل پرانتز را انتخاب می کند. (یکی از سودمندترین گزینشگرها)$(“p:not(.intro)”);

کد فوق تمامی تگهای <p> را که ندارند،انتخاب می کند.

$(“:empty”);

تمام المنتهایی را که هیچ فرزندی نداشته باشند، انتخاب می کند. (اگر داخل یک تگ <p> متن هم باشد، آن هم انتخابنمی شود). برای این نوع گزینشگر مثال نمی زنم چون خیلی معلومه.

$(“*”);

تمامی المنتها را صرف نظر از نوعشان انتخاب می کند. برای مثال:

$(“div *”);

این تکه کد تمامی فرزندان تگ <div> را انتخاب می کند.

این گزینشگر ها هنگام ترکیب با گزینشگرهای دیگر، سلکتور بسیار مفیدی را ارائه می دهند.

ادامه اموزش طراحی سایت با jquery در قسمت بعدی!!با ما همراه باشید