📌jQuery چیست؟

۱. از طریق CDN (پیشنهادی )

بهترین و ساده‌ترین روش استفاده از jQuery، لینک دادن به نسخه‌ی آنلاین آن است.

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

۲. دانلود و اضافه کردن به پروژه

می‌توانید فایل jQuery را از سایت رسمی jQuery دانلود کرده و در پروژه خود قرار دهید. سپس لینک زیر را در HTML اضافه کنید:

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

۳. انتخاب عناصر در jQuery 

یکی از مهم‌ترین قابلیت‌های jQuery، انتخاب سریع و ساده عناصر HTML است.

 انتخاب بر اساس نام تگ:

$("p").hide(); // مخفی کردن تمام تگ‌های <p>

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

$(".box").fadeOut(); // محو کردن تمام عناصر با کلاس "box"

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

$("#header").css("color", "red"); // تغییر رنگ متن عنصر با ID "header" به قرمز

۴. رویدادها در jQuery 

با jQuery می‌توان به راحتی به رویدادهای مختلف مانند کلیک، تغییر، هاور و دابل کلیک پاسخ داد.

 رویداد کلیک:

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

 رویداد هاور:

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

 رویداد تغییر مقدار ورودی:

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

۵. تغییر CSS و کلاس‌ها 

با jQuery می‌توان استایل‌های عناصر را تغییر داد یا کلاس‌های جدید اضافه و حذف کرد.

 تغییر مستقیم استایل:

$("h1").css("color", "blue"); // تغییر رنگ عنوان‌ها به آبی

 اضافه کردن کلاس جدید:

$("p").addClass("highlight"); // اضافه کردن کلاس "highlight" به همه پاراگراف‌ها

 حذف کلاس:

$("p").removeClass("highlight"); // حذف کلاس از پاراگراف‌ها

۶. انیمیشن و افکت‌ها در jQuery 

jQuery شامل توابعی برای ایجاد انیمیشن‌های زیبا است.

 محو شدن (fadeOut & fadeIn):

$(".box").fadeOut(1000); // محو شدن در ۱ ثانیه
$(".box").fadeIn(1000); // ظاهر شدن در ۱ ثانیه

 اسلاید کردن (slideUp & slideDown):

$("#panel").slideUp(500); // بستن پنل
$("#panel").slideDown(500); // باز کردن پنل

 انیمیشن سفارشی:

$("#box").animate({
    width: "200px",
    opacity: 0.5
}, ۱۰۰۰);

۷. کار با AJAX در jQuery 

با استفاده از AJAX در jQuery، می‌توان داده‌ها را بدون نیاز به رفرش صفحه از سرور دریافت و ارسال کرد.

 ارسال درخواست GET:

$.get("data.json", function(response){
    console.log(response);
});

 ارسال درخواست POST:

$.post("server.php", {name: "Ali", age: 30}, function(response){
    alert("داده ارسال شد: " + response);
});

۸. ایجاد و حذف عناصر HTML 

jQuery به شما این امکان را می‌دهد که عناصر جدید ایجاد کنید یا عناصر موجود را حذف کنید.

 اضافه کردن یک عنصر جدید:

$("ul").append("<li>آیتم جدید</li>");

 حذف یک عنصر:

$(".box").remove();

 پاک کردن محتوای یک عنصر بدون حذف آن:

$("#content").empty();

۹. انتخاب عناصر والد، فرزند و همسایه‌ها 

jQuery دارای متدهایی برای یافتن والدین، فرزندان و عناصر هم‌سطح است.

 انتخاب والد:

$(".child").parent().css("border", "1px solid red");

 انتخاب فرزندان:

$("#container").children().css("background", "lightgray");

 انتخاب همسایه‌ها:

$("#box").next().fadeOut();

۱۰. نکات مهم و بهترین روش‌ها در jQuery 

 از نسخه‌های به‌روز jQuery استفاده کنید.

 برای بهبود عملکرد، از انتخاب‌کننده‌های خاص‌تر استفاده کنید.

 از متدهای زنجیره‌ای برای کاهش کد استفاده کنید.

 برای تغییرات پیچیده DOM، ابتدا عنصر را در متغیر ذخیره کنید.

 از $(document).ready() برای اطمینان از بارگذاری کامل DOM استفاده کنید.

$(document).ready(function(){
    console.log("صفحه کاملاً بارگذاری شد!");
});

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

کاربردهای دیگر jQuery 

 ایجاد گالری تصاویر داینامیک – با استفاده از jQuery می‌توان اسلایدرهای تصویری و گالری‌های حرفه‌ای ساخت.

 ساخت منوهای کشویی (Dropdown) – ایجاد منوهای ناوبری پویا و واکنش‌گرا برای وب‌سایت‌ها.

 اعتبارسنجی فرم‌ها – بررسی صحت ورودی‌های کاربران قبل از ارسال به سرور.

 مدیریت درخواست‌های AJAX – ارسال و دریافت داده از سرور بدون نیاز به رفرش صفحه.

 کنترل تایمرها و شمارش معکوس – ایجاد تایمرهای سفارشی برای نمایش شمارش معکوس یا تأخیر در اجرای دستورات.

 ایجاد جداول داینامیک و مرتب‌سازی داده‌ها – ساخت جدول‌های قابل مرتب‌سازی و جستجو در داده‌های داخل صفحه.

 ساخت چک‌باکس و رادیوباتن‌های تعاملی – بهبود تجربه کاربری در فرم‌ها.

 تشخیص اسکرول صفحه و بارگذاری محتوای بیشتر (Infinite Scroll) – برای نمایش محتوا بدون نیاز به کلیک روی دکمه “بعدی”.

 ایجاد مودال‌ها و پنجره‌های پاپ‌آپ – نمایش پیام‌ها، فرم‌های ورود یا تصاویر به‌صورت پاپ‌آپ.

 کنترل و مدیریت فایل‌های صوتی و تصویری – اجرای و کنترل ویدیوها و صداها با رویدادهای مختلف.