Info@Afragraphic.ir
0912 22 460 22
خدمات و مطالب آموزشی

آموزش jQuery -- رویدادهای جی کوئری(jQuery Event Methods)

رویدادهای جی کوئری(jQuery Event Methods)                                        قسمت پنجم

نکته : به طور کلی جی کوئری برای پاسخ به رویدادهایی که در صفحه html اتفاق می افتد به صورت سفارشی ساخته شده است

رویدادها چه هستند؟ 

به طور خلاصه رویداد را می توان اینگونه تعریف کرد :

پاسخ یک صفحه وب به اقداماتی که کاربران درون صفحه انجام می دهند

یک رویداد نشان دهنده لحظه دقیق زمانی است که چیزی اتفاق می افتد.

به طور مثال :

  • حرکت موس بر روی یک عنصر
  • انتخاب یک دکمه رادیویی
  • کلیک کردن بر روی یک عنصر

 

برخی از رویدادهای مهم DOM :

رویدادهایDocument/Window

رویدادهای Form

رویدادهای Mouse

رویداد های Mouse

load

submit

keypress

click

resize

change

keydown

dblclick

scroll

focus

keyup

mouseenter

unload

blur

 

mouseleave

دستورات جی کوئری برای نوشتن رویداد ها (Event Methods) :

برای اختصاص یک رویداد کلیک به تمام پاراگراف های یک صفحه وب به صورت زیر عمل میکنیم :

$("p").click();

گام بعدی این است که شما باید تعریف کنید که به ازای رویداد کلیک چه اتفاقی می افتد

شما باید یک تابع به رویداد بفرستین یا Pass دهید

$("p").click(function(){
  
// action goes here!!
}
);

برخی رویدادهای جی کوئری :

1.        رویداد ()document).ready)$ :

این رویداد اجازه اجرای یک تابع را زمانی که صفحه کامل لود شد به ما می دهد

این رویداد در حال حاضر در مطلب jQuery Syntax توضیح داده شده است

2.      رویداد ()click :

این تابع زمانی اجرا می شود که کاربر بر روی یکی از عناصر html کلیک کرده باشد

مثال :

مثال زیر می گوید که زمانی که بر روی تگ <p> کلیک شد رویداد ()hide اجرا شود

$("p").click(function(){
    $(this).hide();
});

3.      رویداد ()dblclick :

زمانی که کاربر بر روی عنصر دو بار کلیک می کند تابع اجرا می شود

مثال :

$("p").dblclick(function(){
    $(this).hide();
});

4.      رویداد ()mouseenter :

این تابع زمانی اجرا می شود که کاربر اشاره گر موس را روی عنصر مورد نظر فشار میدهد یا inter  می کند

مثال :

$("#p1").mouseenter(function(){
    alert("You entered p1!");
});

5.      رویداد ()mouseleave :

این تابع زمانی اجرا می شود که اشاره گر موس پس از کلیک از روی عنصر مورد نظر کنار می رود

مثال :

$("#p1").mouseleave(function(){
    alert("Bye! You now leave p1!");
});

6.      رویداد ()mousedown :

این تابع زمانی اجرا می شود که کلیک راست  یا کلیک چپ کرده باشد در حالی که اشاره گر موس هنوز روی عنصر مورد نظر است

مثال :

$("#p1").mousedown(function(){
    alert("Mouse down over p1!");
});

7.      رویداد ()mouseup :

این تابع زمانی اجرا میشود که پس از کلیک بر روی عنصر دستتان را از روی موس بردارید(یا زمانی که inter یا فشار موس برای  کلیک تمام می شود )

مثال :

$("#p1").mouseup(function(){
    alert("Mouse up over p1!");
});

8.      رویداد ()hover :

زمانی که اشاره گر روی عنصر مورد نظر قرار می گیرد این تابع اجرا می شود وزمانی که از روی آن کنار می رود اجرای تابع متوقف می شود

مثال :

$("#p1").hover(function(){
    alert("You entered p1!");
});

9.      رویداد ()focus :

این تابع زمانی اجرا می شود که با استفاده از کلید Tab صفحه کلید بر روی عنصری متمرکز می شویم  یا focuse می کنیم

مثال :

$("input").focus(function(){
    $(this).css("background-color", "#cccccc");
});

10.  متد ()on :

با استفداه از این رویداد می توانیم چندین رویداد با هم بنویسیم

مثال :

$("p").on({
    mouseenter: function(){
        $(this).css("background-color", "lightgray");
    }, 
    mouseleave: function(){
        $(this).css("background-color", "lightblue");
    }, 
    click: function(){
        $(this).css("background-color", "yellow");
    } 
});

 

پایان قسمت پنجم

منبع : http://www.w3schools.com

 

نظــرات شما

نام :
وب سایت :
ایمیل :
پیغام :  

تمامی حقوق مادی و معنوی این سایت متعلق به شرکت طراحی و چاپ افراگرافیک  می باشد.