آموزش jQuery قسمت چهارم- رویدادها در جی کوئری
با قسمت چهارم از آموزش جی کوئری در خدمت شما هستیم. در این آموزش قصد داریم در مورد رویدادها در jQuery صحبت کنیم.
رویداد چیست؟
تمام اتفاقاتی که در یک صفحه وب رخ می دهد و می توانیم به آن ها پاسخ دهیم رویداد (Event) محسوب می شوند مثل:
- حرکت ماوس روی یک عنصر
- انتخاب یک دکمه
- کلیک روی یک دکمه
تعدادی از رویدادهای عمومی DOM
Document/Window Events | Form Events | Keyboard Events | Mouse Events |
load | submit | keypress | click |
resize | change | keydown | dblclick |
scroll | focus | keyup | mouseenter |
unload | blur | mouseleave |
نحوه استفاده از رویدادها
$("p").click();
قطعه کد فوق رویداد کلیک را برای همه تگ های P موجود در صفحه اختصاص می دهد. حالا باید تابعی تعریف کنیم تا در صورت کلیک روی پاراگراف مورد نظر در صفحه، دستورات داخل تابع اجرا شوند.
$("p").click(function(){
// دستورات مورد نظر
});
رویدادهای رایج جی کوئری رویداد ()ready
$(document).ready()
با استفاده از این متد، دستورات تابع تنها بعد از بارگذاری کامل صفحه اجرا خواهند شد که این امر از تداخل و اجرای نادرست کدها جلوگیری می کند
رویداد ()click
وقتی کاربر روی یک عنصر HTML کلیک کند این تابع اجرا خواهد شد. مثال: مخفی شدن پاراگرافی که کاربر روی آن کلیک کرده
$("p").click(function(){
$(this).hide();
});
رویداد ()dblclick
زمانی که کاربر روی عنصری دوبار کلیک کند این رویداد فراخوانی می شود مثال: مخفی شدن پاراگرافی که کاربر روی آن دابل کلیک کرده
$("p").dblclick(function(){
$(this).hide();
});
رویداد ()mouseenter
این تابع زمانی که نشانگر ماوس بر روی یک عنصر قرار بگیرد اجرا می شود مثال:
$("#para").mouseenter(function() {
alert("You entered para!");
});
رویداد ()mouseleave
این تابع زمانی که نشانگر ماوس از روی عنصر مورد نظر برداشته شود اجرا خواهد شد مثال:
$("#para").mouseleave(function() {
alert("Bye! You now leave para!");
});
رویداد ()mousedown
این تابع زمانی که دکمه چپ، وسط و یا دکمه راست ماوس فشرده شود اجرا می شود مثال:
$("#para").mousedown(function() {
alert("Mouse down over para!");
});
رویداد ()mouseup
زمانی که دکمه چپ، وسط و یا راست ماوس رها شود این تابع اجرا خواهد شد مثال:
$("#para").mouseup(function() {
alert("Mouse up over para!");
});
رویداد ()hover
زمانی که نشانگر ماوس بر روی یک عنصر قرار گرفت تابع اول و هنگامی که نشانگر ماوس از روی آن عنصر برداشته شود تابع دوم اجرا خواهد شد مثال:
$("p").hover(function() {
alert("You entered paragraph");
}, function() {
alert("Bye! You now leave paragraph");
});
رویداد ()focus
زمانی که کاربر روی یک عنصر ورودی فرم (مثل Input) کلیک کرده باشد (علامت چشمک زن داخل کادر ورود باشد) این تابع اجرا خواهد شد مثال:
$("input").focus(function() {
$(this).css("background-color", "#CCCCCC");
});
رویداد ()blur
زمانی که یک فیلد ورودی از حالت focus خارج شود این تابع اجرا می شود مثال:
$("input").blur(function() {
$(this).css("background-color", "#ffffff");
});
متد ()on
با استفاده از این متد می توان چندین رویداد را به یک عنصر اختصاص داد مثال:
$("p").on({
mouseenter: function() {
$(this).css("background-color", "lightgray");
},
mouseleave: function() {
$(this).css("background-color", "lightblue");
},
click: function() {
$(this).css("background-color", "yellow");
}
});
خب آموزش امروزمون به پایان رسید امیدوارم که از این آموزش خوشتون اومده باشه
مشاهده قسمت های قبلی
قسمت اول: معرفی جی کوئری
قسمت دوم: شروع کار با جی کوئری
قسمت سوم: ساختار دستورات و انتخابگرها در jQuery