jQuery یکی از بهترین کتابخانه های جاوااسکریپت است که در صفحات وب بسیار استفاده می شود . در بخش آموزش jQuery مباحث آموزشی زیادی را در اختیار شما قرار دادیم.
همچنین در کتاب آموزش جی کویری از صفر نحوه کار با jQuery آموزش داده شده است.
در این مقاله قصد داریم به شما ادامه کد کاربردی jquery که در بیشتر وب سایت ها استفاده میشه رو به همراه مثال کامل در اختیار شما قرار بدیم.
۵- اضافه و حذف کردن یک کلاس css با حرکت ماوس
|
1 2 3 4 5 6 |
$('.btn').hover(function(){ $(this).addClass('hover'); }, function(){ $(this).removeClass('hover'); } ); |
اجرای این کد روی هر تگ دلخواه باعث میشه وقتی نشانگر ماوس روی اون تگ قرار بگیره کلاس css موردنظری که از قبل تعریفش کردین روی این تگ اعمال بشه و وقتی نشانگر ماوس تگ رو ترک میکنه اون کلاس دیگه اعمال نشه .
مثلا در مثال زیر یک تگ p داریم که با اومدن نشانگر ماوس روی تگ کلاس hover روی اون اعمال میشه که باعث میشه رنگ متن قرمز بشه و اندازه فونت به ۲۰ px برسه و وقتی هم که نشانگر ماوس تگ P رو ترک کنه همه اینها غیر فعال بشن:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script> <script> $(document).ready(function(){ $('p').hover(function(){ $(this).addClass('hover'); }, function(){ $(this).removeClass('hover'); }); }); </script> <style> .hover{ color : red; font-size:20px; } </style> </head> <body> <p>Hover the mouse pointer over this paragraph.</p> </body> </html> |
۶- تگ های div هم ارتفاع
|
1 |
$('.div').css('height', $('.main-div').height()); |
با این قطعه کد میتونیم دو تگ div هم ارتفاع بسازیم بدون این که نگران محتویات درون اونها باشیم مثلا در مثال زیر یک تگ div داریم با کلاس mydiv و یک تگ div دیگه داریم با کلاس maindiv که ارتفاعش ۴۰۰ هست(height:۴۰۰px) و میخوایم تگ mydiv هم به این ارتفاع برسه :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script> <script> $(document).ready(function(){ $('.mydiv').css('height', $('.maindiv').height()); }); </script> <style> .maindiv { position:absolute; height:400px; width:100px; top:10px; left:10px; border:2px solid black; } .mydiv { position:absolute; width:100px; top:10px; left:150px; border:2px solid black; } </style> </head> <body> <div class="mydiv"> netparadis.com netparadis.com netparadis.com netparadis.com netparadis.com netparadis.com netparadis.com netparadis.com netparadis.com </div> <div class="maindiv"> netparadis.com netparadis.com netparadis.com netparadis.com </div> </body> </html> |
۷-بررسی اینکه آیا یک عکس بارگذاری شده یا نه
|
1 2 3 |
$('img').load(function() { console.log('image load successful'); }); |
با این قطعه کد موقعی که عکسی رو در سایت بارگذاری(Load) کردید میتونید مطلع شوید که این کار به درستی انجام شده یا نه به صورت زیر:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script> <script> $(document).ready(function(){ $('img').load(function() { window.alert('image load successful'); }); }); </script> </head> <body> <div> <img src="مسیر دایرکتوری ای که عکس در اون قرار داره"> </div> </body> </html> |
۸- جایگزین کردن عکس های خرابی که در سایت بارگذاری شده اند
|
1 2 3 |
$('img').error(function(){ $(this).attr('src', 'img/broken.png'); }); |
با این قطعه کد میشه اگر عکس خرابی در سایت بارگذاری شده به طور اتوماتیک با یک عکس سالم جایگزین بشه.
۹- ساخت منو آکاردیون (Accordian) :
|
1 2 3 4 5 6 7 8 |
$('#accordion').find('.content').hide(); // Accordion $('#accordion').find('.accordion-header').click(function(){ var next = $(this).next(); next.slideToggle('fast’); $('.content').not(next).slideUp('fast'); return false; }); |
آموزش کامل نحوه ساخت آکاردیون در jQuery را اینجا میتونید ببنید.
۱۰- محو کردن و ظاهر کردن یک تگ
|
1 2 3 4 5 6 7 8 |
// Fade $( '.btn' ).click(function() { $( '.element').fadeToggle('slow'); }); // Toggle $( '.btn' ).click(function() { $( '.element' ).slideToggle('slow'); }); |
با این قطعه کد همونطور که در مثال زیر میبینید دو کلیک داریم به نام های fade و slide که با اولی تگ مورد نظر ما (در اینجا تگ div) مخفی میشه و با دومی از حالت مخفی در میاد و ظاهر میشه.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script> <script> $(document).ready(function(){ // Fade $( '.fade' ).click(function() { $( '.mydiv' ).fadeToggle('slow'); }); // Toggle $( '.slide' ).click(function() { $( '.mydiv' ).slideToggle('slow'); }); }); </script> </head> <body> <button class="fade"> fade </button> <button class="slide"> slide </button> <div class="mydiv"> netparadis.com netparadis.com netparadis.com netparadis.com netparadis.com </div> </body> </html> |
همینطور میشه فقط از یک تگ button استفاده کرد که تگ div رو محو میکنه و بلافاصله اونو ظاهر میکنه در کل بستگی داره به این که میخواین چه استفاده ای ازش بکنید.
امیدوارم از بخش اول آموزش کد کاربردی jquery نهایت استفاده را برده باشید. برای دیدن قسمت اول ۱۰ کد کاربردی jquery کلیک کنید
برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق و پیروز باشید
