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

هفته پيش و در پستهای گذشته درباره قدرتي كهjQuery در پوشش دادن عناصر يك صفحه از خود نشان مي‌دهد، صحبت كرديم. اكنونمي‌خواهيم درباره توابع و ابزار‌هاي مفيدي كه jQuery در اختيار طراحان وبقرار مي‌دهد، صحبت كنيم.

ابزار‌هاي مفيد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  در اختيار طراحان وب براي حل اين مشكل قرارمي‌دهد، صحبت خواهيم كرد و مثال‌هايي نيز در همين زمينه ارائه خواهيم كرد.