جی کوئری میتواند به رخداد های صفحه پاسخ دهد.
رخدادها چه هستند؟
با توجه به تفاوت کارهای کاربران در سایت ، سایت میتواند عکس العمل های متفاوت نشان دهد به این اتفاق رخداد می گویند.
یک رخداد دقیقا در لحظه انجام یک عملیات آغاز میشود.
مثال:
- جابجاکردن موس به بالای یک شیئ
- انتخاب یک دکمه رادیویی
- کلیک روی یک المان
واژه "fires/fired" اغلب برای یک رخداد بکار میرود. مثالا رخداد فشردن یک کلید fired شد، این اتفاق زمانی رخ میدهد که یک کلید فشرده میشود.
برخی از رخداد های پرکاربرد در جدول زیر لیست شده اند :
|
رخداد های موس
|
رخدادهای کیبرد
|
رخداد های فرم
|
رخداد های سند و پنجره
|
|
click
|
keypress
|
submit
|
load
|
|
dblclick
|
keydown
|
change
|
resize
|
|
mouseenter
|
keyup
|
focus
|
scroll
|
|
mouseleave
|
|
blur
|
unload
|
نحوه تعریف رخداد در جی کوئری
در جی کوئری، بیشتر رخداد ها دارای یک متد هستند.
برای انجام یک عملیات در هنگام کلیک شدن روی یک پاراگراف میتوانید از دستور زیر استفاده کنید.
$("p").click();
در گام بعد شما باید با یک عملیات را برای هنگام کلیک شدن تعریف کنید اینکار به این صورت انجام میشود:
$("p").click(function(){
// action goes here!!
});
متداهای رخداد معمول در جی کوئری
$(document).ready()
متد $(document).ready() به ما اجازه میدهد که یک عملیات را در هنگامی که یک سند کامل بارگذاری شد اجرا کنیم. این رخداد قبلا توضیح داده شده است .
متد click() :
به مثال زیر نگاه کنید در مثال زیر متد click() در هنگامیکه کاربر روی تگ <p> کلیک کرد. این تگ مخفی خواهد شد.
$("p").click(function(){
$(this).hide();
});
مشاهده نتیجه
متد dblclick():
متد dblclick() همانطور که از نامش مشخص است هنگامی رخ میدهد که روی یک تگ دبل کلیک شود:
$("p").dblclick(function(){
$(this).hide();
});
مشاهده نتیجه
متد mouseenter() :
با ورود نشانگر موس برروی تگ متد اجرا میشود:
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
مشاهده نتیجه
متد mouseleave() :
این متد در صورت خارج شدن نشانگر موس از محدوده تگ به اجرا در میآید:
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
مشاهده نتیجه
متد mousedown() :
این متد با فشردن هر کدام از کلید های چپ ، راست ، وسط موس روی تگ به اجرا گذاشته میشود:
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
مشاهده نتیجه
متد mouseup() :
این متد در صورتیکه هرکدام از کلید های موس روی تگ رها شد به اجرا در می آید:
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
مشاهده نتیجه
متد hover() :
این متد دو عملگر برای ورد و خروج موس از روی تگ دارد:
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
مشاهده نتیجه
متد focus() :
این متد روی فیلد های فرم عمل می کند و زمانیکه روی یک فیلد کلیک شود اجرا میشود:
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
مشاهده نتیجه
متد blur() :
این متد در صورتی یک فیلد فرم از فوکوس خارج شود به اجرا در می آید:
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
مشاهده نتیجه
متد on() :
این متد یک یا چند متد را به یک تگ نسبت میدهد .
در مثال زیر ما در تگ <p> یک رخداد کلیک اضافه کرده و برای این رخداد عملیاتی را تعریف نموده ایم:
$("p").on("click", function(){
$(this).hide();
});
مشاهده نتیجه
در مثال زیر ما چندین متد را به یک تگ نسبت داده ایم :
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
مشاهده نتیجه
براي بهره مندي از مشاوره تخصصي در زمینه طراحی سایت با شرکت سارگون تماس بگيريد