نکات مهم جی کوئری برای شروع قدرتمند(قسمت اول)
در دوره آموزش جاوا اسکریپت با 0 تا 100 جاوا اسکریپت به صورت کامل آشنا شدیم.در این پست می خواهیم قبل از شروع دوره آموزشی جی کوئری با نکات مهم jQuery برای استارت قدرتمند بیشتر آشنا شویم.
اشتباهی که عمدهٔ برنامه‌نویسان تازه‌کار مرتکب می‌شوند آن است که زمان خود را صرف یادگیری jQuery می‌کنند بدون آنکه مطالعه‌ای در رابطه با جاوااسکریپت داشته باشند. تحقیقات حاکی از آنند که بسیاری از کدنویسان مبتدی هیچ ایده‌ای در رابطه با نحوهٔ شکل‌گیری jQuery و میزان وابستگی آن به جاوااسکریپت ندارند.
در حقیقت، jQuery یکسری از توابع است که با جاوااسکریپت نوشته شده‌اند و تنها دلیلی که دولوپرها از آن استفاده می‌کنند این است که با استفاده از jQuery تعداد خطوط کد کمتری خواهید نوشت. البته جدیدترین نسخه‌های جاوااسکریپت (ES6)، سینتکس خود را ساده‌تر و قابل‌فهم‌تر کرده‌اند که بدین ترتیب خیلی نیازی به استفاده از جی‌کوئری و یا دیگر لایبرری‌های جاوااسکریپت نخواهیم داشت. در اینجا نمی‌خواهیم بگوییم که استفاده از jQuery اشتباه است بلکه تنها راه و مسیر صحیح یادگیری را به شما نشان خواهیم داد.
جی کوئری jQuery چیست؟
کتابخانه ای از جاوا اسکریپت است که رایگان و متن باز (Open Source) می باشد و در اکثر مرورگرهای موجود بخوبی کار میکند (Cross Browser) . همچنین بسادگی قابل فهم و توسعه می باشد .جی کوئری می تواند براحتی با css و Javascript تعامل داشته باشد و پلاگین های بسیار زیادی در اینترنت (بصورت رایگان و متن باز) وجود دارد که می توانیم از آنها در پروژه خود استفاده کنیم و یا ایده بگیریم،شعار جی کوئری write less, do more می باشد . به این معنی که کمتر بنویس ، بیشتر انجام بده . به زبان خودمانی یعنی با کد کمتر بازدهی بیشتری خواهید داشت . وب سایت اصلی و مرجع جی کوئری Jquery.com می باشد که دوستانی که با زبان انگلیسی آشنایی بیشتری دارند ، راحت تر می توانند از آموزش ها و پلاگین های این سایت استفاده کنند .
افزودن جی کوئری به قالب وب سایت
با مراجعه به وب سایت جی کوئری (http://jquery.com/download) مشاهده می کنید که در کل دو نسخه جی کوئری داریم . یکی Compressed Production و دیگری نسخه UnCompressed Development . در زمان نگارش این مقاله ، نسخه ۱٫۱۲٫۲ از جی کوئری در دسترس می باشد .
بعد از دانلود نسخه جی کوئری فایل های zip را داخل پوشه اصلی قالب وب سایت اکسترک یا کپی می کنیم.سپس در داخل تگ Head با استفاده از کد زیر میتوانید کتابخانه جی کوئری را به پروژه خود اضافه کنید.(برای آشنایی با تگ های HTML از دوره آموزش ویدئویی HTML5 می توانید استفاده کنید).
<script type="text/javascript" src="jquery-1.12.2.js"></script>
شکل کلی دستورات 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 آشنا خواهیم شد.
شما همچنین ممکن است دوست داشته باشید
Overhang.js – یک افزونه jQuery برای نوتیفیکیشن Dropdown
