1. از ویژگی های اصلی کتابخانه جی کوئری ، مدیریت رویدادها ( events )  است. ایجاد رویدادهایی مانند عملکرد کلیک ماوس و ارسال فرم فقط به چند خط کد نیاز دارد . این باعث می شود تمیزی کد HTML حفظ شود و نیازی به کنترل کننده های مختلف رویدادها نیست .
2. اصلاح عناصر HTML با استفاده از ویژگی DOM  ( دام مخفف Document  Object Model )  نیز راحت تر است . رابط کاربر پسند مرورگر امکان اضافه ، ویرایش و حذف عناصر وب را با استفاده از متدهای مختلف رویداد فراهم می کند .
3. به طور خاص متد  AJAX، جی کوئری را برای توسعه یک وب سایت واکنش گرا با استفاده از توابع AJAX ایده آل می کند . این ویژگی با ساده سازی عملیات درخواست  HTTPا بدون بارگیری مجدد صفحه ، تجربه کاربری را بهبود می بخشد .
4. جی کوئری افکت های انیمیشن داخلی زیادی دارد . حتی امکان ایجاد انیمیشن های سفارشی شامل ویژگی های CSS دلخواه را نیز فراهم کرده است.
5. قابلیت پشتیبانی جی کوئری از همه مرورگرها محبوبیت آن را افزایش داده است .
6. با انتخابگرهای CSS3 و سینتکس XML Path نیز کار می کند.
7. توجه داشته باشید که اضافه کردن اسکریپت های جی کوئری به وب سایت از طریق CDN ( شبکه توزیع محتوا ) آسان تر است . مجبور نیستید فایل کتابخانه را در پوشه سایت بارگیری و ذخیره کنید.

معایب جی کوئری چیست ؟

1. کتابخانه جی کوئری بسیار گسترده می باشد و همچنان در حال رشد و به روز رسانی است ، پس باز کردن فایل جاوا اسکریپت مدت زمان بیش تری طول می کشد که فشار زیاد تری روی سیستم کاربر وارد می کند .
2. انتزاعی بودن جی کوئری یادگیری و استفاده از جاوا اسکریپت را سخت تر می کند. گرچه ایجاد رویدادها برای افراد مبتدی را ساده می کند اما انجام کارهای پیچیده مانند دستکاری DOM نیاز به درک بیشتری از جاوا اسکریپت دارد تا بتوانید به نتیجه دلخواه برسید.
3. با نسخه قبلی سازگار نبودن جی کوئری بزرگ ترین نقطه ضعف آن می باشد و چون جی کوئری نسخه های زیادی منتشر کرده است ، خودتان باید کتابخانه را میزبانی کرده و به صورت دوره ای آن را به روز رسانی کنید .

افکت های مهم جی کوئری

برای یادگیری بهتر جی کوئری می توانید افکت ها یا توابع اساسی زیر را یاد بگیرید .

speed:  این پارامتر سرعت تغییر حالت عنصر را تعیین می کند .    

 easing:  این پارامتر تعیین کننده سرعت اجرا در ابتدا و انتهای افکت یا همان سرعت تغییر حالت است .

callback:  این پارامتر تابعی را تعیین می کند که بعد از کامل شدن عملیات فعلی اجرا خواهد شد .

1. تابع ()hide  تابع ()hide عناصر HTML را مخفی و تأثیر آن ها را از صفحه HTML  حذف می کند . می توانید با تنظیم پارامتر speed برای سرعت پنهان شدن عنصر آن را به یک انیمیشن تبدیل کنید . یا این که با تعیین پارامتر callback یک تابع برای بعد از کامل شدن عملیات روی عنصر تنظیم کنید .

2. تابع ()show  تابع ()show عناصر HTML را نمایش می دهد . فقط روی عناصر پنهان شده با تابع ()hide کار می کند . دقیقاً مشابه تابع ()hide با تنظیم پارامترها می توانید آن را به یک تابع متد انیمیشن تبدیل شود .

3. تابع ()toggle تابع ()toggle قابلیت مشاهده عناصر HTML را بر اساس ویژگی   display  آن ها در CSS با استفاده از یک رویداد کلیک تغییر می دهد . این تابع ، عنصر قابل مشاهده را پنهان می کند و اگر پنهان باشد آن را نمایش می دهد . توسعه دهندگان وب اصولا از این تابع برای تبدیل چند انیمیشن به یک دنباله استفاده می کنند .

این تابع می تواند دو یا چند تابع را به چند عنصر خاص مرتبط کند و امکان جا به جایی بین توابع را با کلیک روی عنصر فراهم کرده است . امضای این تابع در جی کوئری نسخه 1.8 منسوخ و در نسخه 1.9 حذف شده است .

4. تابع ()fadeIn تابع ()fadeIn مقدار opacity یا میزان ماتی عناصر HTML را تغییر می دهد تا به تدریج در صفحه HTML ظاهر شوند . می توانید پارامترهای  speed  و callback را برای تنظیم سرعت و شروع رویداد بعدی پس از ظاهر شدن کامل عناصر تنظیم کنید .

5. تابع ()fadeOut این تابع جی کوئری برعکس تابع ()fadeIn عمل می کند و مقدار opacity عناصر HTML را کم کرده تا به تدریج از صفحه HTML حذف شوند . تابع ()fadeOut مشابه توابع ()hide و ()show و ()fadeIn می تواند به متد انیمیشن تبدیل شود .

6. تابع ()fadeToggle تابع ()fadeToggle مشابه تابع ()toggle کار می کند . امکان نمایش یا پنهان تدریجی عناصر خاص را فراهم می کند .

7. تابع ()slideUp تابع ()slideUp عناصر را با یک انیمیشن لغزان مخفی می کند . برای تعیین مدت زمان و سرعت انیمیشن را برای آن تنظیم کنید .

8. تابع ()slideDown تابع ()slideDown عناصر را با یک انیمیشن لغزان ظاهر می کند . به طور مشابه پارامترهای آن قابل تنظیم هستند .

9. تابع ()slideToggle تابع ()slideToggle امکان جا به جایی بین توابع ()slideUp  و ()slideDown برای نمایش یا پنهان کردن عناصر را فراهم می کند .

10. تابع ()animate این تابع با استفاده از یک یا چند ویژگی CSS عناصر را متحرک می کند . مانند توابع قبلی امکان تنظیم پارامترهای  speed ، easing و  callback  برای سرعت ، سرعت حالت انتقال و همچنین تعیین تابع بعدی پس از اتمام انیمیشن فعلی وجود دارد .

توجه داشته باشید که تابع ()animate نمی تواند عناصر پنهان مانند ()slideDown و ()fadeIn  را نمایش دهد .

مثال هایی از توابع جی کوئری

مثال زیر نحوه استفاده از توابع  ()slideDown()، slideUp و ()slideToggle را نشان می دهد :

    $(“#flip”).click(function(){

    $(“#panel”).slideDown();

    });

مثال زیر نحوه استفاده از توابع ()hide و ()show را نشان می دهد :

    $(“#hide”).click(function(){

    $(“p”).hide();

    });

    $(“#show”).click(function(){

    $(“p”).show();

    });

مثال زیر یک بلوک کد تابع  ( animate ) را نشان می دهد :

    $(“button”).click(function(){

    $(“div”).animate({

    left: ‘250px’,

    height: ‘+=150px’,

    width: ‘+=150px’

    });

    });

مثال زیر به کارگیری CSS را نشان می دهد:

    $(“button”).click(function(){

    $(“h1, h2, p”).toggleClass(“blue”);

    });