آموزش جی کوئری – شروع کدنویسی

  • منتشر شده در تاریخ

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

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

 

دانلود جی کوئری (jQuery)

برای شروع, ابتدا یک کپی از جی کوئری را دانلود و داخل سند خود اضافه کنید. دو نسخه مختلف از جی کوئری برای دانلود در دسترس است – compressed (فشرده شده) و uncompressed (غیرفشرده)

فایل غیرفشرده برای حالت دیباگ و توسعه عالی است در حای که نسخه فشرده و کم حجم شده برای حالت نهایی پروژه پیشنهاد می شود چرا که به علت حجم بسیار کم, پهنای باند کمتری از سرور را می گیرید و سرعت لود پروژه نیز افزایش می یابد.

می توانید جی کوئری را از اینجا دانلود کنید : https://jquery.com/download

همین که فایل jQuery را دانلود کردید یک فایل با پسوند .js خواهید داشت چرا که فقط یک کتابخانه جاوااسکریپت است بنابراین می تاونید همانند دیگر فایل های جاوااسکریپت, آن را داخل سند HTML با المان <script> اینکلود کنید.

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

نکته: همانطور که دیدید ما خصوصیت type="text/javascript" داخل تگ <script> را نادیده گرفتیم. چراکه در HTML5 نیازی به آن نیست. جاوااسکریپت در HTML5 و تمام مرورگرهای مدرن بصورت پیش فرض یک زبان اسکریپتی است.

 

اینکلود جی کوئری از CDN

اگر نمی خواهید jQuery را دانلود کنید پس به جای روش بالا, می توانید jQuery را در داخل سند خود به راحتی توسط لینک های رایگان CDN (Content Delivery Network) اینکلود کنید.

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

همچنین مزیت دیگری که دارد این است که اگر بازدیدکننده صفحه وب شما قبلا یک کپی از jQuery را از همان CDN در وبسایت دیگری را مشاهده کنید دیگر دانلود انجام نمی شود چرا که از قبل در کش مرورگر ثبت شده

 

CDN جی کوئری از MaxCDN

همچنین می توانید جی کوئری را از CDN های گوگل و مایکروسافت دریافت کنید.

 

ساخت اولین صفحه دارای jQuery

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

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

در مثال بالا, ما عملیات تغییر رنگ المان <h1> را توسط سلکتور jQuery و متد css() در زمانی که سند با رویداد ready آماده بود.

در مورد سلکتورهای جی کوئری, متد و رویدادها در بخش های بعدی آموزش جی کوئری یاد می گیریم.

 

امیدوارم در این بخش آموزش جی کوئری , از شروع کدنویسی جی کوئری نهایت استفاده را برده باشید.

در بخش بعدی با شکل نوشتاری (سینتکس) جی کوئری آشنا می شوید.

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

موفق باشید.

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم. توصیه من: هاست میهن وب‎هاست
دیدگاه کاربران

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دوره های آموزشی