بازگردانی محتوا و خصیصه ها

سلام عزیزان ، حال همگی شماخوبه ؟ با اموزه های ما که در زمینه jquery همراه بمانید. دراین قسمت درمورد jQuery – بازگردانی محتوا و خصیصه ها می پردازیم.

کتابخانه ی jQuery دربردارنده ی متدهای کارآمدی برای مدیریت و دستکاری المان ها و خصیصه های HTML می باشد.

دستکاری المان های HTML بر مبنای مدل شی گرای سند (DOM)

یکی از قابلیت های ویژه ی jQuery دستکاری المان های مدل شی گرای سند می باشد.

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

مدل شی گرای سند ((Document Object Model

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

در واقع مدل شی گرای سند یک محیط (platform) و رابط مستقل از زبان (language-neutral interface) است که به برنامه ها و پردازه ها (SCRIPT ها) اجازه می دهد به صورت پویا به محتویات، ساختار و استایل یک صفحه دسترسی پیدا کرده و آن ها را بروز رسانی کند.

بازگردانی محتوا – text()، html() و val()

سه روش بسیار ساده و در عین حال کارامد برای دستکاری المان های HTML با توجه به مدل DOM عبارتند از:

text() – محتوای انتخابی را تنظیم کرده و یا بازگردانی می نماید.

html() – محتوای عناصر انتخابی را تنظیم کرده یا برمی گرداند. (بعلاوه ی نشانگذاری و تگ های HTML)

()val – محتوای فیلدهای انتخابی داخل یک فرم را تنظیم کرده یا بازمی گرداند.

مثال زیر نحوه ی بازیابی محتوا با استفاده از متدهای text() و html() نمایش می دهد:

نمونه یک
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰

$(document).ready(function () {
$(“#btn1”).click(function () {
alert(“Text: ” + $(“#test”).text());
});
$(“#btn2”).click(function () {
alert(“HTML: ” + $(“#test”).html());
});
});

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

نمونه دو
?
۱
۲
۳
۴
۵
۶
۷
۸

$(document).ready(function () {
$(“button”).click(function () {
alert(“Value: ” + $(“#test”).val());
});
});

بازیابی مقدار یک خاصیت

تابع ()attr مقدار یک خاصیت را بازیابی می کند.

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

نمونه سه
?
۱
۲
۳
۴
۵
۶
۷

$(document).ready(function () {
$(“button”).click(function () {
alert($(“#tahlil”).attr(“href”));
});
});