خانه / مقالات اموزشی / jQuery / آموزش jquery قسمت چهارم

آموزش jquery قسمت چهارم

انواع انتخاب کننده ها در jQuery :

در بخش قبل به صورت مختصر به روش انتخاب انواع عناصر در صفحات وب با استفاده از jQuery اشاره کردیم . در این بحش با نگاهی دقیقتر و مثال های عملی ، سعی می کنیم تا شما را با روش انتخاب دقیق هر یک از عناصر مورد نظرتان آشنا کنیم .  البته تنوع روش های انتخاب عناصر خیلی زیاد است و ذکر تمام حالات در این بخش نمی گنجد ، ولی سعی می شود بیشتر حالت ها را پوشش دهیم . ضمن اینکه این روش ها را می توان با هم ترکیب کرد . jQuery این امکان را به شما می دهد تا از بین تمام عناصر موجود در یک صفحه ، دقیقا عنصر مورد نظر خود را بر حسب مشخصاتی همچون نوع عنصر ، کلاس ، شناسه و … انتخاب کرده و متدهای مورد نظرتان را روی آنها انجام دهید .

  • انتخاب خود عنصر جاری : این کد باعث می شود عنصر جاری انتخاب شود .
     
  • انتخاب بر حسب نوع کلی عنصر : این کد باعث می شود تا تمام عناصر از نوع < p > ( پاراگراف ) انتخاب شود .
     
  • انتخاب بر حسب کلاس ( class ) عنصر : این کد باعث می شود تا کلیه عناصری که از نوع پاراگراف بوده و جزءکلاس text هستند ، انتخاب شوند .
     
  • انتخاب بر حسب شناسه ( Id ) عنصر : این کد باعث می شود تا عنصری که شناسه انحصاری ( id ) آن در صفحه برابر مقدار text است ، انتخاب شود .
     
  • انتخاب یک تگ با استفاده از محتویات متنی درون آن: : با استفاده از این کد می توانید یک واژه یا متن را تعیین کرده و عنصر یا عنصرهایی را انتخاب کنید ، که آن کلمات در آنها وجود داشته باشند . برای مثال می خواهید از بین پاراگراف های موجود در یک صفحه پاراگرافی را انتخاب کنید که واژه PHP در آن به کار رفته است .
     

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

 

در مثال زیر این مسئله را به صورت عملی نشان می دهیم . در این مثال یک لیست ترتیبی با ۳ آیتم داریم . کدی طراحی کردیم که با اجرا شدن آن ، فونت آیتم اول به صورت bold در خواهد آمد . برای اجرای دستور بر روی دکمه فرمان کلیک کنید :انتخاب عناصر بر حسب خواص آنها و مقدارشان : این کد باعث می شود تا  تمام عناصری که  دارای خاصیت href در دورن تگ خودشان هسنتد، انتخاب شوند .

 

: این کد باعث می شود تا  تمام عناصری که  مقدار خاصیت href  آنها برابر با مقدار # است، انتخاب شوند .

 

: این کد باعث می شود تا  تمام عناصری که  مقدار خاصیت href  آنها برابر با مقدار # نیست، انتخاب شوند .

 

: این کد باعث می شود تا  تمام عناصری که  مقدار خاصیت href  آنها با مقدار jpg به پایان می رسد ، انتخاب شوند .

 

انتخاب عناصر بر  اساس مکان و یا ترتیب قرار گیری  آنها: این کد باعث می شود تا آیتم < li > اول لسیت < ol > موجود در صفحه انتخاب شود .

 

  • انتخاب تمام تگ های هدر موجود در صفحه : : این کد باعث می شود تا تمام تگ های هدر ( h1 تا h6 ) موجود در صفحه انتخاب شود .
     

مثال : در مثال زیر روش استفاده از کد بالا را به شما نشان داده ایم . فرض کنید دو تا تگ هدر در صفحه وجود دارد . کدی طراحی کردیم که در هنگام اجرا تمام تگ های هدر موجود در صفحه را انتخاب کرده و رنگ آنها را به آبی تغییر می دهد :

 

در مثال زیر این مسئله را به صورت عملی نشان می دهیم . در این مثال یک لیست ترتیبی با ۳ آیتم داریم . کدی طراحی کردیم که با اجرا شدن آن ، فونت آیتم اول به صورت bold در خواهد آمد . برای اجرای دستور بر روی دکمه فرمان کلیک کنید :

 

انتخاب اولین نمونه از یک نوع تگ در صفحه : : این کد باعث می شود تا اولین نمونه موجود از یک تگ در صفحه انتخاب شود .

 

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

 

انتخاب آخرین نمونه از یک نوع تگ در صفحه : : این کد باعث می شود تا آخرین نمونه موجود از یک تگ در صفحه انتخاب شود . در واقع در کد و مثال های قبلی کافی است واژه کلیدی first را به last تبدیل کنید .

 

انواع رویداد ها

blur ( )این رویداد زمانی اتفاق می افتد که عنصر مورد نظر فوکوس برنامه را از دست می دهد .
change ( )این رویداد زمانی اتفاق می افتد که در عنصر مورد نظر تغییری ایجاد می شود .
click ( )این رویداد زمانی اتفاق می افتد که کاربر بر روی عنصر مورد کلیک می نماید .
dblclick ( )این رویداد زمانی اتفاق می افتد که کاربر بر روی عنصر مورد دابل کلیک می نماید .
focus ( )این رویداد زمانی اتفاق می افتد که عنصر مورد فوکوس برنامه را در اختیار می گیرد .
focusin ( )این رویداد زمانی اتفاق می افتد یک عنصر زیر مجموعه ( child object ) از عنصر مورد نظر فوکوس برنامه را در اختیار می گیرد .
focusout ( )این رویداد زمانی اتفاق می افتد یک عنصر زیر مجموعه ( child object ) از عنصر مورد نظر فوکوس برنامه را از دست می دهد .

اموزش طراحی سایت

آموزش طراحی سایت

اموزش طراحی وب سایت

آموزش طراحی سایت

درباره آموزشگاه نوین آی تی

همچنین ببینید

نحوه نام گذاری متغییر های جاوا

مطلب جدیدی که در این آموزش قرار است فرا بگیریم نحوه صحیح نامگذاری متغیر ها ...

پاسخ دهید

علی طاهری آموزشگاه طراحی سایت نوین آی تی 021-88283800 info(@)novin-it.net