همواره راه های زیادی است برای رسیدن به هدف‌

انتخاب ‌‌عناصر ‌‌با‌‌ استفاده از‌تکنیک‌های CSS

هفته پیش در مورد روش انتخاب عناصر و دسترسی به آنها صحبت کردیم ، اگر شما آزمایشگاه انتخابگر ها را دانلود و از آن استفاده کرده باشید ، حتما تا به حال این بخش را به خوبی فرا گرفته اید. در مبحث بعدی که این هفته در مورد آن صحبت می کنیم ، نحوه استفاده از انتخابگر های ساده Css ، به همراه چند مثال را بررسی خواهیم کرد.
کد خبر: ۱۸۳۵۶۶

برای اعمال کردن یک رویه خاص بر روی عناصر موجود در صفحه ، توسعه دهنگان وب به روشی ساده اما در عین حال بسیار قدرتمند و کارا روی آوردند. این روش ساده در تمامی مرورگر های وب قابل اجرا بود و باعث می شد تا حجم عظیمی از اطلاعات تکراری در صفحه از بین بروند و همچنین ویرایش و تغییر حالت و رنگ های صفحه نیز به سادگی میسر شود. این روش که با استفاده از شناسایی عناصر مختلف از روی نام ID  یا Class  آن امکان دسترسی به عنصر و یا گروهی از عناصر موجود در صفحه را امکان پذیر می کرد تکنیک  CSS  نامیده شد.

برای نمونه چند نوع از روش های دسترسی به عناصر با استفاده از CSS  را با هم مرور می‌کنیم.

-a  این انتخابگر با تمامی عناصر لینک در صفحه <a > منطبق می شود.

-‌َ‌special این انتخابگر با تمامی عناصری که دارای ID  با نام special  می باشند منطبق می شود.

-.text این انتخابگر با تمامی عناصری که دارای  class  با نام  text  می باشند منطبق می شود.

 -a‌َspecial‌.text این انتخابگر با تمامی عناصری لینکی که دارایID  با نام special  و class  با نام text  می باشند منطبق می شود.

text. special a p - این انتخابگر نیز با تمامی عناصر لینکی که دارای  ID  با نام special  و class  با نامtext  می باشند و در داخل عنصر <p > قرار دارند منطبق می شود.

ما می‌توانیم تعداد زیادی از انتخابگر ها را با یکدیگر ادغام کنیم تا به ترکیبی دلخواه جهت دسترسی به عنصر و یا عناصر مورد نظر در صفحه برسیم. در حقیقت تعداد زیادی از وب سایت هایی که ظاهری جذاب و حرفه ای دارند ، از ترکیب تعداد زیادی از این عناصر با یکدیگر جهت شکل و فرم دهی به صفحات وب سایت خود استفاده می کنند.

طراحان وب می توانند از روش های ترکیبی که مثال زدیم در جی کوئری استفاده کنند ، در واقع ساختار جی کوئری به نحوی بنا شده است که به طراحان این امکان را می دهد تا با استفاده از دانشی که از قبل در مورد CSS  داشته اند ، به صفحه ای که طراحی می کنند جذابیت بیشتری دهند.

برای دسترسی به عنصر مورد نظر در صفحه ، تابع پوششی جی کوئری این کار را به راحتی برای ما انجام خواهد داد:

("p a.specialClass")$
فقط با چند استثنا ، جی‌کوئری کاملا مطابق با  3  CSS عمل می کند ، بنابراین انتخاب عناصر به روشی که به آن اشاره شد چندان تعجب برانگیز نباید باشد.

عناصری که توسط  فایل هایstyle sheet  در مرورگرهای استاندارد وب قابل انتخاب هستند توسط موتور انتخابگر جی کوئری نیز قابل شناسایی هستند و به راحتی تحت تاثیر دستورات مورد نظر جی کوئری قرار می گیرند.

البته در اینجا باید به این نکته اشاره کرد که جی کوئری به هیچ وجه بر اساس نوع و نحوه پیاده سازی فایل های CSS  که طراحی و رنگ بندی یک صفحه وب را مشخص می کند ، عمل نمی کند. جی کوئری حتی اگر مرورگر پشتیبانی کاملی از استاندارد هایCSS  نکند باز هم روی عناصر مورد نظر و مشخص شده اثر خود را می‌گذارد.
روال کلی کار جی کوئری بر اساس استاندارد های کنگره جهانی وب  (W3C)  است و بر اساس قوانینی که  W3C  آن ها را مشخص کرده است بر روی عناصر کار می کند.

برای تمرین و آشنایی بیشتر می‌توانید به آزمایشگاه انتخابگرها که هفته پیش معرفی شد بازگردید و نمونه‌های مختلفی از انتخابگرها را آزمایش کنید، انتخابگرها را می‌توانید بر مبنای
  ID و Class  نیز وارد کنید و نتیجه را مشاهده کنید.

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

 پویا سلیمی‌

newsQrCode
ارسال نظرات در انتظار بررسی: ۰ انتشار یافته: ۰

نیازمندی ها