ما را بیابید

نشانی
خیابان ۱۲۳
نیویورک، نیویورک ۱۰۰۰۱

ساعت کاری
شنبه تا چهارشنبه: ۹ صبح تا ۵ بعد از ظهر
پنجشنبه و جمعه: ۱۱ صبح تا ۳ بعد از ظهر

وب

انتخابگر های سفارشی jQuery و نحوه استفاده از انتخابگرها

انتخابگر های سفارشی jQuery

انتخابگر های سفارشی 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

مثال های کاربرد انتخابگر های 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 این کار بسیار سخت تر بود و گاهی راهی برای انتخاب یک مجموعه از عناصر خاص وجود نداشت.

 

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

آموزش تک
نویسندهآموزش تک

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