/ در آموزش جی کوئری, آموزش ها, اشتراک رایگان / توسط
آخرین زمان ویرایش:

آموزش جامع و کامل جی کوئری بخش هفتم

جهت مطالعه به ادامه مطلب مراجعه فرمائید

رویداد ها در جی کوئری (Events)

رویداد ( ) ready در jQuery

در این بخش از آموزش JQuery ، رویداد ready را در طراحی سایت شرح میدهیم.

رویداد ( ) ready در یک صفحه وب زمانی اتفاق می افتد که شی DOM به طور کامل لود شده و همچنین صفحه نیز به طور کامل لود شده باشد ( حتی تصاویر آن ) .

به دلیل اینکه رویداد ( ) ready پس از لود شدن کامل صفحه اتفاق می افتد ، مکان مناسبی برای قرار دادن کدها و توابع jQuery است .

شما می توانید رویدادها و توابعی که می خواهید به محض تمام شدن عملیات load صفحه ، اجرا شوند را در این تابع قرار دهید .

شکل کلی استفاده از این متد به شرح زیر است :

کد:

$ ( document ).ready ( function ) ;

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

کد:

$ ( function ) ;

document :این پارامتر تعیین کننده صفحه یا سندی است که می خواهیم تابع در آن اجرا شود . مقدار documnet به صفحه جاری اشاره دارد .

function :نام تابعی است که می خواهیم به محض لود شدن صفحه ، اجرا شود . مثال زیر کاربرد رویداد ( ) ready را نشان میدهد:

کد:

<script type=”text/javascript”> $(document).ready(function(){ $(“button”).click(function(){ $(“div”).animate({left:”100px”},”slow”); $(“div”).animate({fontSize:”3em”},”slow”); }); }); </script>

این رویداد زمانی اجرا می شود که صفحه وب ما بطور کامل بارگذاری شود.

رویداد ( ) click در jQuery

در این بخش از آموزش JQuery ، رویداد click را در طراحی سایت شرح میدهیم.

رویداد click زمانی اتفاق می افتد که کاربر بر روی عنصر مورد نظر کلیک نماید . با این رویداد برای مثال می توان کدی طراحی کرد که در هنگام کلیک کاربر بر روی یک عنصر رنگ پس زمینه آن عوض شده و یا عنصر مخفی شود .

شکل کلی استفاده از این متد به شرح زیر است :

کد:

