نسل جدید اسکریپت‌ها

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 نشان داده می‌شود.

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