[academyitمشارکت کننده]

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

جی کوئری چیست

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

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

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

الف) پس از دانلود فایل کتابخانه از سایت include، http://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 در جدول زیر ذکر شده‌اند:

برخی از تابع‌های 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 و یا زمانی بر اساس میلی ثانیه را به آن اختصاص داد.
ادامه مطلب

[نویسنده]

نوشته ها