سبد (0)

برگرداندن محتوای عناصر در jQuery

در jQuery متدهای قدرتمندی برای تغییر و دستکاری عناصر HTML وجود دارد.


دستکاری عناصر HTML با توجه به مدل DOM

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

lamp

مدل DOM یا (Document Object Model)

در مدل DOM استانداردهایی برای دسترسی به محتوای سندهای HTML و XML تعریف شده است.
زمانی که یک صفحه ی وب بارگذاری می شود، مرورگر از آن صفحه، یک مدل شیء گرا (Document Object Model) ایجاد می کند.
مدل DOM یک ساختار درختی از اشیاء موجود در صفحه HTML می سازد:

DOM HTML tree


دستکاری محتوای عناصر HTML

در jQuery، سه متد ساده، اما کاربردی برای دستکاری محتوای عناصر HTML وجود دارد:

  • ()text - محتوای عنصر/عناصر انتخاب شده را تنظیم یا برمی گرداند.
  • ()html - محتوای عنصر/عناصر انتخاب شده را تنظیم یا برمی گرداند. (همراه با تگ های HTML)
  • ()val - محتوای فیلد/فیلدهای انتخاب شده داخل یک فرم را تنظیم یا برمی گرداند.

در مثال زیر، محتوای عنصر با شناسه "test" را به صورت جداگانه با استفاده از متدهای ()text و ()html نمایش داده ایم:

مثال (برگرداندن محتوای عناصر در jQuery)

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});
خودتان امتحان کنید »

در مثال زیر، با استفاده از متد ()val، محتوای فیلد input با شناسه "test" با کلیک روی دکمه نمایش داده می شود:

مثال (برگرداندن محتوای عناصر در jQuery)

$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});
خودتان امتحان کنید »

برگرداندن مقدار یک خصوصیت

متد ()attr در jQuery مقدار یک خصوصیت را برمی گرداند.

در مثال زیر، مقدار خصوصیت href در تگ <a> با شناسه "w3s" با کلیک روی دکمه، نمایش داده می شود:

مثال (برگرداندن محتوای عناصر در jQuery)

$("button").click(function(){
  alert($("#w3s").attr("href"));
});
خودتان امتحان کنید »

در مطالب بعدی، درباره ی تغییر محتوی عناصر HTML و تنظیم یک خصوصیت برای آنها توضیح داده خواهد شد.

jQuery HTML Reference

For a complete overview of all jQuery HTML methods, please go to our jQuery HTML/CSS Reference.

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه