آموزش صفر تا صد جی کوئری (فیلم+دانلود رایگان PDF)

رتبه: 4 ار 2 رای SSSSs

نویسنده: سریع آسان زمان مطالعه 9 دقیقه آخرین بروزرسانی: ۱۴۰۵/۰۵/۱۸

بعد از حدود ۱ هفته گشت و گذار در اینترنت و از بین هزاران ویدیو، یک مجموعه بی نقص و کامل ویدیویی را برای یادگیری سریع jQuery گلچین کرده ایم. این مجموعه کامل برای شروع از صفر و برای همه سطوح مناسب می باشد. بعد از آن نیز بهترین جزوه PDF فارسی موجود در اینترنت را جهت تکمیل یادگیری می توانید دانلود کنید.

توضیحاتی راجع به jQuery (و مفاهیم مهم-همین ها رو یاد بگیرین نصف راه رو رفتین)

جِی‌کوئری (به انگلیسی: jQuery) یک کتابخانه جاوا اسکریپت سبک‌وزنِ چند مرورگری است که برای ساده سازیِ نوشتنِ اسکریپ‌ هایِ سمت-مشتری یا به عبارتی سمت Client، در صفحات وب طراحی شده و امروزه محبوب‌ترین کتابخانهٔ جاوااسکریپتِ در حال استفاده است.

jQuery یک کتابخانه JavaScript است که کارهایی مانند انتخاب عناصر HTML، تغییر DOM، مدیریت رویدادها، افکت‌های ساده و درخواست‌های Ajax را با دستورات کوتاه‌تر انجام می‌دهد. سایت رسمی jQuery نیز کاربردهای اصلی آن را DOM manipulation، event handling، animation و Ajax معرفی می‌کند.

در سال ۲۰۲۶ نسخه پایدار اصلی jQuery 4.0.0 است که در ۱۷ ژانویه ۲۰۲۶ منتشر شد. این نسخه بخشی از APIهای قدیمی را حذف کرده و پشتیبانی از مرورگرهای بسیار قدیمی نیز کاهش یافته است.

مسیر مناسب یادگیری:

HTML/CSS → JavaScript مقدماتی → افزودن jQuery → Selector → Event → DOM → CSS/Class → Form → Effects → Ajax

قبل از jQuery چه چیزهایی باید بلد باشیم؟

jQuery جای JavaScript را نمی‌گیرد؛ خودش با JavaScript ساخته شده است. بنابراین قبل از شروع بهتر است حداقل با متغیر، Function، Array، Object، شرط، حلقه و DOM در JavaScript آشنایی اولیه داشته باشید. مثلاً این JavaScript:

document.querySelector("#title").textContent = "Hello";

در jQuery می‌تواند به شکل کوتاه‌تری نوشته شود:

$("#title").text("Hello");

هدف اصلی jQuery ساده‌ترکردن بسیاری از عملیات رایج JavaScript است.

روش اول افزودن jQuery با CDN

ساده‌ترین روش برای یک پروژه HTML معمولی استفاده از CDN است. فایل HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery Test</title>
</head>
<body>

    <h1 id="title">Hello</h1>

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

    <script>
        $("#title").text("Hello jQuery");
    </script>

</body>
</html>

سایت رسمی jQuery فایل‌های نسخه فشرده و Development را از CDN رسمی ارائه می‌کند. فایل فشرده برای Production مناسب‌تر است، در حالی که نسخه Uncompressed برای توسعه و Debugging خواناتر است.

نکته مهم این است که فایل jQuery باید قبل از کدی که از $ استفاده می‌کند بارگذاری شود. این ترتیب اشتباه است:

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

اگر app.js از jQuery استفاده کند، هنگام اجرای آن هنوز jQuery بارگذاری نشده است.

روش دوم دانلود فایل jQuery

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

my-project
│
├── index.html
├── css
│   └── style.css
│
└── js
    ├── jquery-4.0.0.min.js
    └── app.js

سپس:

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

مزیت این روش این است که سایت برای بارگذاری jQuery وابسته به CDN نیست.

