50درصد تخفیف سورس فروشگاهی دیجی کالا + اپلیکیشن اندروید تا پایان این هفته - کد تخفیف : off50
با تخفیف میخرم

آموزش جی کوئری – سلکتورها در jQuery (انتخاب گرها)

  • منتشر شده در تاریخ

آموزش جی کوئری

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

 

انتخاب عناصر با جی کوئری

جاوا اسکریپت, اغلب برای دریافت یا ویرایش محتوا یا مقادیر عناصر HTML و همچنین برای اعمال افکت های مانند نمایش, مخفی و انمیشن و غیره..  در صفحه وب استفاده می شود.

اما قبل از انجام هر عملیاتی نیاز است که عنصر HTML هدف را با سلکتورها در jQuery پیدا یا انتخاب کنید.

انتخاب عناصر با جاوا اسکریپت واقعا حوصله بر است اما اینجا جی کوئری مثل جادو کار می کنید.

قابلیت انتخاب ساده و آسان المان های DOM یکی از قدرتمندترین خصوصیات جی کوئری است.

نکته : جی کوئری تقریبا تمام سلکتور های تعریف شده در CSS3 را پشتیبانی می کند که البته سلکتورهای سفارشی خود را نیز دارد. این سلکتورهای سفارشی تا حد زیادی قابلیت سلکتورها در jQuery را افزایش می دهد.

در بخش زیر به شما چندین روش معمول برای انتخاب المان های روی صفحه و کار با آن ها را با جی کوئری نشان می دهیم.

 

انتخاب عناصر با ID

می توانید از سلکتور ID برای انتخاب یک المان که id منحصر به فرد در صفحه را دارد استفاده کنید.

برای مثال, کد جی کوئری زیر, زمانی که سند آماده (ready) بود, یک المان که خصوصیت id بصورت id=”netparadis” را دارد را انتخاب و هایلایت می کند.

در مثال بالا, $(document).ready() یک رویداد است که برای دستکاری امن صفحه با jQuery استفاده می شود.

کد داخل این رویداد فقط یکبار زمانی اجرا می شود که DOM کاملا لود شده و آماده است. در مورد رویدادها در جی کوئری در آموزش بعدی, بیشتر صحبت می کنیم.

انتخاب عناصر با نام کلاس

از سلکتور class می توانید برای انتخاب المان ها با کلاس مشخص استفاده کنید.

برای مثال, کد جی کوئری زیر, زمانی که سند آماده (ready) بود, المان هایی که خصوصیت کلاس بصورت class=”netparadis” را دارند, انتخاب می کند.

 

انتخاب المان ها با نام تگ

این سلکتور برای انتخاب المان هایی برای پایه نام عنصر را انتخاب می کند.

برای مثال, کد jQuery زیر , زمانی که سند آماده (ready) بود, المان های <p> را انتخاب و هایلایت می کند. 

 

انتخاب المان ها با خصوصیت

می توانید از سلکتور خصوصیت (attribute) برای انتخاب یک المان که یکی از خصوصیات تگ های HTML را داد استفاده کنید مثال برای لینک های خصوصیت target یا اینپوت ها از type و غیره..

برای مثال کد jQuery زیر , زمانی که سند آماده (ready) بود, همه المان های <input> با type=”text” را انتخاب و هایلایت می کنند.

 

انتخاب المان ها سلکتور CSS مرکب

می توانید از ترکیب سلکتورهای CSS , حتی انتخاب خود را دقیق تر کنید.

برای نمونه, می توانید از سلکتور کلاس به همراه یک سلکتور دیگر برای پیدا کردن المان های در یک سند که type و class مشخصی دارند بهره ببرید.

 

سلکتورهای سفارشی jQuery

به علاوه سلکتورهای تعریف شده CSS , خود jQuery‌ نیز سلکتورهای شخصی برای افزایش کارایی انتخاب عناصر در صفحه وب ارایه داده است.

 

امیدوارم در این بخش آموزش جی کوئری, از سلکتورها در jQuery نهایت استفاده را برده باشید.

در بخش بعدی با رویدادهای جی کوئری که بحث بسیار مهمی است, آشنا می شوید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم

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

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران

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

    دوره های آموزشی