امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
جی کوئری چیست ؟
#1
جی‌کوئری محبوب‌ترین کتابخانه جاوااسکریپت است و هدف اصلی آن ساده‌سازی اسکریپت‌های جاوااسکریپت Client Side در Html است. این کتابخانه همانند جاوااسکریپت در کنترل رویدادها، انیمیشن‌‌سازی تصویرهای صفحه وب، Ajax و غیره استفاده می‌شود اما به‌گونه‌ای طراحی شده است که به‌کارگیری جاوااسکریپت را بسیار ساده‌‌تر می‌کند.



جی کوئری چیست

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

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

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

الف) پس از دانلود فایل کتابخانه از سایت include، دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
آن به صورت زیر انجام می‌شود:
?
1
<script src="js/jquery.js"></script>



ب) هم‌چنین می‌توان جی‌کوئری را مستقیما از CDN ها include کرد، مانند:

?
1
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>

یا:


2- کدهای نوشته شده برنامه‌نویس در فایلی با پسوند js قرار خواهد گرفت که باید در پروژه include شود.


تمامی دستورات جی‌کوئری فایل script.js در تابع ready نوشته می‌شوند:
?
1
2
3
$(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 کنید.

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


با فرض وجود div با idای به نام box و یک button برای انجام عملیات، کد jQuery به صورت زیر خواهد بود:
?
1
2
3
$("button").click(function(){
$("#box").hide(1000);
});
و برای آشکارسازی مجدد:
?
1
2
3
$("button").click(function(){
$("#box").show(1000);
});
تابع Toggle عناصر hide شده را show و عناصر show شده را hide می‌کند:
?
1
2
3
$("button").click(function(){
$("#box").toggle(1000);
});
تابع Animate
تابع animate امکان پیاده‌سازی انیمیشن برای خصوصیت‌های css دلخواه را فراهم کرده است:
$(selector).animate({params},speed);

در دستور کلی بالا، params مشخص‌کننده پارامترهای دلخواه css و speed مربوط به سرعت انیمیشن می‌باشد که می‌توان مقادیر slow، fast و یا زمانی بر اساس میلی ثانیه را به آن اختصاص داد.
?
1
2
3
4
5
6
7
8
$("button").click(function(){
$(".box").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
تابع Slide
این تابع می‌تواند Slide عناصر را در سه حالت اعمال کند. هم‌چنین مانند نمونه‌های قبل، speed مربوط به سرعت می‌باشد که می‌توان مقادیر slow، fast و یا زمانی بر اساس میلی ثانیه را به آن اختصاص داد.
?
1
2
3
$(selector).slideDown(speed);
$(selector).slideUp(speed);
$(selector).slideToggle(speed);
به مثال زیر توجه کنید که در آن با کلیک روی box ،Title مربوط به content باز می‌شود:
?
1
2
3
$("#Title").click(function(){
$("#Content").slideDown();
});



بدیهی است که بستن content با slideUp انجام می‌شود:
?
1
2
3
$("#Title").click(function(){
$("#Content").slideUp();
});
تابع Toggle عناصر slideUp شده را slideDown و عناصر slideDown شده را slideUp می‌کند:
?
1
2
3
$("#Title").click(function(){
$("#Content").slideToggle();
});
تابع Fade
تابع Fade برای آشکارسازی یا محو عناصر با تغییر opacity استفاده می‌شود. عکس زیر نشان‌دهنده چند مرحله از fadeIn یک box است:
?
1
2
3
$("button").click(function(){
$("#box").fadeIn();
});



هم‌چنین محو عنصر با fadeOut
?
1
2
3
$("button").click(function(){
$("#box").fadeOut();
});
و switch بین دو حالت با fadeToggle انجام می‌شود:
?
1
2
3
$("button").click(function(){
$("#box").fadeToggle();
});
برای تغییر عنصر به یک حالت خاص می‌توان از fadeTo استفاده کرد. عدد نوشته شده بعد از سرعت، نشان‌دهنده میزان opacity دلخواه است که عددی مابین 0 تا 1 می‌باشد.
?
1
2
3
$("button").click(function(){
$("#box").fadeTo("slow", 0.15);
});
روش استفاده از Pluginهای jQuery

1- ابتدا فایل plugin مورد نظر را دانلود کنید. به عنوان نمونه برای دانلود پلاگین 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 تغییر دهید.




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


موضوعات مرتبط با این موضوع...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  تغییر کوچک در کد جی کوئری hami73 0 414 2017/04/15، 01:09 PM
آخرین ارسال: hami73
  اجرا نشدن کد جی کوئری انسیه 0 389 2017/03/02، 11:12 AM
آخرین ارسال: انسیه
  رفع تداخل جی کوئری مهرناز22 3 4,617 2015/06/14، 07:32 PM
آخرین ارسال: developer1
  افکت متن با جی کوئری iranthes 2 3,476 2015/06/14، 07:31 PM
آخرین ارسال: developer1
  لیست استان ها و شهرهای ایران با پلاگین جی کوئری IranAddressJs hossein361224 1 4,359 2015/04/11، 06:10 AM
آخرین ارسال: developer1

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان