آموزش جیکوئری Jquery قسمت سوم

زهرا زارع 1395/8/30 961

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

خب، در ابتدای این بخش، به تکمیل تمرین جلسه گذشته  با معرفی یک رویداد پرکاربرد با نام toggle  می پردازیم.

رویداد toggle:

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

. به این صورت که اگر  عنصر ما در صفحه نمایان باشد، با اعمال این رویداد، عنصر مورد نظر پنهان شده و بالعکس، چنانچه عنصر مورد نظر در صفحه در حالت hide یا مخفی باشد، با اعمال این رویداد، عنصر مورد نظر در صفحه نشان داده می شود.

مثال:                                                                                                                                                                                                    

<!DOCTYPE html>
<html>
<head>
    <script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn").click(function(){
    $("p").toggle(1000);
  });
 
});
</script>
 
</head>
<body>
<p>آموزش صفر تا صد جی کوئری</p>
<button id="btn">آزمایش toggle </button>

  </body>
</html>

 

در ابتدا به عنوان ورودی برای متد  toggle ، مقدار 1000 میلی ثانیه معادل یک ثانیه را وارد کردیم.

 

از جمله پارامترهای پرکاربرد  در toggle، پارامتر speed می باشد که در زیر به معرفی آن میپردازیم:

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

خب در تمرین قبل نیز ما مدت زمان 1000 میلی ثانیه معادل یک ثانیه را به عنوان سرعت اعمال افکت، در نظر گرفتیم.  پس می توان نتیحه گرفت MiliSecond نیز از مقادیر پارامتر speed است

Slow:  این پارامتر سرعت اعمال افکت یعنی مخفی کردن  و نمایش دادن را آهسته تر می کند.

<script>
$(document).ready(function(){
  $("#btn").click(function(){
    $("p").toggle('slow');
  });
 
});
</script>


Fast:این پارامتر سرعت اعمال افکت را سریع تر  اعمال می کند.

<script>
$(document).ready(function(){
  $("#btn").click(function(){
    $("p").toggle('fast');
  });
 
});
</script>

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

<script>
$(document).ready(function(){
  $("#btn").click(function(){
    $("p").toggle('fast', function(){
           alert('welcome')
   });
  });
 
});
</script>

همانطور که مشاهده می کنید، علاوه بر toggle کردن به صورت سریع، همزمان، دستور اجرای یک عملیات مخصوص (در اینجا alert) را با استفاده از function به کد اضافه کردیم.

در نتیجه اجرای این کد، مشاهده خواهید کرد که با  کلیک بر روی دکمه " آزمایش toggle" ، علاوه بر مخفی شدن و یا نمایش دادن پاراگراف، پیغام “welcome” نیز به شما نمایش داده می شود.

تا این جای کار با انواع رویداد ها از جمله: رویداد ready ، رویداد کلیک، رویداد دابل کلیک ، mouseover و mouseout آشنا شدیم. در ادامه به معرفی رویدهای پرکاربرد بیشتری می پردایم:

رویداد mousedown:

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

مثال:

<script>
$(document).ready(function(){
 $("#btn").mousedown(function(){
 $("p").hide();
 });
  });

</script>

 

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

 

رویداد mouseenter:

این رویداد مخصوص موس، زمانی رخ خواهد داد که نشانگر موس، تنها "وارد" عنصر html مورد نظر شود. در این نوع رویداد، نیازی به کلیک کردن نمی باشد.

در قطعه کد زیر، عمل مخفی شدن نوشته، تنها با وارد شدن موس داخل دکمه با شناسه  btn صورت می پذیرد:

<script>
$(document).ready(function(){
 $("#btn").mouseenter(function(){
 $("p").hide();
 });
  });

</script>

 

رویداد mouseleave:

 

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

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

<script>
$(document).ready(function(){
 $("#btn").mouseleave(function(){
 $("p").hide();
 });
  });

</script>

 

در کد بالا، به محض خارج شدن از دکمه با شناسه btn ، عملیات مخفی کردن پاراگراف رخ خواهد داد.

 

