آموزش HTML و CSS و JS قسمت ششم: شروع قدرتمند با JQuery

قسمت ششم

نوشته شده توسط: مهندس مهدی موسوی

بخش برنامه نویسی و نرم افزار|طراحی رابط کاربری وب

قسمت های دیگر این مطلب:

آموزش HTML و CSS و JS قسمت اول: مقدمه + ویدیو
آموزش HTML و CSS و JS قسمت دوم: شروع قدرتمند با HTML
آموزش HTML و CSS و JS قسمت سوم: شروع با CSS
آموزش HTML و CSS و JS قسمت چهارم: HTML و CSS پیشرفته
آموزش HTML و CSS و JS قسمت پنجم: آشنایی با برنامه نویسی JavaScript
آموزش HTML و CSS و JS قسمت ششم: شروع قدرتمند با JQuery

در قسمت قبل به صورت پایه‌ای با برنامه نویسی JavaScript آشنا شدیم و به این نتیجه رسیدیم که برای سهولت و نوشتن کدهای قدرتمند بهتر است کتابخانه JQuery را برای برنامه نویسی JavaScript در قالب خود پیاده سازی کنیم.

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

$(selector).action();

selector: به معنای انتخاب کننده است و برای انتخاب عنصر هدف مورد استفاده قرار می‌گیرد.

action: به معنای عمل است و عملی که در نهایت قرار است انجام شود را مشخص می‌کند.

کد زیر را ببینید:

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

selector و یا انتخاب کننده سطر اول کلاس .person است. چون نام عبارت با نقطه شروع شده است می‌فهمیم منظور یک کلاس است.

action و یا عملیاتی که در سطر اول مد نظر است click شدن است. در واقع در سطر اول می‌گوییم اگر روی عنصری با کلاس .person کلیک شد دستورات درون پرانتز .click را اجرا کن.

