آموزش jQuery Callback Functions

هدایت عباسی آموزش جی کوئری

آمورش ویدئویی callback در جی کوئری

دانلود فیلم و آموزش ویدئویی callback در جی کوئری. در این فیلم با کالبک (callback) آشنا می شوید و نحوه کار با آن را فرا می گیرید.

چنانچه مشکلی در اجرای فیلم دارید از مرورگر فایرفاکس استفاده نمایید یا روی لینک زیر کلیک نمایید.

مشاهده یا دانلود فیلم بالا

در این بخش از آموزش جی کوئری (Jquery tutorial) از تاپ سایت 98 قصد داریم به مبحث آموزش callback در جی کوئری ( jQuery Callback Functions) بپردازیم. در انتهای ؟آموزش متوجه می شوید که Callback چیست و چه کاری را انجام می دهد؟

توجه : کدها همه تست شده می باشد و کاملا صحیح است. چون از cdn استفاده شده باید به اینترنت متصل باشید. در غیر این صورت کد اجرا نخواهد شد.

Callback چیست؟

در این بخش توضیح خواهیم داد که Callback چیست؟ و چه کاربردی دارد.

Callback تابعی است که پس از انجام و پایان کار اجرا می شود.

سینتکس callback

در این قسمت با سینتکس callback آشنا می شوید. ابتدا $ سپس selector و دستور اجرا می شود.

پس از دستور hide و در پرانتز سرعت اجرا و callback اجرا می شود.

$(selector).hide(speed,callback);

آموزش callback در جی کوئری

در این بخش به آموزش callback در جی کوئری می پردازیم.

در مثال زیر ابتدا جی کوئری را با cdn جی کوئری در src فراخوانی کردیم. سپس با کلیک روی دکمه تگ h1 مخفی می شود ولی بعد از کلمه slow می بینید که تابعی فراخوانی شده که همان callback است و بعد از مخفی شدن و اجرای hide تابع اجرا می شود و پیغام alert اجرا می شود.

<!DOCTYPE html>
<html>
<body>
<h1><b>topsite98.com</b></h1>
<button>Click me</button>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1").hide("slow", function(){
alert("TopSite98.com");
});
});
});
</script>
</body>
</html>

خطای callback

چون از cdn استفاده شده باید به اینترنت متصل باشید. در غیر این صورت کد اجرا نخواهد شد.

در صورتی که کد بالا اجرا نمی شود می توانید بجای cdn از فایل جی کوئری استفاده نمایید.

بایستی فایل جی کوئری را دانلود کرده باشید.

آموزش دانلود جی کوئری

مثال callback در جی کوئری

حال مثال دیگر callback در جی کوئری را توضیح می دهیم.

در مثال زیر ابتدا h1 را مخفی کرده ایم. برای مخفی کردن آن از style و دستور display در css (سی اس اس) استفاده کرده ایم. وقتی مقدار display را none بگذارید عنصر مخفی می شود.

حال با دستور show در جی کوئری آن را در مدت 3 دقیقه نمایان می کنیم و سپس callback و تابع اجرا می شود.

با اجرای callback یک کد css اجرا شده ، رنگ پس زمینه زردرنگ می شود و فونت متن نیز به 100 پیکسل تغییر می کند.

<!DOCTYPE html>
<html>
<body>
<h1 style="display: none;">topsite98.com</h1>
<button>Click me</button>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1").show(3000, function(){
$("h1").css({"background-color": "yellow", "font-size": "100px"});
});
});
});
</script>
</body>
</html>

امیدواریم این آموزش برای شما مفید باشد. کدهای بالا تست شده می باشند.

موفق باشید.

اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید