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

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

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

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

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

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

 $("selector").click(function(){
//
});

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

 

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

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

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

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

خب حالت دیگری هم وجود دارد. فرض کنید 10 پاراگراف در صفحه شما وجود دارد و شما تنها میخواهید پاراگراف پنجمتان را مخفی کنید. یعنی با حرکت کلیک موس بر روی پاراگراف ها، هیچکدام غیر از پاراگراف پنجم مخفی نشود. برای این نوع از مثال ها شما باید به پاراگراف مورد نظرتان، یک شناسه اختصاص دهید و از طریق این شناسه ، آن را به جی کوئری معرفی کنید. اگر خاطرتان باشد، علامت # امکان  انتخاب شناسه ها در سلکتور برایمان فراهم میکرد.

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

<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#prg").click(function(){
   $(this).hide();

});
});
</script>
</head>
<body>
<p id="prg">یک یک پاراگراف است</p>
<p>این یک پاراگراف دیگر است</p>
</body>
</html>

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

در html با انواع لیست ها آشنا شدیم و آموختیم که دو تگ ul و li در صفحات html برای ایجاد یک لیست با زیر مجموعه به صورت درختی استفاده می شود.

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

<p>List 1:</p>
<ul>
<li>آموزش</li>
<li>صفر</li>
<li>تا صد</li>
<li>جی کوئری</li>
</ul>

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

$("p").click(function(){
    $("ul li:first-child").hide();
  });

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

یک مثال دیگر: فرض کنید دکمه ای را در صفحه دارید که به محض کلیک بر روی آن، یک عبارت به شما نمایش داده می شود.

برای شروع، ابتدا با استفاده از HTML در بدنه ، یک دکمه قابل کلیک ایجاد میکنیم که بر روی آن کلمه “Click” نوشته شده باشد:
 

<button id="btn">Click </button>

برای روشن تر شدن موضوع، در بخش کدهای جی کوئری، دستور میدهیم که هرگاه بر روی دکمه ای با شناسه مخصوص  btn کلیک شد، پیغام Hello نمایش داده شود.
 

$("#btn").click(function(){
 
      alert("Hello");
 });

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

<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("ul li:first-child").hide();
  });
});
</script>
</head>
<body>

<p>List 1:</p>
<ul>
<li>آموزش</li>
<li>صفر</li>
<li>تا صد</li>
<li>جی کوئری</li>
</ul>

<button>Click </button>
</body>
</html>


نتیجه کار، به این صورت خواهد بود که با کلیک کردن بر روی دکمه Click ، بخش "آموزش" مخفی خواهد شد.

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

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

مثال:
 

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

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

متدهای show  و hide:
همانطور که قبلا آموختیم، با استفاده از متد  hide می توانید، عناصر دلخواهتان را در صفحه پنهان کرده و در صورت نیاز با استفاده  showآن را بار دیگر نمایش دهید.

برای مثال دو دکمه با نام های پنهان کردن و نمایش دادن در بدنه می سازیم تا پاراگراف ما را در صورت کلیک کردن پس از گذشت مدت زمان 1 ثانیه (1000 میلی ثانیه) مخفی و نمایش دهند پس:

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

رویداد دابل کلیک:
دقت کنید که تمامی رویدادهای ذکر شده ناکنون، زمانی رخ خواهد داد  که کاربرتنها یک بار بر روی دکمه دکلیک کند.

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

مثال:
 

$(document).ready(function(){
  $("button").dblclick(function(){
    $("ul li:first-child").hide();
  });
});

نکته: این رویداد تنها با دابل کلیک کردن امکان پذیر است و با یک بار کلیک کردن هیچ رخدادی اتفاق نخواهد افتاد.

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

کدهای قبل را برای این مثال بکار میگیریم:

$(document).ready(function(){
  $("button").mouseover(function(){
    $("ul li:first-child").hide();
  });
});

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

مثال:

<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").mouseout(function(){
    $("ul li:first-child").hide();
  });
});
</script>
</head>
<body>

<p>List 1:</p>
<ul>
<li>آموزش</li>
<li>صفر</li>
<li>تا صد</li>
<li>جی کوئری</li>
</ul>

<button>Click me</button>
</body>
</html>

 

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

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

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