رویداد hover:

با استفاده از این رویداد شما می توانید تعیین کنید که در زمانی که نشانگر موس، بر روی عنصر مورد نظرتان قرار گرفت (mouseenter)چه اتفاقی ، و چنانچه نشانگر موس از روی عنصر مربوطه برداشته شد (mouseleave)، چه اتفاقی رخ دهد.

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

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

$("selector").hover( FirstFunction , SecondFunction );


پس می توان نتیجه گرفت، که این دستور، ترکیب دو دستور mouseenter و mouseout است که در بخش قبلی آن را فرا گرفتیم.

به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
 $("p").hover(function(){
 $(this).css("background-color", "blue");
 }, function(){
 $(this).css("background-color", "black");
 });
});
</script>
</head>
<body>

<h1>تمرین برای رویداد hover</h1>

<p>آموزش صفر تا صد جی کوئری</p>
<p class="zz">یکشنبه شب ها ساعت 10</p>

</body>
</html>


 

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

 

رویداد focus:

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

برای مثال صفحه وب سایت شما، شامل یک کادر متنی برای وارد کردن نام کاربران می باشد، و زمانی که برای وارد کردن نام، نشانگر موس بر روی آن قرار می گیرد، رنگ آن تغییر خواهد کرد:

<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script></script>
<script>
$(document).ready(function(){
    $("input").focus(function(){
        $(this).css("background-color", "#f5d7be");
    });
   
});
</script>
</head>
<body>

Enter your Name: <input type="text" name="fullname"><br>

</body>
</html>


با توجه به در نظر گرفتن کد رنگ #f5d7be،  رنگ کادر متنی پس از ورود موس به شکل زیر خواهد بود:

آموزش جیکوئری

رویداد blur:

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

. در مثال گذشته  با focus توانستیم کادر متنی را به رنگ #f5d7be دربیاوریم. حالا با رویداد blur می توانیم مشخص کنیم که زمانی که از حالت فوکوس خارج می شویم ، رنگ کادر چه تغییری کند.

مشخص کنیم که زمانی که از حالت فوکوس خارج می شویم ، رنگ کادر چه تغییری کند. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script></script>
<script>
$(document).ready(function(){
    $("input").focus(function(){
        $(this).css("background-color", "#f5d7be");
    });
     
    $("input").blur(function(){
        $(this).css("background-color", "#f5bbfb");
    });
});
</script>
</head>
<body>

Enter your Name: <input type="text" name="fullname"><br>

</body>
</html>

 

نتیجه اجرا، به این صورت خواهد بود که هرگاه موس در درون کادر متنی کلیک شود، رنگ آن نارنجی و هرگاه خارج کادر کلیک شود، رنگ آن  مانند زیر بنفش خواهد شد:

 

رویداد change :

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

. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script></script>
<script>

$(document).ready(function(){
    $("input").focus(function(){
        $(this).css("background-color", "#f5d7be");
    });
     
    $("input").blur(function(){
        $(this).css("background-color", "#f5bbfb");
    });
$("input").change(function(){
alert("نام کاربری شما با موفقیت ثبت شد");
});
});

</script>
</head>
<body>

Enter your Name: <input type="text" name="fullname"><br>

</body>
</html>


 

در این مثال، با وارد کردن نام کاربری و زدن دکمه اینتر، پیغام : "نام کاربری شما با موفقیت ثبت شد" نمایش داده خواهد شد.

 

آموزش جیکوئری

 

خب دوستان عزیزم، جلسه آینده به ادامه و تکمیل مبحث امروز می پردازیم و برای امشب کافیه. سعی کنید برای خودتون مثال بزنید و تمرین ها رو حل کنید. یادتون باشه خیلی زود قراره کارای "خفن" با جی کوئری انجام بدیم و لازمه انجام کارای خفن یادگیری هر چه بهتره مفاهیم پایه و مقدماتیه.

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

دانلود PDF قسمت سوم آموزش جیکوئری

قسمت بعدی قسمت قبلی