ایجاد شده در ۱۲ مرداد ۱۴۰۴
جلسه ششم – دستکاری محتوای عناصر سند (DOM Manipulation)
1. ساختار Get و Set در jQuery
- Get → گرفتن اطلاعات المان‌ها (بدون تغییر دادن آن‌ها) → پارامتر نمی‌گیرد.
- Set → تغییر دادن محتوا یا ویژگی‌های المان‌ها → پارامتر می‌گیرد.
2. متدهای Get
| متد | کاربرد | مثال |
|---|---|---|
| .text() | گرفتن متن ساده (بدون HTML) | $(".test1").text() |
| .html() | گرفتن HTML داخلی المان | $(".test1").html() |
| .val() | گرفتن مقدار value یک input | $(".input").val() |
| .attr('name') | گرفتن مقدار یک ویژگی (Attribute) | $(".input").attr("type") |
3. متدهای Set
| متد | کاربرد | مثال |
|---|---|---|
| .text('new') | تغییر متن ساده | $(".test1").text("goodbye") |
| .html('<i>new</i>') | تغییر HTML داخلی | $(".test1").html("<i>goodbye</i>") |
| .val('new') | تغییر مقدار value | $(".input").val("sara") |
| .attr({key: value}) | تغییر ویژگی‌ها |
$(".input").attr({ type: "password", class: "inputs" // بدون نقطه });
4. نکته مهم (اشتباه رایج)
- در .attr() وقتی کلاس را تغییر می‌دهی:
- ❌ 'class': '.inputs' → اشتباه (چون نقطه فقط در CSS selector استفاده می‌شود)
- ✅ 'class': 'inputs' → درست (اسم کلاس)
5. تمرین جلسه
در این تمرین:
- با کلیک روی .c1:
- نوع input از text به password تغییر می‌کند.
- کلاس آن از input (پس‌زمینه قرمز) به inputs (پس‌زمینه سبز) تغییر می‌کند.
- قبل از کلیک:
- type: text
- پس‌زمینه: قرمز
- بعد از کلیک:
- type: password
- پس‌زمینه: سبز