افزودن jQuery با npm

در پروژه‌هایی که از Node.js و ابزارهای Build استفاده می‌کنند، می‌توان jQuery را با npm نصب کرد:

npm install jquery

jQuery رسماً از طریق npm نیز منتشر می‌شود. برای پروژه HTML ساده، CDN معمولاً راحت‌ترین روش آموزشی است.

علامت $ چیست؟

در jQuery بسیار زیاد با:

مواجه می‌شوید. $ در واقع نام کوتاه‌شده تابع اصلی jQuery است. مثلاً:

$("#title")

تقریباً یعنی: عنصری را که id آن title است پیدا کن و یک jQuery Object از آن بساز. jQuery تابع اصلی خود را برای پیدا کردن مجموعه‌ای از عناصر DOM براساس Selector ارائه می‌کند.

Selector مهم‌ترین مفهوم jQuery

Selector مشخص می‌کند روی کدام عنصر HTML کار کنیم. فرض کنید HTML زیر را داریم:

<h1 id="title">فروشگاه</h1>

<p class="description">توضیحات اول</p>
<p class="description">توضیحات دوم</p>

<button>خرید</button>

انتخاب با ID:

$("#title")

انتخاب با Class:

$(".description")

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

$("button")

Selectorهای jQuery شباهت زیادی به Selectorهای CSS دارند. برای مثال Selector کلاس تمام عناصری را که آن کلاس را داشته باشند انتخاب می‌کند.

اجرای کد بعد از آماده‌شدن صفحه

یکی از الگوهای معروف jQuery:

$(document).ready(function () {

    // کدهای jQuery

});

فرم کوتاه‌تر:

$(function () {

    // کد

});

این کار باعث می‌شود کد بعد از آماده‌شدن DOM اجرا شود. مثلاً:

$(function () {
    $("#title").text("سایت آماده شد");
});

قرار دادن فایل JavaScript در انتهای body نیز در بسیاری از پروژه‌های مدرن مفید است.

تغییر متن با text

فرض کنید:

<h2 id="message">متن قبلی</h2>

می‌توانیم بنویسیم:

$("#message").text("متن جدید");

برای دریافت متن:

let text = $("#message").text();

پس بسیاری از Methodهای jQuery هم برای خواندن و هم برای تغییر اطلاعات کاربرد دارند.

تفاوت text و html

text() متن ساده را مدیریت می‌کند. مثلاً:

$("#box").text("<b>Hello</b>");

تگ HTML به‌عنوان متن دیده می‌شود. اما:

$("#box").html("<b>Hello</b>");

باعث می‌شود Hello به‌صورت Bold نمایش داده شود. هنگام استفاده از html() برای اطلاعاتی که از کاربر یا منابع ناشناس دریافت شده‌اند باید مسائل امنیتی را جدی بگیرید و HTML غیرقابل اعتماد را مستقیم وارد صفحه نکنید.

تغییر CSS

می‌توانیم CSS یک عنصر را نیز تغییر دهیم:

$("#title").css("color", "red");

یا چند Property:

$("#title").css({
    "font-size": "30px",
    "background-color": "yellow"
});

اما در پروژه واقعی معمولاً بهتر است CSS در فایل CSS باقی بماند و JavaScript بیشتر کلاس‌ها را تغییر دهد.

کار با Class

فرض کنید CSS داریم:

.active {
    background: green;
    color: white;
}

در jQuery:

$("#box").addClass("active");

حذف:

$("#box").removeClass("active");

تغییر بین داشتن و نداشتن کلاس:

$("#box").toggleClass("active");

این روش معمولاً از تغییر مستقیم تعداد زیادی Property با .css() تمیزتر است.

Event یا رویداد

یکی از کاربردهای مهم jQuery واکنش به رفتار کاربر است. مثلاً کلیک روی Button:

<button id="btn">کلیک کنید</button>

jQuery:

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

متد .on() روش اصلی اتصال Event Handler به عناصر انتخاب‌شده است. رویدادهای رایج شامل click، dblclick، change، submit، keydown و mouseenter هستند.

