info@academyit.net 02144284207
  1. صفحه نخست
  2. مقالات
  3. جی کوئری چیست؟

جی کوئری چیست

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

 

جی کوئری چیست ؟

 

تعداد کدهای مورد نیاز انجام یک فرآیند به وسیله جی‌کوئری در مقایسه با جاوااسکریپت بسیار کمتر خواهد بود و تنها با فراخوانی یک تابع، می‌توان عملکردی مشابه را پیاده‌سازی کرد. لازم به ذکر است که جی‌کوئری جایگزینی برای جاوااسکریپت نیست و کد نوشته شده به وسیله آن در اصل هنوز هم جاوااسکریپت است!
 

مزیت‌های jQuery

 

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

 

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

 

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

الف) پس از دانلود فایل کتابخانه از سایت include ، www.jquery.com آن به صورت زیر انجام می‌شود:
 
 
ب) هم‌چنین می‌توان جی‌کوئری را مستقیما از CDN ها include کرد، مانند:
 
یا:
 
 
2. کدهای نوشته شده برنامه‌نویس در فایلی با پسوند js قرار خواهد گرفت که باید در پروژه include شود.
 
تمامی دستورات جی‌کوئری فایل script.js در تابع ready نوشته می‌شوند:
 
 $(document).ready(function(){ // jQuery code, event handling callbacks here });

 

 jQuery چیست؟
 

Selectorهای jQuery

 

در jQuery امکان انتخاب عناصر ("selector")$ به وسیله سه حالت کلی Id ، Type و class وجود دارد.
  • انتخاب با Type:                              مثال: ("p")$
به عنوان نمونه ("p")$ تمام تگ‌های p را انتخاب می‌کند.
  • انتخاب با Id:                                مثال: ("box#")$
یادآوری این نکته ضروری است که id باید در صفحه یکتا باشد. علامت # نشان‌دهنده selector بر اساس Id است.
  • انتخاب با Class:                        مثال: ("box.")$
علامت (.) نشان‌دهنده selector بر اساس class است.

برخی دیگر از selectorهای کلی و تودرتوی jQuery در جدول زیر ذکر شده‌اند:
 
جی کوئری
 

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

 

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

به وسیله این دو تابع می‌توانید عناصر Html را در طول مدت زمان دلخواه برحسب میلی ثانیه، hide و show کنید.
 $(selector).hide(speed); $(selector).show(speed); 

 

با فرض وجود div با idای به نام box و یک button برای انجام عملیات، کد jQuery به صورت زیر خواهد بود:
 $("button").click(function(){ $("#box").hide(1000); });

 

و برای آشکارسازی مجدد:
 $("button").click(function(){ $("#box").show(1000); });

 

تابع Toggle عناصر hide شده را show و عناصر show شده را hide می‌کند:
 $("button").click(function(){ $("#box").toggle(1000); });

 

  • تابع Animate
تابع animate امکان پیاده‌سازی انیمیشن برای خصوصیت‌های css دلخواه را فراهم کرده است:
$(selector).animate({params},speed);
 
در دستور کلی بالا، params مشخص‌کننده پارامترهای دلخواه  css و speed مربوط به سرعت انیمیشن می‌باشد که می‌توان مقادیر slow، fast و یا زمانی بر اساس میلی ثانیه را به آن اختصاص داد.
 $("button").click(function(){ $(".box").animate({ left: '250px', opacity: '0.5', height: '150px', width: '150px' }); });

 

  • تابع Slide
این تابع می‌تواند Slide عناصر را در سه حالت اعمال کند. هم‌چنین مانند نمونه‌های قبل، speed مربوط به سرعت می‌باشد که می‌توان مقادیر slow، fast و یا زمانی بر اساس میلی ثانیه را به آن اختصاص داد.
 $(selector).slideDown(speed); $(selector).slideUp(speed); $(selector).slideToggle(speed);

 

به مثال زیر توجه کنید که در آن با کلیک روی box ،Title مربوط به content باز می‌شود:
 $("#Title").click(function(){ $("#Content").slideDown(); });

 

جی کوئری چیست؟
جی کوئری چیست؟
جی کوئری چیست؟
 
بدیهی است که بستن content با slideUp انجام می‌شود:
 $("#Title").click(function(){ $("#Content").slideUp(); });

 

تابع Toggle عناصر slideUp شده را slideDown و عناصر slideDown شده را slideUp می‌کند:
 
 $("#Title").click(function(){ $("#Content").slideToggle(); });

 

  • تابع Fade
تابع Fade برای آشکارسازی یا محو عناصر با تغییر opacity استفاده می‌شود. عکس زیر نشان‌دهنده چند مرحله از fadeIn یک box است:
 $("button").click(function(){ $("#box").fadeIn(); });

 


جی کوئری چیست؟   جی کوئری چیست؟   جی کوئری چیست؟   جی کوئری چیست؟   جی کوئری چیست؟   جی کوئری چیست؟   جی کوئری چیست؟ 

هم‌چنین محو عنصر با fadeOut
 $("button").click(function(){ $("#box").fadeOut(); });

 

و switch بین دو حالت با fadeToggle انجام می‌شود:
 $("button").click(function(){ $("#box").fadeToggle(); });

 

برای تغییر عنصر به یک حالت خاص می‌توان از fadeTo استفاده کرد. عدد نوشته شده بعد از سرعت، نشان‌دهنده میزان opacity دلخواه است که عددی مابین 0 تا 1 می‌باشد.
 $("button").click(function(){ $("#box").fadeTo("slow", 0.15); });

 

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


1. ابتدا فایل plugin مورد نظر را دانلود کنید. به عنوان نمونه برای دانلود پلاگین Facebox می‌توانید از لینک http://defunkt.io/facebox استفاده کنید.
2. پیشنهاد می‌شود به پروژه خود فولدری به نام plugin اضافه کنید و فولدر اصلی plugin‌های دانلود شده را در آن قرار دهید.

جیکوئری چیست؟

3. در فولدر اصلی تمام پلاگین‌ها فولدری به نام Example یا Sample وجود دارد. فایل index.html موجود در این فولدر حاوی کدهای مورد نیاز شما است.
 
جی کوئری چیست
4. نام فایل را به اسم پلاگین تغییر دهید.
 
 
جی کوئری ؟   جی کوئری چیست؟   جی کوئری plugin
 
 
5. فایل facebox.html را drag و در فولدر root پروژه paste کنید. برای تغییر آدرس linkها و scriptهای موجود در فایل، می‌توانید از امکانات خود Dreamweaver استفاده کنید. در هنگام paste کردن فایل پیغامی مبنی بر update یا عدم update آدرس‌ها نسبت به محل جدید فایل باز می‌شود. بر روی update کلیک کنید تا آدرس‌ها به صورت اتوماتیک تغییر کنند.

 
جی کوئری facebox
 
6. به منظور اطمینان از تغییر صحیح تمام آدرس‌ها، یک بار فایل facebox.html را اجرا کنید. Demo مربوطه در قسمت Image قرار داد؛ روی لینک آن کلیک کنید. اگر پلاگین برای demo عملکرد مورد انتظار را داشت، آدرس‌ها به درستی تغییر کرده‌اند.
 
جی کوئری چیس؟
جی کوئری چیست؟
jQuery
 
 
7. لینک‌ها و Scriptهای موجود head و آخر body را از facebox.html کپی کنید.

 
جی کوئری Scriptهای


جی کوئری چیست؟ Scriptهای

و آن‌ها را درindex.html پروژه خود (فایل مقصدی که می‌خواهید از پلاگین در آن استفاده کنید.) paste کنید.

 
jQuery؟
 
 
8- با توجه به توضیحات Demo تگ‌های مورد نیاز را در index.html نوشته و class یا rel  مناسب را به آن اختصاص دهید.
 

جی کوئری چیست؟

 به عنوان نمونه همان‌طور که می‌بینید، برای استفاده از این پلاگین باید به تگ a مورد نظر، rel=facebox داده شود.
 
پلاگین jQuery
 
با توجه به کد بالا با کلیک روی لینک آکادمی آی تی ، عکس آکادمی آی تی باز خواهد شد.

جی کوئری چیست؟

 


نکته: همان‌طور که مشاهده می‌کنید icon مربوط به علامت ضربدر بسته شدن عکس، لود نشده است. گاهی اوقات برخی از scriptهای internal شامل عکس هستند و آدرس این عکس‌ها update نمی‌شود. برای لود صحیح عکس‌ها باید آدرس را به صورت manual تغییر دهید.

جی کوئری چیست؟

جی کوئری چیست؟
خروجی بعد از تغییر آدرس عکس‌ها به صورت زیر اصلاح خواهد شد:
 
جی کوئری چیست؟
 

 

مطلب‌های مرتبط
 
 

 

امیدوارم مواردی که توی این مقاله مورد بررسی قرار دادیم تونسته باشه به شما دوست عزیزم کمک کنه که در طراحی وب سایت یک قدم جلوتر برید و کارهایی بهتر و حرفه ای تری رو انجام بدید و اما اگر شما دوست عزیز مشتاق یادگیری طراحی سایت هستید و در این رابطه نیاز به آموزش دارید میتونید با مطالبی که در صفحه آموزش طراحی سایت نوشتیم مسیر درستی رو انتخاب کنید، با استفاده از آموزش طراحی سایت حرفه ایآکادمی آی تی میتونید به صورت ویدئویی و کاملا کاربردی از صفر آموزش رو آغاز کنید.

 

ارسال نظر

= 3 + 7

هنوز نظری برای این مقاله ثبت نشده است ...