جی‌کوئری چیست ؟ جی‌کوئری محبوب‌ترین کتابخانه جاوااسکریپت است و هدف اصلی آن ساده‌سازی اسکریپت‌های جاوااسکریپت Client Side در Html است. این کتابخانه همانند جاوااسکریپت در کنترل رویدادها، انیمیشن‌‌سازی تصویرهای صفحه وب، Ajax و غیره استفاده می‌شود اما به‌گونه‌ای طراحی شده است که به‌کارگیری جاوااسکریپت را بسیار ساده‌‌تر می‌کند.

مزیت‌های jQuery

• ساده‌سازی روش اعمال عملکردها نسبت به جاوااسکریپت به وسیله تعریف تابع‌های کاربردی و در نتیجه کاهش چشمگیر کدهای مورد نیاز برای یک هدف
• دسترسی سریع و آسان‌تر به عناصر صفحه در جهت کنترل عملکرد آن‌ها
• افکت‌های ظاهری اضافه شده بیشتر نسبت به جاوااسکریپت مانند Fade
• امکان تغییر پویای محتوای صفحه بر اساس نظر برنامه‌نویس بدون نیاز به نوشتن تمام کدها در html
• امکان ایجاد تغییر در کدهای Html بر اساس یک رویداد یا زمان
• امکان تغییر css اعمال شده به عناصر صفحه بر اساس یک رویداد یا زمان

روش استفاده از jQuery در پروژه

1. در قدم اول باید کتابخانه jQuery که حاوی دستورات است، به برنامه شما اضافه شود.

 $(document).ready(function(){ // jQuery code, event handling callbacks here });

Selectorهای jQuery

• انتخاب با Type:                              مثال: ("p")$

• انتخاب با Id:                                مثال: ("box#")$

• انتخاب با Class:                        مثال: ("box.")$

برخی از تابع‌های jQuery

• تابع‌های Hide، Show و Toggle

 $(selector).hide(speed); $(selector).show(speed); 

 $("button").click(function(){ $("#box").hide(1000); });

 $("button").click(function(){ $("#box").show(1000); });

 $("button").click(function(){ $("#box").toggle(1000); });

• تابع Animate

 $("button").click(function(){ $(".box").animate({ left: '250px', opacity: '0.5', height: '150px', width: '150px' }); });

• تابع Slide

 $(selector).slideDown(speed); $(selector).slideUp(speed); $(selector).slideToggle(speed);

 $("#Title").click(function(){ $("#Content").slideDown(); });

 $("#Title").click(function(){ $("#Content").slideUp(); });

 $("#Title").click(function(){ $("#Content").slideToggle(); });

• تابع Fade

 $("button").click(function(){ $("#box").fadeIn(); });

                   

 $("button").click(function(){ $("#box").fadeOut(); });

 $("button").click(function(){ $("#box").fadeToggle(); });

 $("button").click(function(){ $("#box").fadeTo("slow", 0.15); });

روش استفاده از Pluginهای jQuery

      

 

• تکنولوژی‌های طراحی سایت را بیشتر بشناسیم
• Ajax چیست؟
• جاوااسکریپت چیست؟
• Css چیست؟
• آموزش ویدئویی Html
• آموزش ویدئویی Css