انتخابگر های سفارشی jQuery به منظور استفاده معمولی یا تغییر ساده در انتخابگر ها ای که توسط css پیش بینی نشده اند، ایجاد شده اند. همانند انتخابگر های موقعیتی، انتخابگر های سفارشی jquery یک مجموعه مرتبط از عناصر پایه را فیلتر می کنند. این انتخابگر ها ممکن است ترکیب شوند و سبب ایجاد انتخابگر های قدرتمندی شوند. علاوه بر این در این مقاله نحوه استفاده از انتخابگر های مختلف را بررسی خواهیم کرد. برای آشنایی بیشتر می توانید مقاله مربوط به انتخابگر های jQuery را مطالعه کنید.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت را مشاهده کنید)
آموزش پیشنهادی برای شما : آموزش جی کوئری (jquery) از مقدماتی تا پیشرفته
انتخابگر های سفارشی jQuery
همانطور که گفته شد با استفاده از انتخابگر های سفارشی jQuery شما قادر خواهید بود کارهای ساده یا پیچیده ای انجام دهید که در انتخابگر های معمولی css امکان آن وجود نداشت. یکی از دغدغه های مهم طراحان وب این است که بتوانند عناصر مختلف صفحات سایت را به سادگی تغییر دهند. اما زمانی که شما بخواهید تعداد زیادی از عناصر را تغییر این کار بسیار دشوار خواهد بود. برای ساده شدن کار ها شما می توانید از انتخابگر های سفارشی jquery استفاده کنید.
در این صورت شما می توانید با نوشتن یک خط کد با یک فرمول خاص همه عناصری که در یک موضوع مشترک باشند را انتخاب کنید و تغییرات دلخواه را همزمان بر روی همه آن ها اعمال کنید. عملا این کار مانند این است که عناصر صفحه خود را در دسته بندی های مختلف قرار دهید. نکته مثبت این است که شما می توانید دسته بندی ها را نیز با هم ترکیب کنید و موارد مشترک بین دسته های مختلف را انتخاب کنید و آن ها تغییر دهید. اگر هنوز نمی دانید که این امکانات چقدر کاربردی است فقط به این فکر کنید که بدون وجود انتخابگر های سفارشی jQuery احتمالا ماه ها برای تغییر فقط یک عنصر در تمام صفحات سایت زمان صرف می شد.
آموزش پیشنهادی برای شما : آموزش جاوا اسکریپت از مقدماتی تا پیشرفته
در این جا ما با ارائه یک جدول فرمول های دستورات مهم وقدرمتند انتخابگر های سفارشی jQuery را به شما معرفی خواهیم کرد. در این جدول ما عناصر مرتبط پایه را با B نشان می دهیم و عدم وجود B به معنای مجموعه ای از همه عناصر تفسیر می شود. به جدول زیر دقت کنید.
|
علامت |
توضیحات |
| B:animated | عناصری از مجموعه پایه B که در حال حاضر در حال کنترل انیمیشنی یکی از متد های انیمیشن jQuery هستند را انتخاب می کند. |
| B:button | عناصری از B که هر یک از حالت های button شامل : button، input[type=submit]، input[type=reset] یا input[type=button] باشند را انتخاب می کند. |
| B:checkbox | عناصری از B که از نوع input[type=checkbox] باشند را انتخاب می کند |
| B:enabled | عناصر فرم B که در حالت فعال هستند را انتخاب می کند. |
| B:file | عناصری از B که از نوع iput[type=file] هستند را انتخاب می کند. |
| B:header | عناصری از B که از دارای انواع مختلف heafder که شامل <h1>، <h2>، <h3>، <h4>، <h5> و <h6> هستند را انتخاب می کند. |
| B:hidden | عناصری از B که پنهان هستند را انتخاب می کند. |
| B:image | عناصری از B که از نوع input[type=image] هستند را انتخاب می کند |
| B:input | عناصر input که در B قرار دارند را انتخاب می کنند. این عناصر شامل <input>، <select>، <textarea> و <button> می شوند. همه این عناصر از نوع input هستند. |
| B:not(f) | عناصری از B که با انتخابگر فیلتر کننده خاص f مرتبط نیستند را انتخاب می کند. یک انتخابگر فیلتر کننده شامل هر انتخابگری است که با : (دو نقطه) شروع شود. علاوه بر این مجموعه پایه B نمی تواند به عنوان بخشی از f مشخص شود. |
| B:parent | عناصری از B که والدین یا parent یک عنصر فررزند غیر خالی محسوب می شوند را انتخاب می کند. در این جا غیر خالی بودن عنصر child یا فرزند بسیار مهم است. |
| B:password | عناصری از B که از نوع input[type=password] هستند را انتخاب می کند. |
| B:radio | عناصری از B که از نوع input[type=radio] هستند را انتخاب می کند. |
| B:reset | عناصری از B که از نوع input[type=reset] یا button[type=reset] را انتخاب می کنند. |
| B:selected | عناصری از B که در حالت انتخاب شده قرار دارند را انتخاب می کند. همانطور که می دانید فقط عناصر <option> در این حالت قرار دارند. |
| B:submit | عناصری از B که از نوع type[input=submit] هستند را انتخاب می کند. |
| B:text | عناصری از B که از نوع type[input=text] هستند را انتخاب می کند. |
| B:visible |
عناصری از B که پنهان نیستند را انتخاب می کند. |
حالا که با فرمول های انتخابگر های سفارشی jQuery آشنا شدید بهتر است با استفاده از مثال ها ای با نحوه استفاده از آن ها آشنا شوید.
مثال های کاربرد انتخابگر های jQuery
- $(“img:animated”) همه عناصر <img> که تحت انیمیشن هستند را انتخاب می کند.
- $(“:button:hidden”) همه عناصر از نوع buttom را که پنهان هستند انتخاب می کند.
- $(“input[name=myRadioGroup]:radio:checked”) همه عناصر radio که دارای اتربیوت با نام myRadioGroup هستند را انتخاب می کند.
- $(“:text:disabled”) همه متن های غیرفعال را انتخاب می کنند.
- $(“#xyz p :header”) همه عناصر از نوع header که دارای عناصر <p> با نام xyz هستند را انتخاب می کند. ایحاد فاصله بین p و :header از اتصال مستقیم آن به عنصر پاراگراف جلوگیری می کند.
- $(“option:not(:selected)”) همه عناصر <option> انتخاب نشده را انتخاب می کند.
- $(“#myForm button:not(.someClass)”) همه عناصر button را زا <form> را که دارای id به شکل myform هستند را و به کلاس ها ای با نام someclass مرتبط نیستند را انتخاب می کند.
کلام آخر
همانطور که می بینید شما می توانید هم به صورت جدا از هم و هم به صورت گروهی از انتخابگر های سفارشی jQuery استفاده کنید. به این ترتیب شما قادر خواهید بود به سادگی از قدرت این انتخابگر ها برای انتخاب یک مجموعه از عناصر استفاده کنید.
بعد از انتخاب مجموعه عناصر مورد نظر شما می توانید با استفاده از روش های مختلف عملیاتی که می خواهید را بر روی این عناصر اعمال کنید. بدون انتخابگر های سفارشی jQuery این کار بسیار سخت تر بود و گاهی راهی برای انتخاب یک مجموعه از عناصر خاص وجود نداشت.
منبع : طراحی سایت
