نصب و راه‌اندازی jQuery

افزودن jQuery به صفحه

jQuery یک فایل جاوااسکریپت است (با پسوند .js). برای استفاده از آن در صفحه، باید فایل را به صفحه اضافه کنید. دو روش اصلی وجود دارد:

1. دانلود فایل jQuery و قرار دادن آن در پروژه (روش محلی)
2. استفاده از CDN (شبکه توزیع محتوا) — بدون دانلود فایل

روش ۱: دانلود jQuery

دو نسخه از jQuery برای دانلود موجود است:

مراحل:

1. از سایت jquery.com فایل را دانلود کنید
2. فایل را در پوشه‌ای از پروژه (مثلاً js/) قرار دهید
3. با تگ <script> به صفحه اضافه کنید:

<head>
    <script src="js/jquery-3.7.1.min.js"></script>
</head>

روش ۲: استفاده از CDN (پیشنهادی)

CDNها فایل jQuery را روی سرورهای خودشان نگه می‌دارند. کافی است آدرس آن را در تگ <script> قرار دهید:

<!-- CDN رسمی jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- CDN گوگل -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<!-- CDN مایکروسافت -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

مزایای CDN

• سرعت بالاتر: اگر کاربر قبلاً سایت دیگری را دیده باشد که از همان CDN استفاده می‌کرده، jQuery از کش مرورگرش بارگذاری می‌شود
• کاهش بار سرور: فایل از سرور شما دانلود نمی‌شود
• بدون نیاز به مدیریت فایل: آپدیت و نگهداری فایل با CDN است

مثال fallback

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
    // اگر jQuery از CDN لود نشده بود، نسخه محلی را لود کن
    if (typeof jQuery === "undefined") {
        document.write("<script src=\"js/jquery-3.7.1.min.js\"></script>");
    }
</script>

کدام نسخه را انتخاب کنیم؟

محل قرار دادن تگ script

بهترین روش، قرار دادن تگ <script> در انتهای <body> است تا ابتدا HTML صفحه ساخته شود و سپس اسکریپت‌ها اجرا شوند:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>صفحه من</title>
</head>
<body>
    <h1>سلام دنیا</h1>

    <!-- ابتدا jQuery -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <!-- سپس کد خودتان -->
    <script src="js/my-script.js"></script>
</body>
</html>

بررسی نصب موفق

برای اطمینان از نصب، این کد را اجرا کنید:

if (typeof jQuery !== "undefined") {
    console.log("jQuery نصب شده! نسخه: " + jQuery.fn.jquery);
} else {
    console.log("jQuery نصب نشده است!");
}

جمع‌بندی

• دو روش افزودن jQuery: دانلود محلی یا CDN
• CDN معمولاً انتخاب بهتری است (سرعت، کش، کاهش بار سرور)
• همیشه از نسخه ۳ برای پروژه‌های جدید استفاده کنید
• اسکریپت‌ها را انتهای body و به ترتیب (اول jQuery، بعد کد شما) قرار دهید