$ ( ” selector ” ).click ( function ( ) { … some code … } ;

selector : selector کنترلی است که کاربر بر روی آن کلیک می کند .

function : این تابع کد دستوری است که می خواهیم در هنگام رخ دادن رویداد ، انجام شود .

مثال زیر کاربرد رویداد click را نشان میدهد:

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

مثلا هر وقت روی محتوای هر تگ p کلیک شد آن محتوا مخفی شود :

کد:

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

 

رویداد ( ) dblclick در jQuery

در این بخش از آموزش JQuery ، رویداد dblclick را در طراحی سایت شرح میدهیم.

رویداد dblclick زمانی اتفاق می افتد که کاربر بر روی عنصر مورد نظر دابل کلیک نماید .

با رویداد dblclick برای مثال می توان کدی طراحی کرد که در هنگام دابل کلیک کاربر بر روی یک عنصر رنگ پس زمینه آن عوض شده و یا عنصر مخفی شود .

شکل کلی استفاده از این متد به شرح زیر است :

کد:

$ ( ” selector ” ).dblclick ( function ( ) { … some code … } ;

selector : selector کنترلی است که کاربر بر روی آن دابل کلیک می کند .

function : این تابع کد دستوری است که می خواهیم در هنگام رخ دادن رویداد ، انجام شود .

مثال زیر کاربرد رویداد dblclick را نشان میدهد:

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

کد:

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

 

رویداد mouseenter در jQuery

در این بخش از آموزش JQuery ، رویداد mouseenter را در طراحی سایت شرح میدهیم.

رویداد mouseenter زمانی اتفاق می افتد که اشاره گر ماوس وارد محتوای تگ html می شود.

شکل کلی استفاده از این متد به شرح زیر است :

کد:

$(selector).mouseenter(function)

مثال زیر کاربرد رویداد mouseenter را نشان میدهد.

کد:

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

وقتی که اشاره گر ماوس وارد محتوای تگ html می شود.

رویداد mouseleave در jQuery

در این بخش از آموزش JQuery ، رویداد mouseleave را در طراحی سایت شرح میدهیم.

رویداد mouseleave زمانی اتفاق می افتد که اشاره گر ماوس محتوای تگ html ترک می کند .

شکل کلی استفاده از این متد به شرح زیر است :

کد:

$(selector).mouseleave(function)

مثال زیر کاربرد رویداد mouseleave را نشان میدهد.

کد:

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

رویداد ( ) mousedown در jQuery

در این بخش از آموزش JQuery ، رویداد mousedown را در طراحی سایت شرح میدهیم.

رویداد mousedownزمانی اتفاق می افتد که دکمه سمت چپ موس را بر روی عنصر مورد نظر فشار دهید .

رویداد mousedown می تواند دو کار را انجام دهد :

۱- باعث رخ دادنرویداد mousedown برای عنصر مورد نظر می شود .

شکل استفاده از این حالت به صورت زیر است :

کد:

$ ( ” selector ” ).mousedown ( ) ;

۲- باعث اجرا شدن تابع یا دستوری در هنگام فشرده شده دکمه موس بر روی عنصر مورد نظر می شود .

شکل استفاده از این حالت به صورت زیر است :

کد:

$ ( ” selector ” ).mousedown ( functoin ) ;

مثال زیر کاربرد رویداد mousedown را نشان میدهد :

کد:

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

زمانیکه دکمه ماوس روی عنصر مورد نظر فشرده می شود.

رویداد ( ) mouseup در jQuery

در این بخش از آموزش JQuery ، رویداد mouseup را در طراحی سایت شرح میدهیم.

رویداد mouseup زمانی اتفاق می افتد که دکمه فشرده شده موس را بر روی عنصر مورد نظر ، رها دهید .

رویداد mouseup می تواند دو کار را انجام دهد :

۱

– باعث رخ دادن رویداد mouseup برای عنصر مورد نظر می شود .

شکل استفاده از این حالت به صورت زیر است :

کد:

$ ( ” selector ” ).mouseup ( ) ;

۲ – باعث اجرا شدن تابع یا دستوری در هنگام فشرده شدن دکمه موس بر روی عنصر مورد نظر و پس از رها کردن آن می شود .

شکل استفاده از این حالت به صورت زیر است :

کد:

$ ( ” selector ” ).mouseup ( functoin ) ;

مثال زیر کاربرد رویداد mouseup را نشان میدهد :

کد:

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

زمانیکه دکمه ماوس روی عنصر مورد نظر رها می شود

رویداد ( ) hover در jQuery

در این بخش از آموزش JQuery ، رویداد hover را در طراحی سایت شرح میدهیم.

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

تابع اول در هنگام ورود موس بر روی عنصر و تابع دوم در هنگام خروح عنصر از روی عنصر اجرا می شود .

این رویداد هر دو رویداد mouseenter و رویداد mouseleave را فعال می کند .

شکل کلی استفاده از این متد به شرح زیر است :

کد:

$ ( ” selector ” ).hover ( inFunction , outFunction ) ;

selector : selector ، تعیین کننده id عنصری است که می خواهیم رویداد ( ) hover در هنگام عبور از روی آن اتفاق بیفتد .

inFunction : این تابع زمانی اتفاق می افتد که رویداد mouseenter رخ می دهد . یعنی زمانی که موس بر روی عنصر مورد نظر وارد می شود .

outFunction : این تابع زمانی اتفاق می افتد که رویداد mouseleave رخ می دهد . یعنی زمانی که موس از روی عنصر مورد نظر خارج می شود .

نکته مهم : اگر فقط یک تابع در دستور رویداد ( ) hover تعیین شود ، این تابع برای هر رویداد اجرا می شود .

کد:

$(“#p1”).hover(function(){ alert(“You entered p1!”); }, function(){ alert(“Bye! You now leave p1!”); });

این رویداد دو function دارد . و این دو ترکیبی از رویدادهای mouseenter(), mouseleave() هستند .

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

مثال زیر کاربرد رویداد hover را نشان میدهد :

کد:

$(“#p1”).hover(function(){ alert(“You entered p1!”); }, function(){ alert(“Bye! You now leave p1!”); });

 

رویداد ( ) focus در jQuery

در این بخش از آموزش JQuery ، رویداد focus را در طراحی سایت شرح میدهیم.

رویداد focus زمانی اتفاق می افتد که کنترل یا عنصر مورد نظر فوکوس برنامه را به دست آورد.

یک کنترل یاعنصر زمانی که انتخاب شده و یا به واسطه فشردن متوالی کلید Tab ، مرورگر بر روی آن متمرکز می شود ، فوکوس برنامه را در اختیار می گیرد .

می توان کدهایی طراحی کرد که مثلا رنگ پس زمینه یک کادر دریافت متن در هنگام در اختیار گرفتن فوکوس تغییر نماید .

شکل کلی استفاده از این متد به شرح زیر است :

کد:

$ ( ” selector ” ).focus ( function ( ) { … some code … } ;

selector : selector کنترل یا عنصری است که فوکوس برنامه را به دست می آورد .

function : این تابع کد دستوری است که می خواهیم در هنگام رخ دادن رویداد ، انجام شود . مثال زیر کاربرد رویداد focusرا نشان میدهد :

کد:

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

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

رویداد ( ) blur در jQuery

در این بخش از آموزش JQuery ، رویداد blur را در طراحی سایت شرح میدهیم.

رویداد blur در jQuery زمانی اتفاق می افتد که کنترل یا عنصر مورد نظر فوکوس برنامه را از دست می دهد. می تولنید کدها و توابع مورد نظر خود را طوری طراحی کنید که در هنگام رخ دادن این رویداد ، اجرا شوند .

شکل کلی استفاده از این متد به شرح زیر است :

کد:

$ ( ” selector ” ).focus ( function ( ) { … some code … } ;

selector : selector عنصر مورد نظری است که فوکوس برنامه را از دست می دهد .

مثل یک کادر ورود متن که پس از پرکردن آن توسط کاربر و کلیک بر روی چیزی دیگر ، فوکوس را از دست می دهد .

function: این تابع کد دستوری است که می خواهیم در هنگام رخ دادن رویداد ، انجام شود .

مثال زیر کاربرد رویداد blur را نشان میدهد :

کد:

$(“input”).blur(function(){ $(this).css(“background-color”,”#ffffff”); });

زمانیکه عنصرمورد نظر از فرم فاکوس را از دست می دهد

رویداد ( ) change در jQuery

در این بخش از آموزش JQuery ، رویداد change را در طراحی سایت شرح میدهیم.

رویداد change زمانی اتفاق می افتد که در کنترل یا عنصر مورد نظر تغییری ایجاد می شود.

این رویداد معمولا برای کنترل هایی مثل کادر متن ، گزینه های انتخاب و یا منوهای کرکره ایی که محتویات یا حالات آنها قابل تغییر هستند ، به کار می رود .

زمانی که شما متن یک کنترل متن را تغییر داده و یا گزینه یک کادر انتخابی را عوض می کنید ، رویداد change اتفاق می افتد .

شکل کلی استفاده از این متد به شرح زیر است :

کد:

$ ( ” selector ” ).change ( function ( ) { … some code … }

selector : selector کنترلی است که کاربر آن را تغییر می دهد .

function : این تابع کد دستوری است که می خواهیم در هنگام رخ دادن رویداد ، انجام شود .

مثال زیر کاربرد رویداد change را نشان میدهد :

کد:

$(“input”).change(function(){ alert(“The text has been changed.”); });

این رویداد فقط برای عناصر درون فرم کاربرد دارد و زمانی فراخوانی می شود که محتوای یک عنصر تغییر کند.

رویداد ( ) submit در jQuery

در این بخش از آموزش JQuery ، رویداد submit را در طراحی سایت شرح میدهیم.

رویداد ( ) submit زمانی اتفاق می افتد که یک فرم submit شده و به سرور ارسال شود .

برای مثال از رویداد ( ) submit می توان برای صدور یک پیام هشدار به کاربر ، برای اعلام submit شدن فرم استفاده کرد .

رویداد ( ) submit فقط با تگ form کار می کند .

شکل کلی استفاده از این متد به شرح زیر است :

کد:

Syntax $ ( ” selector ” ).submit ( ) ; یا $ ( ” selector ” ).submit ( function ) ;

selector : این پارامتر تعیین کننده id فرمی است که submit شده است .

function : تعیین کننده تابعی است که می خواهیم پس از submit شدن فرم ، اجرا شود . مثال زیر کاربرد رویداد ( ) submit را نشان میدهد :

کد:

$(“form”).submit(function(){ alert(“Submitted”); });

 

رویداد ( ) toggle در jQuery

در این بخش از آموزش JQuery ، رویداد toggle را در طراحی سایت شرح میدهیم.

رویداد toggle بین دو افکت ( ) show و افکت ( ) hide تغییر وضعیت می دهد .

رویداد toggle وضعیت نمایش و یا عدم نمایش عنصر مورد نظر رابر روی صفحه می سنجد .

اگر عنصر در حال نمایش باشد آن را با استفاده از متد Hide مخفی کرده و اگر عنصر مخفی باشد آن را با استفاده از متد Show نمایش می دهد .

این متد برای عناصری که از ابتدای اجرای صفحه مخفی تعیین شده اند ، کار نمی کند .

شکل کلی استفاده از این متد به شرح زیر است :

کد:

$( selector ).toggle( speed , easing , callback ) ;

selector : تعیین کننده id عنصری است که می خواهیم افکت ( ) toggle ، بر روی آن اجرا شود .

speed : این پارامتر تعیین کننده سرعت انجام افکت و تغییر حالت عنصر از حالت اول به دوم است . استفاده از این پارامتر اختیاری است .

انواع مقادیر ممکن عبارتند از :

۱) MiliSecond : مدت زمان اجرای افکت بر حسب میلی ثانیه .

۲) Slow : سرعت آهسته

۳) Fast : سرعت زیاد

easing: این پارامتر تعیین کننده سرعت انجام افکت در ابتدا و انتهای آن است . استفاده از این پارامتر اختیاری است .

انواع مقادیر ممکن عبارتند از :

۱) Swing :سرعت انجام افکت در ابتدا و انتهای فرایند آهسته ولی در وسط آن زیاد است .

۲) Liner : سرعت در کل طول فرایند یکسان است .

function : به وسیله این پارامتر می توانیم یک تابع را تعیین کنیم ، تا در پایان انجام افکت ( ) toggle ، اجرا شود .

استفاده از این پارامتر اختیاری است .

مثال زیر کاربرد رویداد toggle را نشان میدهد :

کد:

$(“p”).toggle( function(){$(“p”).css({“color”:”red”});}, function(){$(“p”).css({“color”:”blue”});}, function(){$(“p”).css({“color”:”green”}); });

رویداد ( ) unload در jQuery

در این بخش از آموزش JQuery ، رویداد unload را در طراحی سایت شرح میدهیم.

رویداد unloadزمانی اتفاق می افتد که کاربر از صفحه جاری خارج می شود .

برای مثال یکی ار استفاده های جالب این رویداد ، می تواند صدور یک پیام خداحافظی برای کاربر در زمانی که می خواهد صفحه را ببندد ، باشد .

رویداد unload در مواقع زیر رخ می دهد :

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

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

کلیدهای forward ( رفتن به جلو ) و backward ( رفتن به عقب ) را در مرورگر کلیک نمایید .

پنجره جاری مرورگر بسته شود .

صفحه مجدد لود و فراخوانی شود .

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

شکل کلی استفاده از رویداد ( ) unload به صورت زیر است :

کد:

$( selector ).unload( function ) ;

function : این پارامتر تعیین کننده تابعی است که می خواهیم در هنگام رخ دادن رویداد ( ) unload ، اجرا شود .

چند نکته :نکته ۱ :رویداد ( ) unload فقط بایستی با شی window به کار برود .

نکته ۲ :رویداد ( ) unload ممکن است در مرورگر های مختلف ، عملکرد متفاوتی داشته باشد .

آن را در مرورگرهای مورد نظر خود تست نمایید .

مثال زیر کاربردرویداد ( ) unload را نشان میدهد :

کد:

$(window).unload(function(){ alert(“Goodbye!”); });

 

رویداد ( ) select در jQuery

در این بخش از آموزش JQuery ، رویداد select را در طراحی سایت شرح میدهیم.

رویداد select زمانی اتفاق می افتد که متن موجود در یک کادر متن ( textfield ) یا textarea ، انتخاب شود .

این رویداد دو کار را انجام می دهد :

باعث بروز و رخ دادن رویداد select برای یک کادر متن می شود . یعنی همانند این است که متن آن را انتخاب نماییم :

کد:

$ ( ” selector ” ).select ( ) ;

selector : تعیین کننده id عنصری است که می خواهیم متن آن را انتخاب نماییم .

در صورت انتخاب متن یک کادر متن ، این رویداد رخ می دهد . می توان تابعی را تعیین نمود تا در هنگام رخ دادن این رویداد اجرا شود .

شکل کلی استفاده از این رویداد به صورت زیر است :

کد:

$ ( ” selector ” ).select ( function ) ;

selector : تعیین کننده id عنصری است که می خواهیم متن آن را انتخاب نماییم و یا متنش انتخاب می شود .

مثال زیر کاربرد رویداد select را نشان میدهد :

کد:

$(“input”).select(function(){ alert(“Text marked!”); });

رویداد ( ) resize در jQuery

در این بخش از آموزش JQuery ، رویداد resize را در طراحی سایت شرح میدهیم.

رویداد resize زمانی اتفاق می افتد که اندازه پنجره مرورگر تغییر نماید .

رویداد resize هم می تواند باعث تغییر اندازه پنجره مرورگر شده و یا اینکه در هنگام نغییر اندازه آن ، تابع تعیین شده را اجرا نماید .

شکل کلی استفاده از این متد به شرح زیر است :

کد:

Syntax $ ( ” selector ” ).resize ( ) ; یا $ ( ” selector ” ).resize ( function ) ;

selector : این پارامتر تعیین کننده نام پنجره ای است که می خواهید در هنگام تغییر اندازه آن ، رویداد انجام شود .

معمولا مقدار این پارامتر window بوده ، که به پنجره جاری مرورگر اشاره می کند .

function : این پارامتر تابعی را تعیین می کند که می خواهیم در هنگام تغییر اندازه پنجره مرورگر اجرا شود .

مثال زیر کاربرد رویداد resize را نشان میدهد :

کد:

$(*).hide()

$(window).resize(function(){ $(‘span’).text(x+=1); });

رویداد ( ) scroll در jQuery

در این بخش از آموزش JQuery ، رویداد scroll را در طراحی سایت شرح میدهیم.

رویداد scroll زمانی اتفاق می افتد که کاربر در یک عنصر صفحه ، عمل scroll ( بالا و پایین رفتن ) را انجام دهد .

این رویداد برای تمام عناصری که دارای خاصیت scroll هستند ، مثل صفحه ( window , textarea و … ) وجود دارد .

رویداد scroll هم می تواند باعث scroll یک عنصر شده و یا اینکه در هنگام scroll آن عنصر ، یک تابع تعیین شده را اجرا نماید .

شکل کلی استفاده از این متد به شرح زیر است :

کد:

Syntax $ ( ” selector ” ).scroll ( ) ; یا $ ( ” selector ” ).scroll ( function ) ;

selector : این پارامتر ، تعیین کننده id عنصری است که عمل scroll بر روی آن انجام می شود .

function : این پارامتر تابعی را تعیین می کند که می خواهیم در هنگام scroll عنصر مورد نظرمان اجرا شود .

مثال زیر کاربرد رویداد scroll را نشان میدهد :

کد:

$(“div”).scroll(function(){ $(“span”).text(x+=1); });

رویداد ( ) focusin در jQuery

در این بخش از آموزش JQuery ، رویداد focusin را در طراحی سایت شرح میدهیم.

رویداد focusin زمانی اتفاق می افتد که یک عنصر فرزند ( عنصری که در درون یک عنصر دیگر قرار گرفته است )، فوکوس برنامه را به دست آورد .

عنصری که در هر لحظه انتخاب شده و تمرکز برنامه بر روی آن است ، فوکوس برنامه را در اختیار دارد .

دقت کنید که برای رخ دادن این رویداد ، باید یک عنصر فرزند فوکوس را به دست آورد و نه خود عنصر .

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

برای مثال فرض کنید که یک تگ div طراحی کرده ایم که در درون آن دو کادر متن قرار دارد . زمانی که هر کدام از کادرهای متین درون آن ، فوکوس برنامه را به دست آورد ، این رویداد اتفاق می افتد .

شکل کلی استفاده از این متد به شرح زیر است :

کد:

$ ( ” selector ” ).focusin ( function ( ) { … some code … } ;

 

selector : selector کنترل یا عنصری است که یک عنصر فرزند آن فوکوس برنامه را به دست می آورد .

function : این تابع کد دستوری است که می خواهیم در هنگام رخ دادن رویداد ، انجام شود .

مثال زیر کاربرد رویداد focusin را نشان میدهد :

کد:

$(“div”).focusin(function(){ $(this).css(“background-color”,”#FFFFCC”); });

نوشته های مشابه

آموزش جامع و کامل جی کوئری بخش ششم

جهت مطالعه به ادامه مطلب مراجعه فرمائید (بیشتر…)

آموزش جامع و کامل جی کوئری بخش هشتم

 جهت مطالعه به ادامه مطلب مراجعه فرمائید (بیشتر…)

 کانال تلگرام داده باران شارژ آنلاین

نظری بدهید

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