this در Event

فرض کنید چند Button داریم:

<button class="item">A</button>
<button class="item">B</button>
<button class="item">C</button>

می‌توانیم بنویسیم:

$(".item").on("click", function () {
    $(this).hide();
});

this همان عنصری است که Event روی آن اتفاق افتاده است. با:

$(this)

جاوا، جاوا اسکریپت رو قورت بده! بدون کلاس، سرعت 2 برابر، ماندگاری 3 برابر، پولسازی عالی با توسعه وب، ماشین لرنینگ و ... کتابخانه های پیشرفته جاوا اسکریپت و ... دانلود:

پک کامل جاوا اسکریپت پک آموزش Node.js پک React.js

پک کامل جاوا

پک مبانی برنامه نویسی (اختیاری-مکمل)

آن را به jQuery Object تبدیل می‌کنیم.

جلوگیری از رفتار پیش‌فرض

فرض کنید یک Form داریم.

گاهی می‌خواهیم ارسال معمولی فرم انجام نشود:

$("#myForm").on("submit", function (event) {

    event.preventDefault();

    alert("فرم بررسی شد");

});

preventDefault() رفتار پیش‌فرض Browser برای Event را متوقف می‌کند. این قابلیت هنگام فرم‌ها و Ajax بسیار کاربردی است.

دریافت مقدار Input

HTML:

<input type="text" id="name">
<button id="show">نمایش</button>

jQuery:

$("#show").on("click", function () {

    let name = $("#name").val();

    alert(name);

});

برای Inputها معمولاً از:

.val()

استفاده می‌شود. همچنین می‌توان مقدار را تغییر داد:

$("#name").val("Ali");

کار با Attribute

فرض کنید:

<img id="photo" src="old.jpg">

می‌توانیم مقدار src را دریافت کنیم:

let image = $("#photo").attr("src");

یا تغییر دهیم:

$("#photo").attr("src", "new.jpg");

از attr() برای Attributeهایی مانند src، href، title و موارد مشابه استفاده می‌شود.

اضافه و حذف عناصر HTML

jQuery برای تغییر DOM Methodهای مختلفی دارد. مثلاً:

$("#list").append("<li>محصول جدید</li>");

عنصر را در انتهای محتوا اضافه می‌کند.همچنین:

$("#list").prepend("<li>محصول اول</li>");

در ابتدا اضافه می‌کند. برای حذف:

$("#item").remove();

بنابراین می‌توان محتوای صفحه را بدون Reload کامل تغییر داد.

پیمایش DOM

گاهی یک عنصر را داریم و می‌خواهیم عناصر مرتبط با آن را پیدا کنیم. مثلاً:

$("#menu").find("a")

تمام Linkهای داخل #menu را پیدا می‌کند.متد .find() در Descendantهای عناصر انتخاب‌شده جستجو می‌کند.Methodهای مهم دیگری مانند:

parent()
children()
siblings()
first()
last()

نیز برای حرکت در ساختار DOM استفاده می‌شوند.

افکت‌های ساده

jQuery افکت‌های آماده‌ای نیز دارد. مثلاً:

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

نمایش:

$("#box").show();

تغییر بین نمایش و مخفی:

$("#box").toggle();

همچنین:

$("#box").fadeIn();
$("#box").fadeOut();
$("#box").slideUp();
$("#box").slideDown();

نسخه Slim جQuery ماژول‌های Ajax و Effects را ندارد؛ بنابراین اگر قصد استفاده از این قابلیت‌ها را دارید باید Full Build را انتخاب کنید.

Ajax در jQuery

Ajax اجازه می‌دهد بدون Reload کامل صفحه با Server ارتباط برقرار کنیم. مثلاً:

$.ajax({
    url: "/api/products",
    method: "GET",

    success: function (data) {
        console.log(data);
    },

    error: function () {
        console.log("خطا در دریافت اطلاعات");
    }
});

$.ajax() برای اجرای درخواست HTTP غیرهمزمان استفاده می‌شود.

