آموزش jQuery به زبان ساده – راهنمای گام به گام برای مبتدی‌ها

۱. مقدمه: jQuery چیست و چرا یاد بگیرم؟

jQuery یه کتابخونه جاوااسکریپتیه (JavaScript Library) که بهت کمک می‌کنه با کدنویسی کمتر، خیلی راحت‌تر با المنت‌های صفحه وب کار کنی، افکت بزنی، انیمیشن درست کنی، و حتی به سادگی به سرور درخواست بفرستی (آژاکس).

چرا jQuery محبوب شد؟

• ساده‌سازی کدهای جاوااسکریپت (دیگه خبری از کدهای گیج‌کننده نیست!)
• پشتیبانی از مرورگرهای مختلف (مشکلات cross-browser رو برات حل می‌کنه)
• کلی پلاگین آماده (مثلاً اسلایدر، مودال، تب و …)

امروزه هنوز لازمه؟
در حالی که ابزارهای جدیدی مثل React و Vue محبوب شدن، اما توی پروژه‌های ساده و حتی بعضی پروژه‌های بزرگ قدیمی، هنوز jQuery کاربرد داره و یاد گرفتنش به فهم بهتر جاوااسکریپت هم کمک می‌کنه.

---

۲. نحوه اضافه کردن jQuery به سایت

دو روش ساده وجود داره:

۲.۱ روش CDN (پیشنهادی و سریع)

یک خط کد زیر رو قبل از تگ </body> بذار:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

۲.۲ دانلود و استفاده از فایل

فایل jQuery رو از سایت jquery.com دانلود کن و داخل پوشه پروژه قرار بده:

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

---

۳. سینتکس اولیه jQuery

جمله معروف:
هرچیزی که توی جاوااسکریپت واسه کار با DOM بنویسی، تو jQuery خیلی کوتاه‌تر و راحت‌تره.
پایه‌ترین ساختار jQuery این شکلیه:

$(selector).action();

مثال: مخفی کردن یک المان با آی‌دی test

$("#test").hide();

تفاوت با جاوااسکریپت خام:

• Vanilla JS:

  document.getElementById("test").style.display = "none";

• jQuery:

  $("#test").hide();

---

۴. کار با المنت‌ها (انتخاب و تغییر)

۴.۱ انتخاب المنت (Selectors)

• انتخاب بر اساس ID:

  $("#myElement")

• انتخاب بر اساس کلاس:

  $(".myClass")

• انتخاب همه ها:

  $("p")

۴.۲ تغییر متن و HTML

• تغییر متن:

  $("#demo").text("سلام دوست من!");

• تغییر HTML داخل المنت:

  $("#demo").html("<b>سلام!</b>");

• تغییر ویژگی (attribute):

  $("#myImg").attr("src", "new-image.jpg");

---

۵. افکت‌ها و انیمیشن‌های ساده

خیلی راحت می‌تونی به المنت‌ها افکت بدی:

$("#box").hide();      // مخفی کردن
$("#box").show();      // نمایش
$("#box").toggle();    // بین حالت مخفی و نمایش سوییچ می‌کنه
$("#box").fadeIn();    // ظاهر شدن تدریجی
$("#box").fadeOut();   // محو شدن تدریجی
$("#box").slideUp();   // جمع شدن به بالا
$("#box").slideDown(); // باز شدن به پایین

---

۶. کار با رویدادها (Events)

معمول‌ترین رویدادها: کلیک، تغییر، موس و …

• رویداد کلیک:

  $("#btn").click(function(){
    alert("دکمه کلیک شد!");
  });

• رویداد تغییر مقدار (input, select، …):

  $("#myInput").change(function(){
    alert("مقدار تغییر کرد");
  });

• رویداد hover (موس رفت و آمد):

  $("#box").hover(
    function(){ $(this).css("background","yellow"); },
    function(){ $(this).css("background",""); }
  );

---

۷. آژاکس در jQuery (ارسال و دریافت داده)

آژاکس یعنی بدون رفرش کردن صفحه، از سرور داده بخون یا بفرست.

نمونه ساده با jQuery:

$.get("data.txt", function(data){
  $("#result").text(data);
});

یا ارسال داده:

$.post("save.php", {username: "ali"}, function(response){
  alert("ثبت شد: " + response);
});

---

۸. نکته و بهترین تمرین‌ها

• همیشه کدهای jQuery رو تو یه تابع اینطوری بنویس که وقتی صفحه کامل لود شد اجرا شه:

  $(document).ready(function(){
    // همه کدهات اینجا باشه!
  });

• در پروژه‌های خیلی بزرگ و جدید شاید لازم باشه به جای jQuery سراغ فریم‌ورک‌های جدیدتر بری، ولی برای پروژه‌های ساده هنوز خیلی کاربردیه.

---

۹. جمع‌بندی و سوالات پرتکرار

jQuery هنوز یاد بگیرم؟
بله، چون توی خیلی از پروژه‌ها کاربرد داره، کد رو مختصر می‌کنه و فهم اولیه خوبیه برای کار با DOM و رویدادها.

آیا استفاده از jQuery سرعت سایت رو کند می‌کنه؟
در پروژه‌های کوچک یا زمانی‌که نیاز به چند خط کد داری، تأثیر زیادی روی سرعت نداره.

چطور بفهمم سایت من jQuery داره یا نه؟
در Console کروم این کد رو وارد کن:

!!window.jQuery

اگه true برگشت، یعنی jQuery لود شده.

---

۱۰. کلمات کلیدی پیشنهادی برای SEO

• آموزش jQuery
• jQuery چیست
• دستورهای jQuery
• تفاوت jQuery و جاوااسکریپت
• مثال عملی jQuery
• شروع سریع jQuery