انتخاب گر ها در جی کوئری (Jquery Selectors)

8 / 10 از 23 کاربر

انتخاب گر ها در جی کوئری (Jquery Selectors)

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

انتخاب همه عناصر (*)

$(*).hide()

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

$(document).ready(function(){ $("*").click(function(){ $(this).hide(); }); });

انتخاب عناصر در حال حرکت (animated)

با کد زیر میتوانیم عناصری را که درحال حرکت هستند را انتخاب کنیم:

$("div:animated").hide()

انتخاب عناصر با خصوصیت دلخواه
برای انتخاب عناصر بر اساس خصوصیت ها از کد زیر استفاده میکنیم.
کد زیر لینک هایی که خاصیت href آنها با عبارت http شروع شود را hide میکند.

$('a[href^="http"]').hide()


کد زیر لینک هایی که خاصیت hreflang آنها en باشد یا با -en شروع شوند را hide میکند.

$('a[hreflang|="en"]').hide()


کد زیر عکس‌هایی را که خاصیت Alt آنها  برابر با www.pars-soft.ir باشد را  hide میکند. 

$('img[alt*="www.pars-soft.ir"]').hide()

کد زیر عکسهایی را که شامل کلمه www.pars-soft.ir باشند را انتخاب میکند و  hide میکند. 

$('img[alt~="www.pars-soft.ir"]').hide()


کد زیر همه لینک‌هایی که خصوصیت href آنها با کلمه”html” تموم میشود  را انتخاب میکند و  hide میکند. 

$('a[href$="html"]').hide()

کد زیر فقط div هایی را که خصوصیت کلاس آنها  myclass باشد را انتخاب میکند و  hide میکند. 

$('div[class="myclass"]').hide()


کد زیر فقط div هایی را که خصوصیت کلاس آنها  myclass نباشد را انتخاب میکند و  hide میکند. 

$('div[class!="myclass"]').hide()


انتخاب دکمه ها


کد زیر به همه button ها حاشیه 3 پیکسلی میدهد . در این کد نحوه اعمال یک کد CSS به یک عنصر را می ببینید.

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

انتخاب چک‌باکس ها

 کد زیر به همه چک‌باکس ها  حاشیه 3 پیکسلی میدهد .

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

اگه بخوایم این نوع کدها فقط در محدوده یک عنصر خاص کار کنند ، به راحتی میتوانیم از اسم کلاس‌ها ، IDها یا تگ ها استفاده کنیم:

$("#container .leftColumn input:checkbox").css({border:"3px black solid"});

انتخاب Input های از نوع File
برای انتخاب Input هایی که خصوصیت type آن‌ ها مقدار file دارد و برای انتخاب یک فایل جهت آپلود در سایت استفاده میشوند :

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

انتخاب عنصرهای check شده
این سلکتور checkbox ها و radio هایی را  که تیک خورده اند (انتخاب شده اند) را انتخاب میکند.

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

در کد زیر با انتخاب هر دکمه رادیویی موجود در صفحه ، مقدار value آن ، در یک عنصر جدید که کلاس .log دارد ، نمایش داده میشود :

$("input").click(function(){ $(".log").html( $(":checked").val() + " is checked!" ); });

انتخاب عناصر فرزند

درست مثل CSS میتوانیم در jQuery هم ، عناصر فرزند رو فراخوانی کنیم :

$("ul.class1 > li").css({border:"3px black solid"});

انتخاب بر اساس محتوا
با کد contains میتوانیم عنصری که متن خاصی داخلش وجود دارد را انتخاب کنیم.
کد زیر هر پاراگرافی که کلمه pasargad-graphic.com داخلش باشد را  نارنجی میکند.

$("p:contains('pasargad-graphic.com')").css("color", "orange");

انتخاب عنصرهای غیرفعال (disabled)
کد زیر کلمه “DISABLED” را در همه input هایی که غیرفعال شدند مینویسد:

$("input:disabled").val("DISABLED");

انتخاب عنصرهای فعال (enabled)
کد زیر برای همه input هایی که فعال هستند حاشیه قرمز میگذارد:

$("input:enabled").css("border":"1px solid red");

انتخاب عناصر خالی
برای عناصری که هیچ متن یا تگی داخلشان نباشد. مثل تگ های زیر:

<a></a> <li></li> <td></td>

کد زیر همه تگ‌های خالی که داخل تگ body باشند را انتخاب میکند ، متن Empty Tag را داخلشان مینویسد و رنگ پیش زمینه آنها را قرمز میکند :

$("body :empty").text("Empty Tag").css('background','red');

انتخاب بر اساس اندیس
با استفاده از eq میتوانیم از بین تعدادی عنصر یکسان ، عنصری با شماره خاص رو انتخاب کنیم.
اگه یه لیست با 3 تا li داشته باشیم ، شماره اندیس این سها li از 0 تا 2 هست (شمارش اندیس‌ها از 0 شروع میشه)
برای انتخاب عنصر اول:

$("li:eq(0)").css("color","blue" );

