برخی از کدهای جی کوئری

انتخاب 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 و…) را انتخاب میکند.