تبلیغات

دوره H جی کوئری: درس 2: انتخابگرها یا Selector ها

دوره آموزشی H جی کوئری

دوره H جی کوئری
درس 2: انتخابگرها یا Selector ها در جی کوئری


دوره‌های H
دوره‌ی H، یک دوره‌ی فشرده می‌باشد که برای زبان‌های برنامه‌نویسی مختلفی در نظر گرفته شده است و در آن بصورت خلاصه و مفید، به بیان مهم‌ترین مباحث هر زبان برنامه‌نویسی پرداخته می‌شود تا بتوان در کوتاه‌ترین زمان ممکن، به ابتدایی‌ترین موارد موجود در یک زبان برنامه نویسی مسلط شد. برای مطالعه بیشتر و لیست تمامی دروس این دوره کلیک کنید...

«درس قبلی»، بطور خلاصه با جی کوئری آشنا شدیم؛ اما در این درس قصد داریم تا به مهم‌ترین چیز در جی کوئری که انتخابگرها یا Selectorها هستند بپردازیم. پس بیایید نگاهی به تمامی انتخابگرهای جی کوئری داشته باشیم. انتخابگرها امکان دسترسی به عناصر HTML DOM یا سند HTML را در مقایسه با جاوا اسکریپت خالص آسان می‌کنند.

همانطور که در درس قبل دیدید، انتخابگرهای جی کوئری با علامت $ و دو پرانتز شرو می‌وشند؛ یعنی ()$ !!! و همچنین این انتخابگرها، همنانند انتخابگرهای CSS عمل می‌کنند و طبیعتا هرکسی با CSS آشنایی داشته باشد، در این درس مشکلی نخواهد داشت.

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

اساسی‌ترین و ابتدایی‌ترین انتخابگر در جی کوئری، انتخاب کننده‌ی عنصر است؛ یعنی با نوشتن نام تگ HTML مورد نظر مثل div یا p و …، تمامی عناصری که آن تگ را دارند انتخاب می‌شوند. برای مثال می‌خواهیم تمامی عناصری که تگ div را دارند انتخاب کنیم:

انتخابگر کلاس

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

فقط کافیست یک علامت نقطه گذاشته و سپس نام کلاس را نوشت. و در اینجا تمامی عناصری که کلاس menu برایشان تعریف شده باشد انتخاب می‌شوند.

انتخابگر آیدی

عنصری که دارای یک آیدی مشخصی است را انتخاب کنید. بصورت زیر:

فقط کافیست یک علامت # گذاشته و سپس آیدی عنصر مورد نظر را نوشت. و در اینجا عنصری که آیدی test را داشته باشد، انتخاب می‌شود.

انتخابگر یک المنتی که فلان کلاس را دارد

در بالا، با انتخابگر نام المنت براساس تگ و همچنین انتخابگر کلاس آشنا شدیم. حالا اگر بخواهیم مثلا تمامی عناصر div ای که دارای کلاس menu هستند را انتخاب کنیم، بایستی بصورت زیر عمل کرد:

یعنی ابتدا نام تگ عنصر را نوشته و سپس یک نقطه قرار داده و کلاس مورد نظر را می‌نویسیم.

انتخابگر اولین المنت از یک المنت موجود

یک عنصر p در نظر بگیرید که داخل آن از چندین المنت مختلفی مثل a و span  m و … استفاده شده است. اگر بخواهیم اولین المنت داخل آن را که بالاتر از بقیه قرار دارد انتخاب کنیم، بایستی بصورت زیر عمل کرد:

ابتدا نام تگ عنصر را نوشته و سپس یک دو نقطه قرار می‌دهیم و عبارت first را می‌نویسیم (یعنی اولی)

انتخابگر چندتایی

همانند CSS می‌‌توان از چند النتخاب‌گر بصورت یکجا استفاده کرد! اینکار را با جدا کردن انتخابگرها توسط یک ویرگول انجام می‌دهیم. مثلا بصورت زیر:

انتخابگر فرزندان مشخص از یک المنت مشخص

یک div را در نظر بگیرید که داخل آن عناصر مختلفی مثل p و span و … بکار رفته است.حالا اگر بخواهیم مثلا p های داخل آن را انتخاب کنیم؛ بایستی بصورت زیر عمل کرد:

موارد تو در تو نیز انتخاب می‌شوند. یعنی مثلا یک p داخل p دیگر و …

حالا فرض کنید بخواهیم تمامی المنت‌هایی که کلاس FuLLKade را دارند و داخل عناصر div (جزء فرزندان) هستند را انتخاب کنیم:

انتخابگر تمامی عناصر

برای انتخاب تمامی عناصر موجود در صفحه، از یک * همانند CSS استفاده می‌شو. بصورت زیر:

مهم‌ترین انتخاب‌گرها

سوال: به نظرتان طبق تصویر بالا اگر بخواهیم تمام المنت‌هایی که فرزند مستقیم المنت‌های div هستند را انتخاب کنیم، چگونه باید عمل کرد؟!

درس بعدیدرس قبلی
تبلیغات
0
کانال تلگرام فول کده
تبلیغات

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

هادی اکبرزاده

[ مدیر فول کده ]

علاقه‌مند به اشتراک گذاری اطلاعات در هر زمینه‌ای / برنامه‌نویس و دانشجوی ارشد رشته شبیه‌ساز هوشمند - در حال نوشتن یه رمان (اگه خدا بخواد و تموم شه ?)

پاسخ دهید

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

نظرات ثبت شده بدون دیدگاه