طراحی قدرتمند‌‌ وب‌

ابزار‌های مفیدjQuery

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

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

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

;(یک رشته)$trim.

به یاد داشته باشید که کاراکتر  $  به عنوان یک شناسه عمل می‌کند، اگر استفاده از کاراکتر  $  کمی‌برای شما عجیب و پیچیده است، می‌توانید از روشی دیگر که قبلا هم به آن اشاره شده است، استفاده کنید:

 ;(یک رشته) jQuery .trim

دراین مثال کاملا می‌توانید به این نکته پی ببرید که استفاده از تابع  trim  می‌تواند به دو روش استفاده شود ، استفاده از کاراکتر  $  و یا استفاده از کلمه  jQuery  در ابتدای فرا خوانی تابع مورد نظر.

توجه کنید که این عناصر در مستندات  jQuery  به عنوان  utility functions  شناخته و معرفی می‌شوند با اینکه همانطور که مشاهده کردید روش استفاده از آنها دقیقا همانند همان نمونه معروفی است  (()$)  که پیشتر به آن اشاره شد.می‌توانید برای دسترسی به لیست کامل مستندات  jQuery  به این آدرس  docs. jQuery.com  مراجعه کنید.

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

حاضر سازی و اداره یک سند

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

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

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

دستوری که جهت نمایش "راه راه" سطر‌های یک جدول مورد استفاده قرار می‌گیرد، چیزی شبیه به این دستور خواهد بود:

window.onload = function})
("tabletr:nth-child(even)").$
;{addClass("even");

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

 پویا سلیمی‌