آموزش جامع jQuery

📚معرفی و نصب

jQuery یک کتابخانه جاوااسکریپت است که کار با DOM، رویدادها، انیمیشن و AJAX را به شدت ساده می‌کند. شعار آن: "Write less, do more" — کمتر بنویس، بیشتر انجام بده.

نصب

<!-- فایل لوکال — قبل از </body> -->
<script src="jquery.min.js"></script>

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

شروع کار — document.ready

// کد jQuery باید بعد از لود DOM اجرا شود
$(document).ready(function() {
  $("#myBtn").click(function() {
    $("p").text("سلام دنیا!");
  });
});

// نسخه کوتاه‌تر (معادل کامل)
$(function() {
  // کد شما
});

// بررسی نسخه
console.log(jQuery.fn.jquery); // "3.7.1"

🔍انتخابگرها (Selectors)

jQuery از همه سلکتورهای CSS پشتیبانی می‌کند، به اضافه سلکتورهای اختصاصی خودش.

// انتخاب و عملیات زنجیری
$("#myList li").addClass("item").css("color", "#333");

// تعداد عناصر انتخاب‌شده
var count = $("p").length;

// ذخیره در متغیر (بهترین شیوه)
var $btn = $("#myBtn");
$btn.text("کلیک کن");
$btn.addClass("active");

⌨دستکاری DOM

خواندن و نوشتن محتوا

// text — خواندن متن
var t = $("#myDiv").text();

// text — نوشتن (HTML را escape می‌کند)
$("#myDiv").text("متن جدید");

// html — خواندن/نوشتن HTML خام
$("#myDiv").html("<strong>پررنگ</strong>");

// val — مقدار input
var v = $("#myInput").val();
$("#myInput").val("مقدار جدید");

// attr — attribute
$("#myLink").attr("href", "https://example.com");

// css — استایل
$("#myDiv").css({ color: "red", fontSize: "18px" });

// addClass / removeClass / toggleClass
$("#myDiv").addClass("active");
$("#myDiv").toggleClass("highlight");

اضافه/حذف عناصر

// اضافه به انتها / ابتدا
$("#myList").append("<li>آیتم جدید</li>");
$("#myList").prepend("<li>اول</li>");

// قبل / بعد از عنصر
$("#myDiv").after("<p>بعدی</p>");
$("#myDiv").before("<p>قبلی</p>");

// حذف
$("#myDiv").remove();       // حذف کامل
$("#myDiv").empty();        // خالی کردن محتوا
$("#myDiv").detach();      // حذف موقت (رویداد حفظ می‌شود)

⚡رویدادها (Events)

// click
$("#btn").click(function() {
  console.log("کلیک شد");
});

// on — روش مدرن (توصیه‌شده)
$("#btn").on("click", function(e) {
  e.preventDefault();
  console.log("target:", e.target);
});

// Event Delegation — برای عناصر پویا
$("#myList").on("click", "li", function() {
  $(this).toggleClass("selected");
});

// hover
$("#box").hover(
  function() { $(this).addClass("hovered"); },   // mouseenter
  function() { $(this).removeClass("hovered"); }  // mouseleave
);

🎬انیمیشن و افکت‌ها

// نمایش با سرعت
$("#box").show(500);     // ms یا "slow"/"fast"

// fade با callback
$("#box").fadeOut(800, function() {
  console.log("محو شد");
});

// انیمیشن سفارشی
$("#box").animate({
  width:   "200px",
  opacity: 0.5,
  marginLeft: "50px"
}, 800, "swing");

// زنجیره انیمیشن‌ها
$("#box")
  .fadeOut(400)
  .delay(300)
  .fadeIn(400);

🌐AJAX

jQuery فرآیند ارتباط با سرور (بدون reload صفحه) را بسیار ساده می‌کند.

// $.ajax — کامل‌ترین روش
$.ajax({
  url:      "/api/users",
  type:     "GET",
  dataType: "json",
  data:     { page: 1, limit: 10 },

  success: function(data) {
    console.log("موفق:", data);
  },
  error: function(xhr, status, err) {
    console.error("خطا:", err);
  },
  complete: function() {
    console.log("تمام شد");
  }
});

// $.get / $.post — کوتاه‌تر
$.get("/api/data", function(data) {
  $("#result").html(data);
});