دستورات درون پرانتز با function(){ شروع شده و با یک کروشه در خط سوم خاتمه می‌یابند نیز به سادگی قابل فهم هستند. با $(".person") کلاس .person با عملیات .hide() مخفی می‌شوند.

برنامه نویسی JavaScript بدلیل حرفه‌ای بودن مانند PHP و یا هر زبان دیگری بسیار به علامت‌ها و مکان جایگذاری آن‌ها حساس است. مثلا اگر پرانتزها را باز کرده و نبندیم و یا نقطه ویرگول‌ها را به درستی قرار ندهیم دیگر کد ما اجرا نخواهد شد.

مثال فوق را به صورت کامل در مرورگر به شکل زیر پیاده سازی می‌کنیم:

<html>
     <head>
          <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
          <script>
               $(document).ready(function(){
                    $(".person").click(function(){
                         $(".person").hide();
                    });
               })
          </script>
     </head>
     <body>
          <div class="person">click for hide content</div>
     </body>
</html>

کد بالا را در فایلی ذخیره و در مرورگر اجرا کنید، شاهد خواهید بود که با کلیک روی نوشته click for hide content این نوشته مخفی می‌شود.

انتخاب گرها و یا Selector‌های JQuery

همانطور که در بالا مثال زدیم با $(".person") کلاس person را برای انجام عملیات انتخاب کردیم. اگر بخواهیم یک المان با شناسه را انتخاب کنیم از # استفاده می‌کنیم.

مثلا فرض کنید می‌خواهیم <div id="name">some div</div> را انتخاب کنیم. برای انتخاب از $("#name") استفاده می‌کنیم.

نکته مهمی که در اینجا وجود دارد این است که همانطور که در قسمت سوم این دوره اشاره کردیم تفاوت کلاس‌ها و شناسه‌ها در این است که هر شناسه را فقط یک بار در صفحه استفاده می‌کنیم در صورتی که کلاس‌ها می‌توانند چند بار استفاده شوند. بنابراین وقتی از $(".person").hide(); استفاده می‌کنیم منظور این است که تمام عناصر با کلاس person را مخفی کن ولی اگر از $("#name").hide(); استفاده می‌کنیم منظور این است که تنها عنصور با شناسه name صفحه را مخفی کن.

انتخاب کننده this: این انتخاب کننده کاربرد جالبی دارد. مثال ذکر شده در بالا را دوباره می‌آوریم:

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

کد بالا را با this به شکل زیر باز نویسی می‌کنیم:

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

دو کد ذکر شده کاربرد یکسانی دارند. در کد دوم کون ما روی کلاس person کلیک کردیم با this به JQuery می‌فهمین که عملیات مخفی کردن را روی همان عنصر کلیک شده انجام بده.

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

$(p).hide();

همانطور که می‌دانید p تگ استفاده شده برای پاراگراف در HTML است. با کد بالا به JQuery می‌فهمانیم که تمام تگ‌ها p صفحه را مخفی کن. طبیعتا می‌توان با $(div).hide(); تمام تگ‌های div صفحه را مخفی کرد.

مثال زیر را در یک فایل ذخیره و اجرا کنید:

<html>
     <head>
          <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
          <script>
               $(document).ready(function(){

                    $(".name").hide();
               })
          </script>
     </head>
     <body>
          <div class="name">software</div>
          <div class="name">hardware</div>
          <div class="name">programming</div>
          <div class="name">network</div>
     </body>
</html>

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

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

$("p.next").hide();

در کد بالا به JQuery می‌گوییم تمام تگ‌های p با کلاس next را مخفی کن.

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

رویدادهای JQuery

چهار رویداد اساسی JQuery را در پایین با هم بررسی می‌کنیم:

click: این رویداد را که در بالا نیز بررسی کردیم وقتی اتفاق می‌افتد که کاربر روی المان جاری کلیک کند.

dblclick: این رویداد متعلق به دابل کلیک کردن روی المان خاص است.

mouseenter: این رویداد وقتی اتفاق می‌افتد که کاربر با موس روی یک المان برود.

mouseleave: این رویداد وقتی اتفاق می‌افتد که کاربر موس را از روی یک المان خارج کند.

مثالی از این چهار رویداد در پایین داریم که آن را در یک مرورگر اجرا کنید:

<html dir="rtl">
     <head>
          <meta charset="utf-8"/>
          <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
          <script>
               $(document).ready(function(){
                  $(".clicked").click(function(){
                       alert("شما روی این آیتم کلیک کردید");
                  });
                  $(".doubleclicked").dblclick(function(){
                       alert("شما روی این آیتم دابل کلیک کردید");
                  });
                  $(".mouseenter").mouseenter(function(){
                       alert("ماس شما روی این المان آمده است");
                  });
                  $(".mouseleave").mouseleave(function(){
                       alert("ماس شما روی این المان بوده است ولی از آن خارج شده است");
                  });
               })
          </script>
     </head>
     <body>
          <p class="clicked">روی این آیتم کلیک کنید</p><br>
          <p class="doubleclicked">روی این آیتم دابل کلیک کنید</p><br>
          <p class="mouseenter">موس خود را روی این آیتم بیاورید</p><br>
          <p class="mouseleave">موس خود را روی این آیتم آورده سپس خارج کنید</p><br>
     </body>
</html>

افکت‌ها در JQuery

در بالا با افکت hide آشنا شدید و دیدید که مسئولیت مخفی کردن عناصر را بر عهده دارد. در پایین افکت‌های مهم دیگری را با هم بررسی می‌کنیم:

show: این افکت برای نمایش یک المان مخفی استفاده می‌شود.

fadeIn: یک المان مخفی را با روش fade باز می‌کند.

fadeOut: یک المان را با روش fade مخفی می‌کند.

fadeToggle: یک المان را در صورت باز بودن، بسته و در صورت بسته بودن، باز می‌کند.

در مثال زیر یک آیتم داریم که با استایل display: none مخفی شده است. سه کلید هم داریم که اولی برای ظاهر شدن، دومی برای مخفی شدن و سومی برای تغییر حالت فعلی آیتم مورد نظر است.

<html dir="rtl">
     <head>
          <meta charset="utf-8"/>
          <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
          <script>
               $(document).ready(function(){
                    $(".show").click(function(){
                        $(".main").show();
                    });
                    $(".hide").click(function(){
                        $(".main").hide();
                    });
                    $(".fadein").click(function(){
                        $(".main").fadeIn();
                    });
                    $(".fadeout").click(function(){
                        $(".main").fadeOut();
                    });
                    $(".fadetoggle").click(function(){
                        $(".main").fadeToggle();
                    });
               })
          </script>
     </head>
     <body>
          <p class="main">این بخش برای تست انیمیشن‌ها در JQuery ایجاد شده است.</p><br>
          <button class="show">انیمیشن show</button>
          <button class="hide">انیمیشن hide</button>
          <button class="fadein">انیمیشن fadein</button>
          <button class="fadeout">انیمیشن fadeout</button>
          <button class="fadetoggle">انیمیشن fadetoggle</button>
     </body>
</html>

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

توجه داشته باشید که مبحث JQuery به اینجا ختم نمی‌شود، ولی تقریبا تمام نکات مهم JQuery ذکر شد.

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

سوالات، پیشنهاد و یا انتقادات خود را در بخش نظرات درج کنید.

تگ ها: html javascript jquery