نکات مهم جی کوئری برای شروع قدرتمند(قسمت دوم)
در قسمت اول از سری آموزش های نکات مهم جی کوئری برای شروع قدرتمند با جی کوئری،اهمیت یادگیری،دانلود و استفاده از آن در پروژه های مختلف آشنا شدیم.در قسمت دوم می خواهیم با انتخاب گرها یا سلکتور ها (Selector) های جی کوئری آشنا شویم.
انتخاب گرها و یا Selectorهای JQuery
یک از نکات مهم در یادگیری 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
همانطور که میدانید 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 را مخفی کن.
برای درک بهتر مفاهیم توضیح داده شده میبایست با HTML و JavaScript آشنایی داشته باشید.برای آشنایی بیشتر و یادگیری HTML5 و جاوا اسکریپت میتوانید از دوره های رایگان کدفرند استفاده کنید.