$.post("/api/save", { name: "علی", age: 25 })
  .done(function(res) { console.log(res); })
  .fail(function(err) { console.error(err); });

// $.getJSON — دریافت JSON مستقیم
$.getJSON("https://jsonplaceholder.typicode.com/posts/1")
  .done(function(data) {
    console.log(data.title);
  });

// تنظیم پیش‌فرض‌های Ajax
$.ajaxSetup({
  headers: { "X-CSRF-Token": "token_here" }
});

📈Traversal و فیلتر

حرکت بین عناصر DOM و فیلتر کردن مجموعه‌های انتخاب‌شده:

// حرکت در درخت DOM
$("#item").parent();         // پدر مستقیم
$("#item").parents("div");   // همه اجداد div
$("#list").children();        // فرزندان مستقیم
$("#list").children("li");   // فقط li‌های فرزند
$("#item").siblings();        // خواهر/برادرها
$("#item").next();            // عنصر بعدی
$("#item").prev();            // عنصر قبلی
$("#item").closest("form");  // نزدیک‌ترین form جد
$("#item").find("span");      // همه span‌های زیرمجموعه

// فیلتر
$("li").filter(".active");        // فقط li‌های active
$("li").not(".disabled");         // بجز disabled
$("li").first();                   // اولی
$("li").last();                    // آخری
$("li").eq(2);                     // ایندکس 2 (سومی)
$("li").slice(1, 3);              // ایندکس 1 تا 2

// each — حلقه روی عناصر
$("li").each(function(index, el) {
  console.log(index, $(this).text());
});

🔌افزونه‌سازی (Plugins)

jQuery امکان ساخت متدهای سفارشی و بسته‌بندی آن‌ها به‌عنوان پلاگین را می‌دهد.

// افزونه ساده
jQuery.fn.redText = function() {
  return this.css("color", "red");  // برگرداندن this برای chaining
};
$("p").redText();  // استفاده

// افزونه با تنظیمات (options)
jQuery.fn.highlight = function(options) {
  var defaults = { color: "yellow", duration: 300 };
  var settings = $.extend(defaults, options);  // merge

  return this.each(function() {
    $(this).animate({ backgroundColor: settings.color }, settings.duration);
  });
};

// استفاده
$(".title").highlight({ color: "#ffeb3b" });

// $.extend — ادغام objectها
var result = $.extend({}, defaults, userOptions);

// $.each — حلقه روی آرایه/object
$.each([1, 2, 3], function(i, val) {
  console.log(i, val);
});

🔥بهترین شیوه‌ها

۱. ذخیره سلکتور در متغیر

// ✗ بد — هر بار DOM جستجو می‌شود
$("#btn").text("متن");
$("#btn").css("color", "red");

// ✓ خوب — یک بار جستجو
var $btn = $("#btn");
$btn.text("متن").css("color", "red");  // chaining

۲. Event Delegation برای عناصر پویا

// ✗ بد — روی عناصری که بعداً اضافه می‌شوند کار نمی‌کند
$(".dynamic-btn").click(function() { });

// ✓ خوب — delegation روی پدر ثابت
$("#container").on("click", ".dynamic-btn", function() { });

۳. جلوگیری از تضاد $

jQuery.noConflict();
jQuery(function($) {
  // اینجا $ همان jQuery است
  $("#btn").click(function() {});
});

۴. جدول مقایسه jQuery در برابر Vanilla JS

🏆پروژه کامل — فرم پویا

ترکیب رویداد + DOM + اعتبارسنجی + انیمیشن در یک فرم واقعی:

// اعتبارسنجی فرم با jQuery
$("#contactForm").on("submit", function(e) {
  e.preventDefault();
  var name  = $("#fname").val().trim();
  var email = $("#femail").val().trim();

  if (!name || !email) {
    $("#msg").addClass("err").text("همه فیلدها الزامی هستند").show();
    return;
  }
  // ارسال موفق
  $("#msg").removeClass("err").addClass("ok").text("ارسال شد ✓").hide().fadeIn(400);
});

🚀زمین بازی کد (Playground)

کد را همین‌جا ویرایش کن و نتیجه را زنده ببین. یک مثال را از منوی بالا انتخاب کن، تب‌های HTML و JS را تغییر بده، و دکمهٔ ▶ اجرا را بزن (یا فقط تایپ کن تا خودکار اجرا شود). از console.log() برای دیدن خروجی در پایین استفاده کن.