سبد (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.

دیدگاه‌ها  

+4 # محمدحسین واحدی 1394-06-31 20:00
سلام
متاسفانه بعد از عضویت انجمن سایت رو پیدا نکردم و به این جهت سوالم را اینجا مطرح می کنم
من با استقاده از jquery یک div را hide کردم
اینک می خواهم در دستور if چک کنم ک اگر div پنهان است کاری را انجام دهد
چطور میتوانم خصوصیت hide بودن را استخراج کنم
با تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+6 # امیر پهلوان صادق 1394-06-31 20:28
سلام، ابتدا تشکر می کنم از اینکه به اعضاء ویژه سایت پیوستید.
و اما جواب سوال تون ... برای بررسی اینکه یک عنصر hide است یا visible می توانید از متد ()is استفاده کنید.
لطفاً به مثال زیر توجه کنید:
http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_isvisible
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی