جهت استفاده از کتابخانه جی کوئری و امکانات آن ابتدا باید آن را از سایت Jquery.com دانلود نمایید . سه مدل برای دانلود وجود دارد :
Minified : فایل فشرده شده ی کتابخانه می باشد که حجم آن ۱۵ کیلوبایت است .
Uncompressed : که به صورت غیر فشرده هست و حجمش حدود ۹۴ کیلو بایت می باشد. و برای توسعه یا فراگیری مورد استفاده قرار میگیرد.
Packed : حجمی حدود ۲۹ کیلوبایت داره و به صورت gzip فشرده شده .
پیشنهاد ما برای دانلود jquery.min یعنی مدل Minified می باشد ، زیرا سرعت لود بالاتری نسبت به دیگر مدل ها دارد .
جهت استفاده از جی کوئری پس از دانلود آن را در صفحه فراخوانی می نمایید . دستور فراخوانی این کتابخانه به صورت زیر می باشد :
پس از فراخوانی آن در صفحه می توانید از پلاگین های مختلف جهت برطرف نمودن نیاز خود استفاده کنید . نکته قابل توجه این است که برای استفاده از هر گونه پلاگین جی کوئری باید ابتدا کتابخانه آن را در ابتدای کدهای جی کوئری فراخوانی نمود . در صورتی که بخواهید بدون استفاده از پلاگین های خاص توسط دستورهای جاوااسکریپتی برخی از Function های کتابخانه را فراخوانی نمایید می توانید به دو روش عمل نمایید : روش Inline : در این روش کدهای جاوا اسکریپت بین دو تگدر ابتدا و یا انتهای صفحه نوشته می شود . به عنوان مثال :
<script type=”text/javascript” src=”jquery.min.js”></script>
<script type=”text/javascript” src=”mycode.js”></script>
نحوه استفاده از کتابخانه Jquery-ui
برای استفاده از این کتابخانه ابتدا آن را از jqueryui.com دانلود کنید . علاوه بر این می توانید بصورت optional گزینه های مورد نیاز خود را انتخاب کرده و کتابخانه jqueryui را ایجاد و سپس دانلود نمایید . برای ایجاد کتابخانه JqueryUi بصورت Optional می توانید به لینک jqueryui.com/download مراجعه نمایید . قابل ذکر است که این فریم ورک همراه با کتابخانه jquery ورژن ۱.۶ به بالا عمل می کند . بعد از دانلود کتابخانه آن را از حالت zip خارج کنید ، پوشه ی دانلود شده شامل پوشه های زیر می باشد :
/css/
/development-bundle/
/js/
index.html
برای استفاده از این کتابخانه در هر صفحه ای شما نیاز به فراخوانی این سه فایل دارید :
<link rel=“stylesheet” href=“css/themename/jquery-ui.custom.css” />
<script src=“js/jquery.min.js”></script>
<script src=“js/jquery-ui.custom.min.js”></script>
پس از اینکه شما فایل های ضروری را در صفحه ی وب خود قرار دهید ، می توانید انواع ویجت ها را به راحتی به صفحه وب خود اضافه کنید . به عنوان مثال برای استفاده از datepicker که در تصویر زیر مشاهده می کنید ، تنها یک input قرار میدهیم و از تابع .datepicker()
استفاده می کنیم .