جیکوئری چیست ؟ جیکوئری محبوبترین کتابخانه جاوااسکریپت است و هدف اصلی آن سادهسازی اسکریپتهای جاوااسکریپت Client Side در Html است. این کتابخانه همانند جاوااسکریپت در کنترل رویدادها، انیمیشنسازی تصویرهای صفحه وب، Ajax و غیره استفاده میشود اما بهگونهای طراحی شده است که بهکارگیری جاوااسکریپت را بسیار سادهتر میکند.
تعداد کدهای مورد نیاز انجام یک فرآیند به وسیله جیکوئری در مقایسه با جاوااسکریپت بسیار کمتر خواهد بود و تنها با فراخوانی یک تابع، میتوان عملکردی مشابه را پیادهسازی کرد. لازم به ذکر است که جیکوئری جایگزینی برای جاوااسکریپت نیست و کد نوشته شده به وسیله آن در اصل هنوز هم جاوااسکریپت است!
- سادهسازی روش اعمال عملکردها نسبت به جاوااسکریپت به وسیله تعریف تابعهای کاربردی و در نتیجه کاهش چشمگیر کدهای مورد نیاز برای یک هدف
- دسترسی سریع و آسانتر به عناصر صفحه در جهت کنترل عملکرد آنها
- افکتهای ظاهری اضافه شده بیشتر نسبت به جاوااسکریپت مانند 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 });
Selectorهای jQuery
در jQuery امکان انتخاب عناصر ("selector")$ به وسیله سه حالت کلی Id ، Type و class وجود دارد.
- انتخاب با Type: مثال: ("p")$
به عنوان نمونه ("p")$ تمام تگهای p را انتخاب میکند.
- انتخاب با Id: مثال: ("box#")$
یادآوری این نکته ضروری است که id باید در صفحه یکتا باشد. علامت # نشاندهنده selector بر اساس Id است.
- انتخاب با Class: مثال: ("box.")$
علامت (.) نشاندهنده selector بر اساس class است.
برخی دیگر از selectorهای کلی و تودرتوی jQuery در جدول زیر ذکر شدهاند:
به وسیله این دو تابع میتوانید عناصر 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 امکان پیادهسازی انیمیشن برای خصوصیتهای 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 عناصر را در سه حالت اعمال کند. همچنین مانند نمونههای قبل، 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 برای آشکارسازی یا محو عناصر با تغییر 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); });
1. ابتدا فایل
plugin مورد نظر را دانلود کنید. به عنوان نمونه برای دانلود پلاگین
Facebox میتوانید از لینک
http://defunkt.io/facebox استفاده کنید.
2. پیشنهاد میشود به پروژه خود فولدری به نام plugin اضافه کنید و فولدر اصلی pluginهای دانلود شده را در آن قرار دهید.

3. در فولدر اصلی تمام پلاگینها فولدری به نام Example یا Sample وجود دارد. فایل index.html موجود در این فولدر حاوی کدهای مورد نیاز شما است.
4. نام فایل را به اسم پلاگین تغییر دهید.
5. فایل facebox.html را drag و در فولدر root پروژه paste کنید. برای تغییر آدرس linkها و scriptهای موجود در فایل، میتوانید از امکانات خود Dreamweaver استفاده کنید. در هنگام paste کردن فایل پیغامی مبنی بر update یا عدم update آدرسها نسبت به محل جدید فایل باز میشود. بر روی update کلیک کنید تا آدرسها به صورت اتوماتیک تغییر کنند.
6. به منظور اطمینان از تغییر صحیح تمام آدرسها، یک بار فایل facebox.html را اجرا کنید. Demo مربوطه در قسمت Image قرار داد؛ روی لینک آن کلیک کنید. اگر پلاگین برای demo عملکرد مورد انتظار را داشت، آدرسها به درستی تغییر کردهاند.
7. لینکها و Scriptهای موجود head و آخر body را از facebox.html کپی کنید.
و آنها را درindex.html پروژه خود (فایل مقصدی که میخواهید از پلاگین در آن استفاده کنید.) paste کنید.
8- با توجه به توضیحات Demo تگهای مورد نیاز را در index.html نوشته و class یا rel مناسب را به آن اختصاص دهید.
به عنوان نمونه همانطور که میبینید، برای استفاده از این پلاگین باید به تگ a مورد نظر، rel=facebox داده شود.
با توجه به کد بالا با کلیک روی لینک آکادمی آی تی ، عکس آکادمی آی تی باز خواهد شد.
نکته: همانطور که مشاهده میکنید icon مربوط به علامت ضربدر بسته شدن عکس، لود نشده است. گاهی اوقات برخی از scriptهای internal شامل عکس هستند و آدرس این عکسها update نمیشود. برای لود صحیح عکسها باید آدرس را به صورت manual تغییر دهید.
خروجی بعد از تغییر آدرس عکسها به صورت زیر اصلاح خواهد شد:
مطلبهای مرتبط
امیدوارم مواردی که توی این مقاله مورد بررسی قرار دادیم تونسته باشه به شما دوست عزیزم کمک کنه که در طراحی وب سایت یک قدم جلوتر برید و کارهایی بهتر و حرفه ای تری رو انجام بدید و اما اگر شما دوست عزیز مشتاق یادگیری طراحی سایت هستید و در این رابطه نیاز به آموزش دارید میتونید با مطالبی که در صفحه
آموزش طراحی سایت نوشتیم مسیر درستی رو انتخاب کنید، با استفاده از
آموزش طراحی سایت حرفه ایآکادمی آی تی میتونید به صورت ویدئویی و کاملا کاربردی از صفر آموزش رو آغاز کنید.