سوالی دارید؟

چنانچه سوالی دارید می‌توانید از قسمت پایین پرسیده تا پاسخ آن را بیابید!

درس دوم : قدرت کوتاه کردن کد

lesson-2-mini-power-code-jquery

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

var checkedValue;
var element = document.getElementsByTagName('input');
for(var n =0 ; n <element.length;n++) {
if(element[n].type =='radio' && element[n].name == 'someRadioGroup' &&
	element[n].checked) {
checkedValue = element[n].value;
	}
}

اما اگر بخواهیم همین کار را با استفاده از jQuery انجام دهیم ، با نوشتن تنها یک خط کد به خواسته ی خود می رسیم :

var checkedValue = $('[name="someRadioGroup"]:checked').val();

ممکن است این مثال کمی شما را نگران کرده باشد ، جای هیچ گونه نگرانی نیست ، به زودی چگونگی کارکرد دستور بالا را فرا خواهید گرفت و قادر به استفاده از آن در صفحه های ایجاد شده توسط خودتان خواهید بود .اما اجازه دهید، نگاهی به قسمت های مختلف این دستور قدرتمند داشته باشیم .
ابتدا تمام عناصری که مقدار صفت name آن ها برابر SomeRadioGroup می باشند را مشخص می کنیم ( اگر به خاطر داشته باشید تمام عناصر یک Radio Group تحت یک نام معرفی می شوند . ) سپس با اعمال فیلتری بر روی آن مجموعه ، عناصری که صفت checked آن ها در وضعیت مطلوب است ، جدا می شوند و مقدار آن ها برگردانده می شود ( که در هر لحظه تنها یک عنصر می تواند در وضعیت انتخاب قرار داشته باشد .)
قدرت اصلی jQuery ، مدیون انتخاب کننده ( Selector ) است . انتخاب کننده ، یک عبارت است که دسترسی به عنصری خاص بر روی صفحه را موجب می شود. انتخاب کننده این امکان را فراهم می سازد تا به سادگی عنصر مورد نظر را مشخص و به آن دسترسی پیدا کنیم که در مثال فوق ، عنصر مورد نظر ما گزینه ی انتخاب شده از Radio Group بود .
حتی همین مثال کوچک نیز می بایست شما را متوجه این نکته کرده باشد که jQuery راهی آسان و بی دردسر برای ایجاد نسل آینده ی برنامه های تحت وب پرتعامل می باشد . اما صبر کنید تا قدرت های دیگر آن را برای ایجاد صفحه های مورد نظرتان ببینید که با پیشرفت درس ها با آن ها آشنا می شوید .
به زودی خواهید دید که چگونگی می توانیم انتخاب کننده هایی برای این قبیل موارد ایجاد کنیم ، اما پیش از آن ، اجازه دهید نظر سازندگان jQUery را برای استفاده بهتر از جاوا اسکریپت در صفحه هایمان بررسی کنیم ( دروس بعدی را حتما مطالعه کنید )

ارسال یک نظر

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

شما می‌توانید از این تگ‌های HTML استفاده نمائید: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>