Ajax در پروژه‌هایی که Backendهایی مانند Laravel، ASP.NET Core، PHP یا Node.js دارند بسیار کاربردی است.

مثلاً:

کاربر روی «نمایش محصولات» کلیک می‌کند → jQuery درخواست API می‌فرستد → Server اطلاعات را برمی‌گرداند → jQuery محصولات را بدون Refresh صفحه نمایش می‌دهد.

موارد آموزش داده شده در این پکیج

جی کوئری چیست؟
کاربردها و مبانی اصلی
معرفی محیط جی کوئری
رویداد Document Ready
معرفی و کد نویسی Window Load & Window Unload
Selectors
و …

نمونه آموزش

دانلود آموزش اول

دانلود فیلم های این پکیج

دانلود جزوه PDF

حجم: ۵۵۰ مگابایت

سطح: از صفر تا صد

نسخه آموزش داده شده: مناسب برای همه نسخه ها

به دنبال یادگیری سریع تر، حرفه ای تر، کامل تر و با کیفیت فول اچ دی هستید؟ بهترین پکیج آموزش جی کوئری موجود در ایران را ببینید!

دانلود آموزش دوم

اگر به هر دلیلی اموزش اول (شماره 4) را دوست نداشتید یا با متد آموزش راحت نبودید می توانید از این آموزش استفاده کنید یا هر دو را باهم. این آموزش از پیج گرفته شده است. به شخصه پیشنهاد میکنم آموزش اول را حتما دانلود و استفاده کنید و بعد بیاین سراغ این آموزش چون این آموزش در 3 جلسه 20 دقیقه ای، دستورات و موارد گفته شده در آموزش اول رو بصورت پروژه ای کار میکنه و موارد اصول اولیه که در اموزش اول گفته شده رو نداره و فقط برای تکمیل یادگیری:
جلسه اول

جلسه دوم

جلسه سوم

Selector → Event → val → if → DOM Manipulation

مسیر پیشنهادی یادگیری

برای شروع، این ترتیب مناسب است:

JavaScript پایه → افزودن jQuery → $() و Selector → Document Ready → text/html/val → CSS و Class → Event → DOM Manipulation → Traversing → Form → Effects → Ajax

بعد از تسلط بر این موارد، یادگیری JavaScript مدرن را ادامه دهید.

jQuery هنوز کتابخانه‌ای فعال است و jQuery 4.0 در سال ۲۰۲۶ منتشر شده، اما بسیاری از قابلیت‌هایی که زمانی دلیل اصلی استفاده از jQuery بودند اکنون با JavaScript و Web APIهای مدرن نیز قابل انجام هستند. خود jQuery 4 نیز تعدادی از APIهای قدیمی را به دلیل وجود جایگزین‌های استاندارد JavaScript حذف کرده است.

جمع‌بندی

برای یادگیری jQuery ابتدا این منطق را در ذهن داشته باشید:

Select → Event → Read/Change → DOM → Ajax

مثلاً:

$("#button").on("click", function () {
    $("#message").text("Hello jQuery");
});

همین چند خط تقریباً فلسفه اصلی jQuery را نشان می‌دهد:

یک عنصر را انتخاب کن → منتظر یک اتفاق باش → عنصر دیگری را تغییر بده.

اگر بتوانید عناصر HTML را با Selector پیدا کنید، Eventها را مدیریت کنید، متن و Classها را تغییر دهید، عناصر جدید به DOM اضافه کنید، مقادیر Form را بخوانید و یک درخواست Ajax ساده بفرستید، بخش اصلی jQuery را یاد گرفته‌اید.

برای پروژه جدید، یادگیری JavaScript مدرن را در اولویت بالاتر قرار دهید و jQuery را به‌عنوان مهارتی مکمل یاد بگیرید؛ مخصوصاً چون هنوز در بسیاری از سایت‌ها، قالب‌ها، CMSها و پروژه‌های قدیمی‌تر با آن روبه‌رو خواهید شد

برچسب : برنامه نویسی جی کوئری