وب

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

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

jQuery selector

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

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

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

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

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

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

jQuery selector

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

در مورد jQuery selector های سفارشی نیز به صورت مفصل در یک مقاله مجزا بحث خواهیم کرد.

 

منبع : طراحی سایت

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

همچنین ببینید
بستن
دکمه بازگشت به بالا