وب

بررسی jQuery selector و انواع آن

آموزش تکنوامبر 25, 2018

0 453 زمان تقریبی مطالعه 4 دقیقه

jQuery selector یا انتخابگر های jQuery یکی از مهمترین جنبه های کتابخانه jQuery هستند. این انتخابگرها از نحوی مشابه با CSS استفاده می کنند تا نویسندگان بتوانند به سرعت و به آسانی هر مجموعه ای از عناصر صفحه را برای کار با کتابخانه jQuery شناسایی کنند. آشنایی با jQuery selector کلید استفاده از کتابخانه jQuery به طور موثر است. ما در این مقاله قصد داریم به طور کامل شما را با قدرت jQuery selector آشنا کنیم. با ما همراه باشید.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت را مشاهده کنید)

آموزش پیشنهادی برای شما : آموزش جی کوئری (jquery) از مقدماتی تا پیشرفته

jQuery selector

آشنایی با jQuery selector و قواعد نحوی آن

اعلام jquery به طور کلی از الگوی نحوی زیر پیروی می کند:

jQuery selector یک عبارت رشته ای است که مجموعه ای از عناصر DOM را که به صورت مجموعه ای همگرا جمع شده و توسط روش های جی کوئری اداره می شوند را شناسایی می کند. همانطور که می دانید بسیاری از عملیات های jQuery می توانند زنجیره ای باشند. به مثال زیر دقت کنید:

با توجه به الگوی بالا می خواهیم یک عنصر DOM را با id value یا شناساگر مقدار ( goAway) و اسم کلاس (incognito) پنهان کنیم. نتیجه به شکل زیر خواهد بود:

همانطور که مشاهده می کنید اعمال روش های مختلف با استفاده از انتخابگر های jquery بسیار ساده است. مجموعه پیچیده ایجاد شده با استفاده از یک انتخابگر، برای راحتی بیشتر می تواند به عنوان یک آرایه جاوا اسکریپت در نظر گرفته شود. برای استفاده از عناصر درون مجموعه پیچیده، استفاده از نمایه آرایه بسیار مفید است. مانند مثال زیر:

همانطور که می بینید این کد عنصر متغیر را با اولین عنصر در مجموعه همگرا تنظیم می کند.

انواع jQuery selector

برا انتخابگر ها سه دسته مختلف در jQuery وجود دارد: انتخابگر های اصلی css، انتخابگر های موقعیتی و انتخابگر های سفارشی jQuery که به ترتیب به نام های زیر شناخته می شوند:

Basic CSS selectors
Positional selectors
Custom jQuery selectors

انتخابگر های پایه با نام انتخابگر های شناسایی ” find selectors” نیز شناخته می شوند، به این دلیل که از آنها برای شناسایی عناصر DOM استفاده می شود. انتخابگر های موقعیتی و انتخابگر های سفارشی jQuery را با نام انتخابگر فیلتر ها نیز شناسایی می کنند. دلیل این نام گذاری این است که آن ها مجموعه ای از عناصر را فیلتر می کنند.

انتخابگر های پایه (css (Basic CSS selector

این jQuery selector ها از دستورات نحوی و معنایی استاندارد css3 پیروی می کنند. در جدول زیر الگوی نوشتن این دستورات را مشخص کرده ایم. شما می توانید با جایگزاری عناصر و تگ های مختلف در این فرمول ها دستورات خود را اعمال کنید.

علامت	توضیحات
*	مرتبط کردن همه عناصر
E	مرتبط کردن همه عناصر با تگ E
E F	مرتبط کردن همه عناصر با تگ F که از زیر مجموعه های E هستند.
E>F	مرتبط کردن همه عناصر با تگ F که از فرزندان مستقیم E هستند.
E+F	مرتبط کردن همه عناصر با تگ F که با یک عنصر مشابه از تگ E مطابقت دارند.
E~F	مرتبط کردن همه عناصر با تگ F که با هر یک از عناصر مشابه در تگ E مطابقت دارند.
E:has(F)	مرتبط کردن همه عناصر با تگ E که حداقل یک زیرمجموعه یا زاده در تگ F دارند.
E.c	مرتبط کردن همه عناصر با تگ E که دارای یک کلاس با نام c هستند. تگ E بدون کلاس c را با *.c نمایش می دهند.
E#i	مرتبط کردن همه عناصر با تگ E که دارای یک id value با نام i هستند. تگ های بدون این id value را با *.i نمایش می دهند.
E[a]	مرتبط کردن همه عناصر با تگ E که دارای یک ویژگی با هر مقداری هستند.
E[a=v]	مرتبط کردن همه عناصر با تگ E که درای یک ویژگی با مقدار مشخص v هستند.
E[a^=v]	مرتبط کردن همه عناصر با تگ E که داری یک ویژگی مشابه هستند و value آنها از مقدار مشخص v شروع می شود.
E[a$=v]	مرتبط کردن همه عناصر با تگ E که داری یک ویژگی مشابه هستند و value آنها با مقدار مشخص v پایان می یابد.
E[a*=v]	مرتبط کردن همه عناصر با تگ که دارای یک ویژگی مشابه هستند و مقدار آن ها شامل v می شود.

انتخابگر های موقعیتی (Positional Selectors)

این دسته از jQuery selector ها مبتنی بر ارتباطات موقعیتی بین عناصر هستند. این انتخابگر ها را می توان به هر انتخابگر پایه ای اضافه کرد (که ما بوسیله B آن را نشان می دهیم) تا بر اساس موقعیت آن ها ارتباطات را فیلتر کرد. اگر B حذف شود، با * نشان داده می شود. در جدول زیر می توانید فرمول های مربوط به دستورات این این انتخابگر ها را مشاهده کنید:

علامت	توضیحات
B:first	اولین عنصر صفحه که با انتخابگر پایه B در ارتباط است را انتخاب می کند
B:last	آخرین عنصر صفحه که با انتخابگر پایه B در ارتباط است را انتخاب می کند
B:first-child	همه عناصر از B که اولین فرزند یا child هستند را انتخاب می کند
B:last-child	همه عناصر از B که آخرین فرزند یا child هستند را انتخاب می کند
B:only-child	تمام عناصر B که فقط فرزند یا child هستند را انتخاب می کند.
B:nth-child(n)	تمام عناصر B که فرزندان n-th هستند را انتخاب می کند. مقدار آن از ۱ شروع می شود.
B:nth-child(odd\|even)	تمام عناصر B که فرزندان odd یا even هستند را انتخاب می کند. اولین فرزند odd با ۱ نمایش داده می شود.
B:nth-child(Xn+Y)	تمام عناصر B که با این فرمول مطابقت دارند را انتخاب می کند. X نشان دهنده یک ضریب است و Y نشان دهنده میزان انحراف است. Y ممکن است ۰ باشد.
B:even	عناصر even را بر اساس عناصر تعریف شده با B انتخاب می کند.
B:odd	عناصر odd را بر اساس عناصر تعریف شده با B انتخاب می کند.
B:eq(n)	عناصر n-th را بر اساس عناصر تعریف شده با B انتخاب می کند
B:gt(n)	عناصر را بر اساس مجموعه عناصر تعریف شده با B که به دنبال عناصر n-th ایجاد شده اند، انتخاب می کنند. مقدار آن از ۰ شروع می شود.
B:lt(n)	عناصر را بر اساس مجموعه عناصر تعریف شده توسط B که پیش از عنصر n-th قرار دارند انتخاب می کند.