به‌دست‌آوردن محتوا و ویژگی‌ها

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Jquery-menu.png
موارد آموزشی
۱خانه
۲مقدمه
۳شروع کار
۴دستور زبان
۵انتخابگرها (Selectors)
۶رویدادها
جلوه‌ها در jQuery
۱نمایش دادن / پنهان کردن
۲محو شدن
۳اسلاید
۴متحرک ساختن
۵stop()
۶فراخوانی (Callback)
۷زنجیره‌سازی (Chaining)
HTML در jQuery
۱Get
۲Set
۳اضافه‌کردن (Add)
۴حذف‌کردن
۵کلاس‌های CSS
۶css()
۷ابعاد
پیمودن در jQuery
۱پیمودن (Traversing)
۲اجداد
۳نسل‌ها
۴برادرها (Siblings)
۵فیلترکردن
AJAX در jQuery
۱مقدمهٔ AJAX
۲بارگذاری
۳Get/Post
متفرقه‌های jQuery
۱noConflict()
۲فیلترها
مثال‌ها
۱مثال‌ها
مرجع‌ها

jQuery دارای متدهای قدرتمند برای تغییر و دستکاری عنصرهای HTML و ویژگی‌ها است.[۱]

دستکاری DOM در jQuery

یکی از بخش‌های مهم jQuery امکان دستکاری DOM است.

jQuery با دسته ای از متدهای مرتبط با DOM همراه است که دسترسی و دستکاری عنصرها و ویژگی‌ها را آسان می‌کند.

DOM = مدل شیء سند (به انگلیسی: Document Object Model)

DOM برای دسترسی به سندهای HTML و XML یک استاندارد تعریف می‌کند:

"مدل شیء سند (DOM) W3C یک پلت فرم و واسط language-neutral است که به برنامه و اسکریپت‌ها امکان دسترسی و بروزرسانی محتوا، ساختار و استایل یک سند بصورت پویا را فراهم می‌کند."

به‌دست‌آوردن محتوا - text()، html() و val()

سه متد ساده اما مفید jQuery برای دستکاری DOM عبارتند از:

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

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

مثال
1 $("#btn1").click(function(){
2   alert("Text: " + $("#test").text());
3 });
4 $("#btn2").click(function(){
5   alert("HTML: " + $("#test").html());
6 });

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

مثال
1 $("#btn1").click(function(){
2   alert("Value: " + $("#test").val());
3 });

به‌دست‌آوردن ویژگی‌ها - attr()

متد attr() در jQuery برای گرفتن مقدار ویژگی‌ها استفاده می‌شود.

مثال زیر نحوه به‌دست‌آوردن مقدار ویژگی href در یک لینک را نشان می‌دهد:

مثال
1 $("button").click(function(){
2   alert($("#w3s").attr("href"));
3 });

بخش بعدی نحوه Set (تغییر) محتوا و مقدار ویژگی‌ها را توصیف می‌کند.

تمرین‌های jQuery

مرجع jQuery HTML

برای مرور کامل همه متدهای jQuery HTML، لطفاً به مرجع jQuery HTML/CSS مراجعه کنید.


منابع آموزشی