آموزش مقدماتی jQuery – بخش دوم: متدها و توابع

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

$(selector).method();

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

توضیح سلکتور

برای این که سریع‌تر پیش برویم بیان می‌کنیم که بخش selector عبارت فوق به شما امکان استفاده از اجزای مختلف مانند نام، کلاس و ID ها را به روشی شبیه به CSS فراهم می‌سازد. بدین ترتیب محل اجزای مختلف DOM مشخص می‌شوند.

برای نمونه، برای به دست آوردن همه <div> که دارای نام کلاس hidden. هستند می‌توانیم از عبارت زیر استفاده کنیم:

$('div.hidden')

توضیح متد

بخش دوم این دستور method نام دارد که پس از یافتن DIV ها بر روی آن‌ها اعمال می‌شود (ابتدا بررسی می‌شود که آیا این div ها کلاً وجود دارند یا نه). به خاطر داشته باشید که جی کوئری تنها یک عنصر برای انتخاب ID بازمی‌گرداند، چون ID ها باید به صورت منحصربه‌فرد بر روی آیتم‌ها استفاده شوند. اگر شما در کد خود از یک شیء در بیش از یک مورد داشته باشید، می‌بایست به صورت یک کلاس در CSS تعریف شود.

اینک سؤال این است که در بخش methods چه کاری با عناصر DOM می‌توان انجام داد؟ متدهای.css در بخش قبلی معرفی شدند و از این رو می‌توانید از آن برای تست استفاده کنید. قالب کار ساده است:

.css('property','value');

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

.animate({'property':'value'},speed);

به عنوان مثال:

.animate({'opacity':'0.25','height':'100px'},'fast');

آرایه‌ها در جی کوئری

در این نقطه ممکن است تعجب کنید که آکولادها چه کاربری دارند. این آکولادها «object literal» نامیده می‌شوند و معمولاً برای ایجاد فهرستی از جفت‌های «مشخصه: مقدار» استفاده می‌شوند که اگر با زبان‌های برنامه‌نویسی دیگر آشنا باشید، شبیه یک آرایه اندیس دار عمل می‌کنند. از آن‌ها در جی کوئری استفاده زیادی خواهید کرد و بهتر است این عادت خوب را در خود ایجاد کنید که همواره بستن آکولادها و براکت ها را بررسی نمایید. در این صفحه مثال‌های خوبی برای متد انیمیت ارائه شده است.

علاوه بر دست‌کاری مشخصات CSS اشیا، با استفاده از جی کوئری می‌توانید محتوای متن را نیز تغییر دهید. به این منظور از متدهای ()text() ،.html.، و ()val. استفاده می‌شود (val برای دست‌کاری محتوای عناصر فرم استفاده می‌شود.) این متدها هم به صورت setter و هم getter عمل می‌کنند یعنی هم مقادیر مشخصات را تعیین می‌کنند و هم مقدار آن‌ها را باز می‌گردانند. اگر مقداری تعیین نکنید مقدار فعلی بازگشت داده می‌شود و در صورتی که مقداری تعیین کرده باشید، مقدار تعیین شده، جایگزین مقدار کنونی می‌شود.

در مثال زیر مقدار فعلی فیلد نام یک فرم comment اخذ شده و به متغیری به نام comment_name انتساب می‌یابد:

var commenter_name = $(#comment-form #name).val();

مقدار <span class=’name’> را برابر با مقداری تعیین می‌کنیم که از متغیر comment_name به دست می‌آوریم:

$('span.name').text(commenter_name);

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

مثلاً فرض کنید می‌خواهید به طور دینامیک یک بلوک تصویر تبلیغاتی را پس از سومین پاراگراف در ستون محتوا درج کنید؛ اما این کار را در جاوا اسکریپت انجام می‌دهید تا صفحه اولیه‌ای که بارگذاری می‌شود دست نخورده باقی بماند. شاید به نظرتان کار پیچیده‌ای بیاید ولی اصلاً چنین نیست:

$('div#content p:nth-child(3n)').after('<img src="ad.jpg"/>');

تجزیه کد جی کوئری

اگر بخواهیم کد فوق را تجزیه کنیم، از جی کوئری خواسته‌ایم که:

فیلم آموزش طراحی رابط کاربری سایت با فریمورک jQuery UI در فرادرس

کلیک کنید

1. Div دارای آی‌دی «content» را بیابد،
2. آن p که درون div قرار دارد را بیابد،
3. با استفاده از شبه سلکتور nth-child خواسته‌ایم که سومین پاراگراف را بیابد،
4. یک تصویر دلخواه را پس از عنصر مورد نظر درج می‌کنیم.

احتمالاً ما نمی‌توانیم همه متدهای جی کوئری را در این نوشته فهرست کنیم و شما نیز مطمئناً علاقه ندارید همه آن‌ها را یک جا بخوانید. نکته اینجاست که هر تغییری که به ذهنتان برسد برای اجرای آن یک متد وجود دارد، کافی است برای یافتن آن سری به API جی کوئری بزنید.

همچنین خاطر بسپارید که احتمالاً برای انجام هر کاری بیش از یک روش وجود دارد. برای مثال اگر نتوانید شی‌ء مورد نظر خود را به صورت ()insertAfter انتخاب کنید، احتمالاً می‌توانید فرزند بعدی را یافته و با استفاده از ()insertBefore شی‌ء مورد نظر خود را در محل مطلوب درج نمایید.

زنجیره سازی متد

به عنوان آخرین بخش مطلب حاضر توضیح کوتاهی در مورد زنجیره سازی متد ارائه می‌کنیم که اساساً به دلیل جالب بودن آن است. ابتدا تصور کنید که خطوط کد زیر را داریم:

$('nav#menu').fadeIn('fast');
$('nav#menu').addClass('beingShown');
$('nav#menu').css('margin-right','10px');

این کد معقول به نظر می‌رسد؛ اما همان کد را می‌توانید تنها در یک خط بنویسید:

$('nav#menu').fadeIn('fast').addClass('beingShown').css('margin-right','10px');

این کد دقیقاً همان کار را انجام می‌دهد و این کار زنجیره سازی متد نامیده می‌شود. از آنجا که تقریباً همه متدهای جی کوئری یک شیء جی کوئری را باز می‌گردانند، هر کدام را می‌توان به عنوان ورودی بعدی استفاده کرد. این به معنی نوشتن کد کمتر است که همیشه نکته خوبی محسوب می‌شود و همچنین در عمل نیز سریع‌تر اجرا می‌شود.

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

سخن پایانی

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

فیلم مجموعه آموزش‌ جی کوئری jQuery – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

اگر این نوشته مورد توجه شما قرار گرفته است، احتمالاً به موارد زیر نیز علاقه‌مند خواهید بود:

• طراحی و برنامه نویسی وب
• جی کوئری (jQuery) — یک راهنمای مقدماتی به زبان ساده
• آموزش طراحی رابط کاربری وبسایت با فریمورک jQuery UI
• آموزش کاربردی HTML5 – CSS3 – jQuery در طراحی وب
• مجموعه آموزش های پروژه محور برنامه نویسی
• آموزش کاربردی برنامه نویسی وب با جی کوئری

==