برگرداندن محتوای عناصر در 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 وجود دارد:

در مثال زیر، محتوای عنصر با شناسه "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.

نوشته شده توسط امیر پهلوان صادق
بازدید: 20504