🔰 جی کوئری jQuery چیست؟
جی کوئری jQuery یک کتابخانه محبوب JavaScript است که هدف آن سادهسازی کدنویسی JavaScript مخصوصاً در زمینه:
انتخاب عناصر DOM
اعمال تغییرات در HTML/CSS
مدیریت رویدادها (Events)
انجام AJAX
انیمیشنها
✅ چرا هنوز jQuery مهم است؟
گرچه فریمورکهایی مثل React یا Vue جایگزین آن شدهاند، اما jQuery هنوز در پروژههای قدیمی یا ساده استفاده میشود. همچنین آشنایی با jQuery میتواند توانایی درک کدهای Legacy را افزایش دهد.
🧱 ۱. شروع با jQuery
برای استفاده از jQuery کافی است CDN آن را در HTML بارگذاری کنید:
<script >
و سپس در فایل HTML یا JS بنویسید:
$(document).ready(function () {
// کدهای jQuery اینجا اجرا میشوند
});
یا به شکل کوتاهتر:
$(function () {
// ...
});
🔍 ۲. انتخاب عناصر (Selectors)
jQuery انتخاب عناصر را بسیار ساده کرده:
هدف jQuery معادل JS خام
انتخاب با ID $('#id') document.getElementById('id')
انتخاب با کلاس $('.class') document.querySelectorAll('.class')
انتخاب تگ $('p') document.getElementsByTagName('p')
مثال:
$('#myDiv').hide(); // مخفیکردن یک div با id=myDiv
$('.btn').addClass('active'); // اضافه کردن کلاس به تمام عناصر btn
🧠 ۳. رویدادها (Events)
$('#btn').click(function () {
alert('دکمه کلیک شد');
});
$('#input').on('input', function () {
console.log($(this).val());
});
رویدادهای رایج:
click
hover
change
keydown, keyup
✏️ ۴. تغییر در DOM
$('#box').text('متن جدید'); // فقط متن
$('#box').html('<b>Bold</b>'); // HTML
$('#input').val('سلام'); // مقدار input
اضافه یا حذف عناصر:
$('ul').append('<li>مورد جدید</li>'); // اضافه در انتها
$('ul').prepend('<li>ابتدا</li>'); // اضافه در ابتدا
$('#item').remove(); // حذف عنصر
🎨 ۵. تغییر CSS و کلاسها
$('#box').css('color', 'red'); // تغییر استایل مستقیم
$('#box').addClass('highlight'); // اضافه کردن کلاس
$('#box').removeClass('active'); // حذف کلاس
$('#box').toggleClass('dark'); // تغییر وضعیت کلاس
🌐 ۶. AJAX در jQuery
$.ajax({
url: '/api/data',
method: 'GET',
success: function (data) {
console.log(data);
},
error: function (err) {
console.error('خطا:', err);
}
});
نمونه سادهتر:
$.get('/api/user', function (data) {
console.log(data);
});
$.post('/api/user', { name: 'Ali' }, function (response) {
alert('اطلاعات ارسال شد');
});
🎞️ ۷. انیمیشن
$('#box').hide(500); // مخفیشدن با انیمیشن
$('#box').fadeIn(); // ظاهر شدن تدریجی
$('#box').slideUp(); // جمعشدن به بالا
🧪 سوالات مصاحبهای احتمالی
1. تفاوت $(document).ready() و چیست؟
$(document).ready() زمانی اجرا میشود که DOM آماده باشد.
زمانی اجرا میشود که تمام منابع (تصاویر، CSS...) بارگذاری شده باشند.
2. چطور میتوان یک عنصر جدید به DOM اضافه کرد؟
$('ul').append('<li>جدید</li>');
3. تفاوت بین .text() و .html() چیست؟
.text() فقط متن را تغییر میدهد.
.html() امکان درج HTML دارد.
4. مزایا و معایب jQuery چیست؟
مزایا:
سادهتر کردن کدنویسی
سازگاری با مرورگرها
مستندات قوی
معایب:
سنگین بودن برای پروژههای مدرن
عدم نیاز در پروژههای SPA یا React/Vue
🧠 نکات کلیدی برای مصاحبه
اگر پروژهای با jQuery دیدهای، آماده باش آن را توضیح دهی.
تفاوت بین کد jQuery و JavaScript خام را بدان.
AJAX را خوب بفهم، مخصوصاً اگر به API وصل میشوی.
مفاهیم DOM، رویداد، کلاس، انیمیشن و لود صفحه را کامل بفهم.
✅ نمونه تمرین
ساخت یک Todo List ساده:
<input type="text" id="task">
<button id="add">اضافه</button>
<ul id="list"></ul>
$('#add').click(function () {
const task = $('#task').val();
$('#list').append('<li>' + task + '</li>');
$('#task').val('');
});
