نسل جديد اسكريپت‌ها

jQuery متن باز بوده و تحت 2 لیسانس MIT و GNU General Public License, Version 2 منتشر شده است.

گرامر jQuery طوری طراحی شده است كه براحتی می‌توان به المان‌های موجود در DOM دسترسی داشت، بسادگی امكان ایجاد انیمیشن را به شما می‌دهد و رخداد‌های اتفاق افتاده را مدیریت می‌كند. همچنین برای توسعه برنامه‌های كاربردی تحت Ajax كاربرد فراوانی دارد.

به وسیله امكانات jQuery برنامه نویسان می‌توانند به توسعه Plugin برای این كتابخانه اقدام كنند. به این صورت كه برنامه‌نویسان با ایجاد یك لایه مستقل در بالای كتابخانه jQuery یك‌سری عملیات جدید را با استفاده از عملیات سطح پایین می‌توانند انجام بدهند.

ماكروسافت و نوكیا برنامه‌هایی برای توسعه بسته‌های مبتنی بر jQuery در محصولات خود دارند. برای نمونه ماكروسافت jQuery را در ویژوال استودیوی خود پشتیبانی می‌كند. كتابخانه معروف ASP.NET AJAx و همین طور ASP.NET MVC براحتی با jQuery كار می‌كنند. در حال حاضر نوكیا نیز jQuery را با Web Run-Time كه برای توسعه ویجت‌ها مورد استفاده قرار می‌گیرد، یكپارچه كرده است.

چگونه در تولید و توسعه صفحات وب از این كتابخانه استفاده كنیم؟

قبل از هر چیز بهتر است با نگارش‌های منتشر شده jQuery بیشتر آشنا شویم. jQuery در 2 نسخه منتشر می‌شود، نسخه jquery min كه برای استفاده عمومی‌عرضه می‌شود و دیگر نسخه كاملی است كه برای توسعه‌دهندگان كاربرد دارد و امكان دیباگ كردن را در اختیار كاربر قرار می‌دهد و شامل توضیحات برای برنامه‌نویسان jQuery است. اما در نسخه Min كه حجم كمتری دارد، توضیحات و اطلاعات اضافی از سورس آن حذف شده است. بعد از دانلود كردن نسخه jQuery مورد نظر باید یك ارجاع از آن را در صفحه وب خود قرار دهید. به طور مثال:

«script src=»«path of jquery file»» type=»text/javascript»»«/script»

البته در قطعه كد بالا فایل jQuery باید در كنار پروژه باشد ؛ اما سایت‌های بزرگی كه در زمینه تولید صفحات وب فعالیت می‌كنند، مانند google.com به شما اجازه می‌دهند برای استفاده ازjQuery از سرور‌های آنها استفاده كنید به جای این كه فایل اصلی jQuery را در كنار پروژه خود بگذارید.

ساختار كلی دستورات jQuery به صورت زیر است:

$(selector).action();

در دستور بالا $ برابر شی jQuery است و selector نام یك المان یا مشخصات یك سری المان برای انتخاب شدن است، action عملی است كه روی المان یا المان‌های مورد نظر اعمال می‌شود.

اكثر كد‌های jQuery در رخداد ready یك سند html نوشته می‌شوند. این رخداد زمانی اتفاق می‌افتد كه صفحه شما آماده نمایش به كاربر باشد ؛ پس اولین كد همیشه كد زیر است:

$(document).ready(function(){

//write code here

});

selector‌ها به صورت‌های مختلفی ذكر می‌شوند كه انواع selector در زیر آورده شده است.

$(this) عنصری جاری را مشخص می‌كند.

$(«tag-name») تمامی‌المان‌هایی را كه اسم آنها در tag-name آورده شده است شامل می‌شود.

$(«#id») شامل تمامی‌المان‌هایی است كه آی دی آنها بعد از # آورده شده است.

$(«tag-name.test») در برگیرنده تمامی‌المان‌هایی است كه درtag-name قرار دارند و كلاس آنها برابر test است.

$(«tag-name#id») تمامی‌المان‌هایی كه از نوع tag-name باشد و آی دی آن برابر id باشد.

حال كه با selector ‌ها آشنا شدیم به بعضی رخداد‌های متداول كه برای هر المان وجود دارد می‌پردازیم.

۱ـ (hide) : مخفی كردن یك المان

۲ـ (mouseover): زمانی كه كرسر موس روی یك كنترل حركت می‌كند.

۳ـ (mouseout): زمانی كه كرسر موس از روی یك كنترل خارج می‌شود.

۴ـ (dbclick) : زمانی كه روی یك المان كلیك می‌شود.

۵ـ (Focus) : زمانی كه یك المان انتخاب می‌شود، اصطلاحا روی آن فوكوس می‌شود.

۶ـ (Blur) :‌زمانی كه فوكوس از روی یك كنترل خارج می‌شود.

اگر بخواهیم یك رخداد برای یك المان تعریف كنیم، این كار را به صورت انجام می‌دهیم:

$(selector).event(function(){

});

اگر بخواهیم یك رخداد را صدا بزنیم به این شیوه عمل می‌كنیم:

$(selector).event();

ایونت‌ها را می‌توان به صورت دیگری نیز تعریف كرد:

$(selector).event(function(){},function(){});

Function اول زمانی اتفاق می‌افتد كه یك ایونت رخ می‌دهد، Function دوم زمانی رخ می‌دهد كه عملیات یك event به پایان رسیده باشد، مثلا

$(«a»).mouseover(function(){

Alert('Mouse Over!»);

},

Function(){

Alert('Mouse out!');

});

زمانی كه كرسر موس روی یك تگ a برود پیغام! Mouse Over نمایان می‌شود، وقتی كرسر موس از روی یك كنترل خارج می‌شود پیغام !Mouse out نشان داده می‌شود.

امیربهاالدین سبط‌الشیخ