طراحی سایت و تجارت آنلاین آواتم

انتخاب عناصر تک فرزند “only-child” ممکنه این جمله رو متوجه نشید: “اگه عنصری ، تنها عنصرِ عنصر والدِ خودش باشه ، انتخاب میشود” پس بیشتر توضیح میدم: اگه داخل عنصر والد ، 2 تا عنصر فرزند داشته باشیم: <ul><li></li><li></li></ul> یعنی ul پدر ، 2تا فرزند li داره ، ولی اگر فقط یک فرزند داشته باشد: <ul><li></li></ul>  سلکتور only-child در جی کوئری ، فقط عناصری را انتخاب میکند که هیچ عنصر مشابهی ، قبل یا بعد آنها وجود نداشته باشد. در کد زیر ، فقط li هایی که تک فرزند باشند ، border آبی میگیرند. $("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"); , عناصر تک فرزند, فرزند اول ...ادامه مطلب

انتخاب 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":",فرزند اول, عنصر آخر,فرزند آخر,فرزند n ام,عنصر دارای خصوصیت,منفی کردن انتخابگر, عناصر بزرگتر, ...ادامه مطلب