jQuery یکی از بهترین کتابخانه های جاوااسکریپت است که در صفحات وب بسیار استفاده می شود . در بخش آموزش jQuery مباحث آموزشی زیادی را در اختیار شما قرار دادیم.
همچنین در کتاب آموزش جی کویری از صفر نحوه کار با jQuery آموزش داده شده است.
در این مقاله قصد داریم به شما چندین کد کاربردی jquery که در بیشتر وب سایت ها استفاده میشه رو به همراه مثال کامل در اختیار شما قرار بدیم.
۱- دکمه(button) بازگشت به بالا:
|
1 2 3 4 |
$('a.top').click(function(){ $(document.body).animate({scrollTop : 0},800); return false; }); |
با اجرای این کد jquery میتونید دکمه ای رو در ساییتون قرار بدید تا وقتی کاربر به پایین صفحه رفت با فشردن اون بتونه خیلی سریع به بالای سایت برگرده . مثال کامل:
|
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 |
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $('a.top').click(function(){ $(document.body).animate({scrollTop : 0},800); return false; }); </script> <style> .mydiv { border:2px solid black; background-color:yellow; width:50px; height:1000px; } .top { position:absolute; top:1025px; } </style> <body> <div class="mydiv"> go down <div> <a href="#" class="top"> go top </a> </body> </html> |
۲- استایل دهی لیست ها بصورت فرد
|
1 |
$('li:odd').css('background-color', 'red'); |
در مثال زیر پیش زمینه ی تمامی ردیف های فرد آبی می شود:
|
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(){ $("button").click(function(){ $('li:odd').css('background-color', 'red'); }); }); </script> </head> <body> <ol> <li>php</li> <li>c++</li> <li>c#</li> <li>java</li> <li>python</li> <li>pascal</li> </ol> <button>run</button> </body> </html> |
۳-غیر فعال کردن لینک بارگذاری شده:
|
1 2 |
$('a.no-link').click(function(e){ e.preventDefault(); |
در مثال زیر یک تگ a داریم که ما رو به سایتی هدایت میکنه و در کنارش یک تگ button داریم به اسم disable link که اگر کلیک بشه تگ a رو غیر فعال میکنه:
|
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 |
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $('a.disable-link').click(function(e){ e.preventDefault(); }); }); }); </script> </head> <body> <a href="https://netparadis.com" class="disable-link"> www.netparadis.com </a> <br> <button> disable link </button> </body> </html> |
۴-غیر فعال کردن فیلد های input :
|
1 |
$('input[type="submit"]').attr("disabled", true); |
در این مثال هم با فشردن کلیک disable input field تگ input غیر فعال می شود:
|
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 |
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $('input[type="submit"]').attr("disabled", true); }); }); </script> </head> <body> <input type="submit" value="....."> <button> disable input field </button> </body> </html> |
امیدوارم از بخش اول آموزش کد کاربردی jquery نهایت استفاده را برده باشید. در قسمت بعدی بقیه ۱۰ کد کاربردی jQuery را در اختیار شما قرار میدیم.
برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق و پیروز باشید