برای انتخاب عنصر دوم:

$("li:eq(1)").css("color","blue" );

انتخاب زوج و فرد

کد زیر پاراگراف‌های زوج رو آبی میکند:

$("p:even").css("color","blue");

کد زیر پاراگراف‌های فرد رو قرمز میکند:

$("p:odd").css("color","red");

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

$(".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 عنصر فرزند اول را از بین تعدادی عنصر انتخاب میکند. کد زیر اولین پاراگراف داخل تگ 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 و…) را انتخاب میکند.

lt: انتخاب عناصر کوچیکتر
برای انتخاب عناصر قبل از مورد مشخص شده استفاده میشود :

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

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

انتخاب عناصر تک فرزند “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");

انتخاب گر ها در jqueryJquery Selectorsآموزش کامل سلکتورهای جی کوئریسلکتور در جی کوئری چیست ؟selector ها در جی کوئریآموزش selector در jquerySelectorSelectorsانتخاب کردن المنت ها در جی کوئریانتخاب یه عنصر HTML در jqueryانتخاب همه عناصر در جی کوئریانتخاب عناصر در حال حرکت در جی کوئریانتخاب عناصر دارای انیمیشن در جی کوئریانتخاب عناصر animated در jqueryانتخاب عناصر با خصوصیت دلخواه در جی کوئریکد انتخاب عناصر بر اساس خصوصیت ها در جی کوئریانتخاب دکمه ها در جی کوئریانتخاب button در jqueryانتخاب چک باکس ها در جی کوئریانتخاب checkbox در jqueryانتخاب Input های از نوع File در جیکوئریانتخاب عنصرهای check شده در جی کوئریانتخاب چک باکس های انتخاب شده در جی کوئریسلکتور checkbox در jqueryانتخاب تیک خورده ها در چک باکس با کد جی کوئریانتخاب رادیو هایی که انتخاب شده اند در رادیو باتنانتخاب هر دکمه رادیویی که تیک انتخاب خوردهانتخاب عناصر فرزند در جیکوئریانتخاب بر اساس محتوا در جیکوئریانتخاب عنصرهای غیرفعال disabled در جیکوئریانتخاب عنصرهای فعال enabled در جیکوئریانتخاب عناصر خالی در جیکوئریانتخاب بر اساس اندیس در جی کوئریempty در جیکوئریانتخاب عنصر اول در جی کوئریانتخاب تگ اول در jqueryeq در جی کوئری چیست ؟انتخاب عنصر دوم در جی کوئریانتخاب زوج و فرد در جی کوئریeven در جی کوئری چیست ؟انتخاب پاراگراف‌های فرد در جی کوئریodd در جی کوئری چیست ؟انتخاب چند عنصر متفاوت در جی کوئریfirst در جی کوئریانتخاب first-child یا فرزند اول در جی کوئریfirst-child در جی کوئری چیست ؟انتخاب عنصر آخر در جیکوئریlast در jquery چیست ؟انتخاب last-child یا فرزند آخر در جی کوئریlast-child در جی کوئری چیست ؟انتخاب فرزند n ام در جی کوئریnth-child در جی کوئری چیست ؟انتخاب عنصر دارای خصوصیت در جی کوئریانتخاب Attribute در جی کوئریمنفی کردن انتخابگر با not در jquerychecked در جی کوئری چیست ؟not در جی کوئری چیست ؟انتخاب عناصر بزرگتر در جی کوئریانتخاب گر Greater than در جی کوئریgt در جی کوئری چیست ؟انتخاب عناصر کوچیکتر در جی کوئریlt در جی کوئری چیست ؟انتخاب عناصر تک فرزند در جی کوئریسلکتور only-child در جی کوئریfirst-childلیست کامل انتخاب گر ها در جی کوئریلیست کامل selector ها در jquery
کاردان :
33 4
بسیار عالی ، ممنون
محسن :
15 2
استفاده کردم. تشکر.
عباس :
19 2
آقا خیلی زحمت داره برا این آموزش ها واقعا جای تشکر داره عالی بود.
ابوالفضل :
13 3
عالی
جعفر چراغیان : عالیست
24 3
زکات علم تو آموزش و نشر دانش خود به دیگران است. خیلی خیلی عالی بود جناب.دستت درد نکنه. متشکر و سپاسگزارم ادمین عزیز
حسین : تشکر
14 3
سلام خیلی ممنونم ازتون من از آموزش خوبتون مخصوصا سلکتو div class خیلی خوب بود من یه قالب وردپرس میخواستم فوتر آن را ویرایش کنم که خطا میداد میگفت شما حق ویرایش ندارید اما با کلاس شما اون رو Remove کردم
: قاسم
10 2
عالی خیلی ممنون
فاطمه : تشکر
3 0
بسیار عالی
حمیدرضا :
0 0
بسیار بسیار عالی و کارآمد
عنوان نظر :
نام شما :
ایمیل :
تلفن تماس :
*
نویسنده : بهاره شکری
تاریخ انتشار : 29/05/1392
تعداد بازدید : 17432