alaki_p
چهارشنبه 05 مهر 1391, 11:03 صبح
سلام
اصولا عناصر در صفحات وب قرار می گیرند که نمایش داده بشن و در بعضی مواقع غیر از نمایش بتونن پیمایش بشن و یا وظیفه تعامل با کاربر رو بر عهده بگیرند.
نمایش کنترل ها
تو بحث نمایش کنترل ها، هم از آی دی و هم از کلاس استفاده می شه. زمانی شما در یک صفحه کنترل های تکراری زیادی خواهید داشت مثل نوشته ها و پاراگراف ها و لینک ها که باید متناسب با طراحی شما برای اون صفحه نمایش داده بشن. در این حال شما می تونید در قایل css کلاس های خود را تعریف کنید .elementClass{} و اون کلاس رو به تمامی کنترل های همسان خودتون نسبت بدید. مزیت این کار هم خوب مشخصه، با تغییر یک کلاس در css روی تمامی صفحه و یا صفحات وب سایتتون در صورت اعلان css تغییرات اعمال می شه و نیازی به تغییر تک تک عناصر نیست.
اما در نمایش کنترل ها هم از id ممکنه استفاده بشه. بعضی اوقات شما در یک صفحه از وب سایت عنصری دارید که فقط یک بار تکرار می شود مثل header یا footer وب سایت(منظورم تگ هدر و فوتر در html5 نیست). در این مواقع می تونید به جای استفاده از class از id عنصر خود در فایل css استفاده کنید#elementId{} به این ترتیب تعریفات شما در css فقط و فقط بر روی عنصر معرفی شده اعمال می شود و برای آن منحصر به فرد (در سطح صفحه اعلان شده) خواهد بود. اما فایده اصلی این امر چیست؟ دلیل اصلی استفاده از ای روش می تواند خصوصی سازی عناصر درون یک عنصر اصلی مثل <div> باشد و همانطور که گفتم تو یه صفحه ممکن است چندین لینک و پاراگراف وجود داشته باشه که جهت نمایش از استایل تعریف شده استفاده کنند. اما در مواقعی شما یه لینک یا پاراگرافی دارید که می خواهید متمایز از استایل کلی باشه، در این حال یک عنصر مثلا div با id ی #divSample{} تعریف می کنید و عناصر خاص خود رو درونش قرار می دهید. سپس با کدی مشابه این #divSample a{} می تونید تمام لینک های درون div رو نسبت به لینک های معمولی صفحتون سفارشی سازی کنید.
پیمایش کنترل ها
مورد استفاده دیگه نحوه تعامل با کاربران و فانکشن های زمان اجرا و ... است. در این حال به طور مثال با استفاده از جاوا اسکریپت و یا جی کوئری میخواهیم عملیاتی را بر روی تمامی پاراگراف ها یا متون وب سایت (مثل بزرگتر و یا کوچکتر نمایش دادن سایز فونت ها در وب سایت) انجام دهیم. در این حالت می توانیم تمامی عناصر انتساب داده شده با یک کلاس را با کد getElementByClass('elementClass') در صفحه بگیریم و تغییرات لازم را بر روی آن انجام دهیم. اما اگر بخواهیم تغییرات دلخواه را بر روی یک عنصر خاص انجام دهیم باید از Id آن استفاده کنیم getElementById('divSample') در جی کوئری هم به همین روش می توان تغییرات را اعمال کرد. در بسیاری مواقع توسط جی کوئری Id ی یک عنصر مثل div را میگیریم و رنگ آن ویا حتی محل نمایش آن را در صفحه و سایر خصوصیات دلخواه اونو تغییر می دیم. $('#divSample').css("background-color", "#fff");
اما اگه از خط زیر استفاده کنیم تمام عناصری که منتسب به کلاس elementClass هستند رنگ بکگراندشون عوض میشه :
$('.elementClass').css("background-color", "#fff");
تعامل با کاربر
به طور واضح در این حالت لازم است که از Id برای کنترل ها استفاده بشه. برای مثال در یک فرم ارسال ایمیل کنترل های تکست باکس و یا باتن باید Id ی خاص خود رو داشته یاشن که بتونیم مقادیر دریافت شده توسط اون ها رو گرفت و رویداد لازم رو انجان داد. (البته جسارت نباشه این مطلب نیاز به گفتن نداشت و من میدونم که مشکل شما مربوط به دو قسمت قبل بود)
امیدوارم مطلب بیان شده مفید بوده باشد.