میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

رویدادها در جی کوئری

۲۱ / ۱۰۰

سلام به شما همراهان و دوستان محترم سایت آموزشی و فروشگاهی مدرسه کدنویسی به دوره ی آموزش jQuery (جی کوئری) خوش آمدید. در این دوره قصد داریم شما را با رویدادها در جی کوئری jQuery آشنا کرده نحوه استفاده از آن را به شما آموزش دهیم پس با من همراه باشید.


رویدادها (Events) چه هستند؟

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

برای مثال رفتن موس روی یک عنصر html یک event است. کلیک روی یک دکمه از کیبورد هم یک رویداد است.

برخی از رویدادهای رایج در  DOM را در زیر مشاهده می کنید:

 

موسکیبورد   فرم هاسند وب
clickkeypresssubmitload
dblclickkeydownchangeresize
mouseenterkeyupfocusscroll
mouseleaveblurunload

ساختار جی کوئری برای متدهای رویدادها

در جی کوئری بیشتر رویدادهای مربوط به DOM یک متد دارند تا با آن متدمی توان به آن رویداد اشاره کرد. برای مثال برای اختصاص رویداد کلیک کردن به همه پاراگراف های صفحه شما می توانید از کد زیر استفاده کنید:

 

$("p").click();

 

در قدم بعدی باید تعریف کنید که وقتی رویداد کلیک کردن اتفاق افتاد چه چیزی رخ دهد؟ در اصطلاح شما باید یک Function به رویداد خود پاس بدهید. برای این کار در پرانتر متد رویداد یک Function  به شکل زیر تعریف می کنیم:

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

رایج ترین متدهای جی کوئری برای رویدادها

 

$(document).ready()

این متد به ما اجازه می دهد که یک تابع را وقتی که سند به طور کامل بارگذاری شد اجرا کنیم. قبلا در قسمت ساختار کلی جی کوئری گفتیم که ما تمامی کدهای جی کوئری خود را درون این متد می نویسیم.

 

click()

متد کلیک به ما اجازه می دهد تا برای کلیک کردن روی یک عنصر HTML  یک تابع تعریف کنیم. برای مثال در کد زیر با استفاده از این متد و تعریف یک Function دستور می دهیم تا با کلیک بر روی هر پاراگراف آن پاراگراف مخفی شود.

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

کلید واژه this در مثال بالا به خود عنصر اشاره دارد در واقع ما می گوییم روی هر پاراگرافی که کلیک شد همان پاراگراف را مخفی کن. اگر به جای this از تگ p استفاده می کردیم با کلیک بر روی هر پاراگراف کل پاراگراف های صفحه مخفی می شد.

dblclick()

این متد مانند متد کلیک است با این تفاوت که هنگامی تابع درون آن اجرا می شود که روی عنصر دوبار کلیک شود.

مثال:

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

mouseenter()

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

برای مثال در کد زیر اگر موس وارد عنصری با آی دی p1  شود پیامی به کاربر نمایش داده می شود.

$("#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()

این متد ترکیبی از متد mousenter و  mousleave است و دو تابع به عنوان ورودی دریافت می کند. یکی هنگام ورود موس به عنصر اجرا می شود و دیگری هنگام خروج موس از آن عنصر اجرا می شود.

مثال:

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

 function(){ 
  alert("Bye! You now leave p1!");
 });

در مثال بالا با ورود موس به عنصر یک پیام و با خروج موس یک پیام دیگر نمایش داده می شود.

focus()

این متد برای بخش های مختلف فرم ها استفاده می شود. برای مثال اگر فرمی با سه ورودی داشته باشیم روی هر input فرم که به اصطلاح  فوکوس کنیم رویداد این متد فعال می شود.

برای مثال در کد زیر می گوییم هنگامی که روی هر input  فوکوس شد و انتخاب شد رنگ پس زمینه آن را عوض کن:

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

(در قسمت های بعدی بیشتر با نحوه تعریف دستورات CSS در جی کوئری آشنا می شویم)

blur()

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

در مثال زیر هنگامی که input بعد از فرکوس از فوکوس خارج می شود رنگ پس زمینه آن تغییر می کند.

$("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 نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با jQuery را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.

 

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