با بخش دوم از سری آموزش جی کوئری در خدمت شما عزیزان هستیم. در اینجا قصد داریم به شما نحوه افزودن کتابخانه jQuery به صفحه وب را آموزش بدیم.
دانلود جی کوئری (jQuery)
برای شروع, ابتدا یک کپی از جی کوئری را دانلود و داخل سند خود اضافه کنید. دو نسخه مختلف از جی کوئری برای دانلود در دسترس است – compressed (فشرده شده) و uncompressed (غیرفشرده)
فایل غیرفشرده برای حالت دیباگ و توسعه عالی است در حای که نسخه فشرده و کم حجم شده برای حالت نهایی پروژه پیشنهاد می شود چرا که به علت حجم بسیار کم, پهنای باند کمتری از سرور را می گیرید و سرعت لود پروژه نیز افزایش می یابد.
می توانید جی کوئری را از اینجا دانلود کنید : https://jquery.com/download
همین که فایل jQuery را دانلود کردید یک فایل با پسوند .js خواهید داشت چرا که فقط یک کتابخانه جاوااسکریپت است بنابراین می تاونید همانند دیگر فایل های جاوااسکریپت, آن را داخل سند HTML با المان <script> اینکلود کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Simple HTML Document</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <script src="js/jquery-1.11.3.min.js"></script> </head> <body> <h1>Hello, World!</h1> </body> </html> |
همیشه فایل جی کوئری را قبل از اسکریپت های سفارشی خود لود کنید چرا که اگر در کدهای سفارشی خود از متدهای جی کوئری استفاده کرده باشید باید از قبل در صفحه لود شده باشند.
نکته: همانطور که دیدید ما خصوصیت type="text/javascript" داخل تگ <script> را نادیده گرفتیم. چراکه در HTML5 نیازی به آن نیست. جاوااسکریپت در HTML5 و تمام مرورگرهای مدرن بصورت پیش فرض یک زبان اسکریپتی است.
اینکلود جی کوئری از CDN
اگر نمی خواهید jQuery را دانلود کنید پس به جای روش بالا, می توانید jQuery را در داخل سند خود به راحتی توسط لینک های رایگان CDN (Content Delivery Network) اینکلود کنید.
CDN ها ویژگی که دارند این است که با کاهش زمان لود, عملکرد را افزایش می دهند چرا که اسکریپت مورد نظر را روی چندین سرور مختلف لود می کنند بنابراین هنگام درخواست کاربر یا همان بازدید از صفحه, از نزدیکترین سرور از لحاظ مکانی به کاربر, اسکریپت را لود می کند.
همچنین مزیت دیگری که دارد این است که اگر بازدیدکننده صفحه وب شما قبلا یک کپی از jQuery را از همان CDN در وبسایت دیگری را مشاهده کنید دیگر دانلود انجام نمی شود چرا که از قبل در کش مرورگر ثبت شده
CDN جی کوئری از MaxCDN
|
1 |
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> |
همچنین می توانید جی کوئری را از CDN های گوگل و مایکروسافت دریافت کنید.
ساخت اولین صفحه دارای jQuery
از آنجا که هدف استفاده از کتابخانه جی کوئری و نحوه استفاده از آن در سند خود را یادگیرفتید زمان آن است که بصورت واقعی از آن استفاده کنیم.
در این بخش, ما یک عملیات ساده جی کوئری را با تغییر رنگ هدینگ از پیش فرض سیاه به قرمز را انجام می دهیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My First jQuery Powered Web Page</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <script src="js/jquery-1.11.3.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("h1").css("color", "#0088ff"); }); </script> </head> <body> <h1>Hello, World!</h1> </body> </html> |
در مثال بالا, ما عملیات تغییر رنگ المان <h1> را توسط سلکتور jQuery و متد css() در زمانی که سند با رویداد ready آماده بود.
در مورد سلکتورهای جی کوئری, متد و رویدادها در بخش های بعدی آموزش جی کوئری یاد می گیریم.
امیدوارم در این بخش آموزش جی کوئری , از شروع کدنویسی جی کوئری نهایت استفاده را برده باشید.
در بخش بعدی با شکل نوشتاری (سینتکس) جی کوئری آشنا می شوید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.
