لیست کامل و جامع تمام گزینشگرهای جی کوئری (jQuery Selectors)

- visibility ۳۱ mode_comment

از اونجایی که در وب فارسی مرجع تقریبا کاملی از گزینشگرهای jQuery موجود نبود، در این مقاله ما جامع ترین گزینشگرها (Selector) ی jQuery رو در 5 صفحه برای شما آماده کردیم تا بتونید اجزای مختلف موجود در صفحه ی وب رو خیلی بهتر شناسایی کنید .

ساختار نوشتاری کدهای jQuery یک فرم خیلی ساده داره که به شکل زیره :

در این ساختار بخش اول که Selector هست، مشخص می کنه که چه المنتی در صفحه ی وب انتخاب بشه . قسمت event نوع رویدادی که بر روی اون المنت رخ میده رو معلوم می کنه و درون function هم کدهایی که با اتفاق افتادن اون رویداد باید بر رو المنت اجرا بشه آورده میشه . این ساختار می تونه تو در تو باشه و کل syntax جی کوئری همین هست !

برای انجام تمامی کارها در jQuery به گزینشگر (سلکتور) احتیاج داریم. jQuery با اقتباس از گزینشگرهای CSS نسخه 1 تا 3 مجموعه ای قدرتمند از گزینشگرها را به وجود آورده است.

گزینشگر های jQuery با اقتباس از CSS

$("Tag-Name");

این گزینشگر تگ های خاصی رو انتخاب می کنه.در واقع این گزینشگر معادل متد document.getElementsByTagName(); در جاوا اسکریپت است و برای انتخابی المنت با عنوان خاص انتخاب می شودو.یک مثال هم برای این نوع گزینشگر کافی است.

$("div");

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

$("#MyID");

این گزینشگر تمام المنت هایی رو که مقدار id اونها برابر MyID باشه انتخاب می کنه.این گزینشگر معادل متد document.getElementById(); در جاوااسکریپت است.

درضمن توجه داشته باشید که المنت های یک صفحه باید id یکتایی داشته باشند(هیچ دو المنتی نمی توانند id یکسانی داشته باشند)در صورت وقوع چنین حالتی فقط المنت اول با id انتخاب شده و بقیه المنت ها انتخاب نمی شوند.

$(".MyCLASS");

این گزینشگر تمامی المنت هایی را که مقدار class  آنها برای برابر MyCLASS باشد را انتخاب می کند.در واقع این گزینشگر معادل متد document.getElementsByClassName(); را فراخوانی می کند.برای مثال:

$("p.passage");

تمام تگهای <p> را که class  آن ها برابر passage  باشد را انتخاب می کند.

متد document.getElementsByClassName(); در تمامی مرورگرهای جدید پشتیبانی می شود به جزIE6  و پایین تر که البته jQuery  با استفاده از خاصیت className این گزینشگر را برای IE6  وپایین تر هم فعال کرده است.

می توانید از دو class یکجا برای انتخاب المنت استفاده کنید.مثلاً:

$(".one.two");

این گزینشگر تمامی المنت هایی  را که صفت class  آنها برابر two و  one باشد را انتخاب می کند.

برای تعریف دو یا چند class برای یک المنت بین نام class ها فاصله بیاندازید.مثلاً

$("E F");

تمام المنتهای F را که فرزند E هستند را انتخاب می کند. در ضمن اگر خود المنت های  F فرزندان دیگری داشته باشند آن را هم انتخاب می کند.برای مثال:

$("ol li");

ای گزینشگر تمامی آیتم های یک لیست مرتب را انتخاب می کند یعنی تمامی تگهای <li> را که فرزند تگ <ol> هستند.

$("E>F");

تمامی  F ها را که فرزند مستقیم E هستند را انتخاب می کند.(منظور از فرزند مستقیم این است که فقط فرزندان E را انتخاب می کند و اگر داخل F المنت های دیگری هم باشد آن ها انتخاب نمی شوند.امیدوارم که متوجه شده باشید،اگر متوجه نشدید سوالات و اشکالات خود را در نظرات مطرح کنید.)برای مثال:

$("ul>li");

این گزینشگر تمام تگهای <li> را که فرزند <ul> باشند را انتخاب می کند و در صورتی که خود <li> دارای فرزندان دیگری باشد(یا به اصطلاح لیست تودرتو باشد)،آن فرزندان انتخاب نمی شوند دقیقاً بر خلاف گزینشگر $("E F") .

این گزینشگر در مرورگر IE6 و پایین تر پشتیبانی نمی شود.

$("E+F");

تمامی المنتهای F را که بلافاصله پس از E آمده اند و پدر یکسانی دارند را انتخاب می کند.(به کلمه بلافاصله دقت کنید... درصورتی که المنت F بلافاصله پس از المنت E نیامده باشد،انتخاب نمی شود). برای مثال:

$("p+b");

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

$("E~F");

تمامی المنت های F را که بعد از المنت E آمده باشد و والد یکسانی دارند را را انتخاب می کند (اگر F  بلافاصله بعد از E هم نیامده باشد،باز هم انتخاب می شود.برخلاف گزینشگر بالا). برای مثال کد html زیر:

و این کد jQuery  را در نظر بگیرید...

$("p~em");

گزینشگر فوق تگ <em> را انتخاب می کند (اگر چه بلافاصله پس از تگ <p> نیامده است).

