انواع انتخاب کننده ها در jQuery
انواع انتخاب کننده ها در jQuery :
در بخش قبل به صورت مختصر به روش انتخاب انواع عناصر در صفحات وب با استفاده از jQuery
اشاره کردیم . در این بحش با نگاهی دقیقتر و مثال های عملی ، سعی می کنیم تا شما را
با روش انتخاب دقیق هر یک از عناصر مورد نظرتان آشنا کنیم . البته تنوع روش های
انتخاب عناصر خیلی زیاد است و ذکر تمام حالات در این بخش نمی گنجد ، ولی سعی می شود
بیشتر حالت ها را پوشش دهیم . ضمن اینکه این روش ها را می توان با هم ترکیب کرد . jQuery
این امکان را به شما می دهد تا از بین تمام عناصر موجود در یک صفحه ، دقیقا عنصر مورد
نظر خود را بر حسب مشخصاتی همچون نوع عنصر ، کلاس ، شناسه و ... انتخاب کرده و متدهای
مورد نظرتان را روی آنها انجام دهید .
- انتخاب خود عنصر جاری : این کد باعث می شود عنصر جاری انتخاب
شود .
- انتخاب بر حسب نوع کلی عنصر : این کد باعث می شود تا تمام عناصر
از نوع < p > ( پاراگراف ) انتخاب شود .
- انتخاب بر حسب کلاس ( class ) عنصر : این کد باعث می شود تا
کلیه عناصری که از نوع پاراگراف بوده و جزءکلاس text هستند ، انتخاب شوند .
- انتخاب بر حسب شناسه ( Id ) عنصر : این کد باعث می شود تا عنصری
که شناسه انحصاری ( id ) آن در صفحه برابر مقدار text است ، انتخاب شود .
- انتخاب یک تگ با استفاده از محتویات متنی درون آن: : با استفاده
از این کد می توانید یک واژه یا متن را تعیین کرده و عنصر یا عنصرهایی را انتخاب کنید
، که آن کلمات در آنها وجود داشته باشند . برای مثال می خواهید از بین پاراگراف های
موجود در یک صفحه پاراگرافی را انتخاب کنید که واژه PHP در آن به کار رفته است .
Syntax
|
$( "نام عنصر : contains ( متن مورد نظر) " )
example : $( " p : contains ( PHP ) " )
|
مثال : در مثال زیر روش استفاده از کد بالا را به شما نشان
داده ایم . این کد باعث می شود تا از بین دو پاراگرافی موجود در صفحه فرضی ، پاراگراف
که کلمه PHP در آن است ، مخفی شود .
- انتخاب عناصر بر حسب خواص آنها و مقدارشان : این کد باعث می
شود تا تمام عناصری که دارای خاصیت href در دورن تگ خودشان هسنتد، انتخاب
شوند .
- : این کد باعث می شود تا تمام عناصری که مقدار خاصیت href آنها برابر
با مقدار # است، انتخاب شوند .
Syntax
|
$ ( "[href]=jQuery;#jQuery; " )
|
- : این کد باعث می شود تا تمام عناصری که مقدار خاصیت href آنها برابر
با مقدار # نیست، انتخاب شوند .
Syntax
|
$ ( "[href] ! =jQuery;#jQuery; " )
|
- : این کد باعث می شود تا تمام عناصری که مقدار خاصیت href آنها با
مقدار jpg به پایان می رسد ، انتخاب شوند .
Syntax
|
$ ( "[href$='.jpg']" )
|
- انتخاب عناصر بر اساس مکان و یا ترتیب قرار گیری آنها:
این کد باعث می شود تا آیتم < li > اول لسیت < ol > موجود در صفحه انتخاب
شود .
Syntax
|
$ ( "ol li:first" )
|
در مثال زیر این مسئله را به صورت عملی نشان می دهیم . در این مثال یک لیست ترتیبی
با 3 آیتم داریم . کدی طراحی کردیم که با اجرا شدن آن ، فونت آیتم اول به صورت bold
در خواهد آمد . برای اجرای دستور بر روی دکمه فرمان کلیک کنید :
- انتخاب تمام تگ های هدر موجود در صفحه : : این کد باعث می شود
تا تمام تگ های هدر ( h1 تا h6 ) موجود در صفحه انتخاب شود .
مثال : در مثال زیر روش استفاده از کد بالا را به شما نشان
داده ایم . فرض کنید دو تا تگ هدر در صفحه وجود دارد . کدی طراحی کردیم که در هنگام
اجرا تمام تگ های هدر موجود در صفحه را انتخاب کرده و رنگ آنها را به آبی تغییر می
دهد :
- انتخاب اولین نمونه از یک نوع تگ در صفحه : : این کد باعث می
شود تا اولین نمونه موجود از یک تگ در صفحه انتخاب شود .
Syntax
|
$( " نوع عنصر:first " )
example : $( " p:first " )
|
مثال : در مثال زیر روش استفاده از کد بالا را به شما نشان
داده ایم . این کد باعث می شود تا از بین دو پاراگراف موجود در صفحه فرضی ، پاراگراف
اول انتخاب شده و فونت آن را به یک فونت دیگر تغییر کند .
- انتخاب آخرین نمونه از یک نوع تگ در صفحه : : این کد باعث می
شود تا آخرین نمونه موجود از یک تگ در صفحه انتخاب شود . در واقع در کد و مثال های
قبلی کافی است واژه کلیدی first را به last تبدیل کنید .
Syntax
|
$( " نوع عنصر:last " )
example : $( " p:last " )
|
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نظر خودتان درباره این صفحه را با ما در میان بگذارید :