این گزینشگر و گزینشگر قبلی فقط المنت های بعد ازگزینشگر اول را انتخاب می کنند نه قبل از آن ها را.مثلاً در مثال فوق اگر قبل از تگ  <p>  باز هم تگ <em> وجود داشت،این تگ توسط jQuery  انتخاب نمی شد.

comment دیدگاه کاربران

عالی بود

حسین محمدی

ممنون آقای ساطع

رضا ساطع بیدگلی

ببخشید آقای محمدی :
شما هم از امروز جزو خانواده ی سون لرن شدید ؟

کیوان علی محمدی

اختیار داری آقای محمدی سابقه زیادی توی سایت دارن ایشون همون شاتل خودمون هستن.

حسین محمدی

همطونطور که آقای علیمحمدی هم گفتند،من چند ماهی میشه که توی سون لرن هستم،تقریباً از اواخر اردیبهشت اومدم.

رضا ساطع بیدگلی

نه منظورم نویسنده شدنشون بود ؟

لقمان آوند

نه
حسین اقا کاربر VIP هست و هر کاربر VIP در ماه می تونه پیشنهاد انتشار یک مطلب رو بده که با نام خودش در سایت منتشر میشه .

رضا ساطع بیدگلی

پس یعنی این مطلب رو کی نوشته ؟؟؟؟

لقمان آوند

خود آقا حسین نوشته و ارسال کرده .

رضا ساطع بیدگلی

اوکی ….

لقمان آوند

ضمنا سعی کن در پاسخ به نظر خودت نظر ندی و دکمه ی پاسخ اون دیدگاهی که می خوای بهش پاسخ بدی رو بزنی !

rezad91

ممنون خیلی خوب بود فقط چرا به صورت pdf نیست که بشه راحت دانلود کرد.
………………………………………………..
اگه میشه یه قسمت توی سایت بزارید تا تعداد کاربران vip رو نشون بده .

کیوان علی محمدی

سلام دوست عزیز لینک دانلود PDF برای کاربران ویژه پایین صفحه در دسترسه،این تصمیم هم بستگی به نظر مدیر سایت داره.

لقمان آوند

سلام
همونطور که کیوان گفت در کنار دکمه های شبکه اجتماعی آیکون دانلود PDF مطلب هم هست که می تونید استفاده کنید .
پیشنهادی که دادید در برنامه هست . در 2 هفته ی آینده تغیراتی در سایت نداریم و بعد از اون به مرور زمان اطلاعات جامعی در مورد تعداد و نوع کاربران VIP ثبت نامی و آماری در این رابطه در دسترس کاربران قرار می گیره .
این مطلب هم در آینده ی نزدیک با فرمت PDF بهتری در قسمت فایل های ویژه ی کاربران vip قرار می گیره .
موفق باشی

اساتید،الآن داشتم با ie لینک pdf مطلب رو چک می کردم،log-in نبودم ولی pdf رو برام آورد..
الآن هرکسی که عضو VIP هم نباشه به راحتی می تونه pdf مطالب VIP رو دانلود کنه…فقط کافیه لینک رو داشته باشه.

لقمان آوند

سلام
ممنون بابت گزارش این مورد .
تصحیح شد .
موفق باشی

عالیه؛
بسیار پست مفیدی بود.
آقای محمدی دست شما درد نکنه برای گرد هم آوری این مطلب. 😉 😉

حسین محمدی

خواهش می کنم… 🙂

با سلام خدمت اقا لقمان
قبلا که یک قسمتی تو سایت با عنوان درخواست همکاری بود ولی حالا که به کارمون اومد نیست. 🙂
داداش خیلی دوست داشتم تو سون لرن نویسندگی کنم،می خواستم بگم اگر صلاح میدونید منم جزء نویسندگان سون لرن باشم.

لقمان آوند

سلام
ایمیلی حاوی سوابق کار و تخصص هاتون در زمینه ی طراحی وب برام ارسال کنید .
بررسی میشه

Paria RVN

ممنون آقای محمدی ، زحمت کشیدین.

حسین محمدی

خواهش می کنم،وظیفه بود.

N a S e R

😆 حتمی مطلب خوبیه ما که حق دیدن نداریم

حسین محمدی

خب یه اشتراک بخرید… 😎

الان برای $(“p~em”); من بخوام به جای p از this استفاده کنم چیکار باید بکنم؟
مثلا مینویسم $(this+’~em’); ولی خب کار نمیکنه

وحید صالحی

؟؟؟؟!!!! کد کامل رو قرار بدین…

مهشاد کلانتری

ممنون مشکلم حل شد درواقع خط دومی رو نوشته بودم کار نمیکرد یکم گشتم دیدم از find میشه استفاده کرد:D

maryam

چگونه بین تگ img از کد php استفاده کنم؟؟؟؟؟؟؟؟؟؟؟؟

<img src="” />
این کد درسته؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟

کیوان علی محمدی

شما هر جایی خواستین فقط تگ های php رو باز کنید و دستورات لازم رو بنویسید،دیگه مهم نیست کجا باشه.

maryam

مرسی اقای علی محمدی.
من میخوام یک گالری اسلاید درست کنم با اپلود عکس اما نمیشه .
جه جوری کدها را براتون ایمیل کنم؟؟؟؟؟؟؟؟؟؟؟

کیوان علی محمدی

کد رو برای چی برای من بفرستین؟؟؟

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.