HTML/CSS (HTML/CSS Reference)

در این صفحه یک رفرنس HTML/CSS jQuery داری. یعنی لیستی جمع وجور از متدهایی که می توانند ساختار HTML و استایل CSS صفحه را عوض کنند.

چرا رفرنس HTML/CSS jQuery مهم است؟

با متدهای این رفرنس HTML/CSS jQuery می توانی متن صفحه، تگ ها، کلاس ها و استایل ها را در لحظه عوض کنی. این دقیقا چیزی است که صفحات تعاملی و مدرن لازم دارند.

عبارت HTML یعنی ساختار صفحه؛ مثل تگ های <p> یا <div>. عبارت CSS یعنی استایل؛ مثل رنگ، اندازه یا فاصله ها.

تمام متدهای جدول منبع برای HTML و XML کار می کنند؛ فقط متد html() مخصوص HTML است.

افزودن و مدیریت کلاس های CSS

کلاس (Class) یک برچسب برای استایل دادن به عناصر است؛ مثل برچسب روی دفترهای مدرسه.

• addClass() یک یا چند کلاس جدید اضافه می کند.
• removeClass() یک یا چند کلاس را حذف می کند.
• hasClass() چک می کند عنصری یک کلاس خاص دارد یا نه.
• toggleClass() اگر کلاس بود حذف می کند؛ اگر نبود اضافه می کند.

نکته: مدیریت کلاس ها بهتر از تغییر مستقیم استایل است؛ چون کد تمیزتر و قابل مدیریت تر می شود.

تغییر متن، HTML و مقدار ورودی ها

در این رفرنس چند متد برای محتوا داری:

• text() متن ساده عنصر را ست یا دریافت می کند.
• html() HTML داخلی عنصر را ست یا دریافت می کند.
• val() مقدار ورودی فرم را ست یا دریافت می کند.

متن (Text) فقط نوشته بدون تگ است. اما HTML می تواند تگ های داخلی هم داشته باشد؛ مثلا <strong> داخل پاراگراف.

اضافه کردن و جابجایی محتوا

در منبع چند متد برای چسباندن محتوا قبل و بعد عناصر دیده می شود:

• append() و appendTo() محتوا را در انتهای عنصر قرار می دهند.
• prepend() و prependTo() محتوا را در ابتدای عنصر قرار می دهند.
• before() و after() محتوا را قبل یا بعد از خود عنصر می گذارند.
• insertBefore() و insertAfter() عناصر جدید را نسبت به عناصر موجود جابجا می کنند.

این متدها برای ساخت لیست ها، کارت ها یا پیام های جدید در صفحه خیلی کاربردی هستند.

حذف، خالی کردن و کپی کردن عناصر

گاهی لازم است بخشی از صفحه را حذف یا جابجا کنی؛ درست مثل پاک کردن یا جابجا کردن برگه ها در یک کلاس درس.

• remove() عنصر را کامل حذف می کند؛ همراه با داده ها و رویدادها.
• detach() عنصر را حذف می کند اما داده ها و رویدادها را نگه می دارد.
• empty() فقط محتوای درون عنصر را خالی می کند.
• clone() یک کپی از عنصر ایجاد می کند.

نکته: وقتی می خواهی عنصری را موقت جابجا کنی، detach() گزینه بهتری است چون رویدادها را حفظ می کند.

کار با استایل ها و ابعاد عناصر

در جدول، چند متد برای استایل و اندازه ها هم آمده است:

• css() یک یا چند ویژگی استایل را ست یا برمی گرداند.
• width() و height() عرض و ارتفاع خالص عنصر را مدیریت می کنند.
• innerWidth() و innerHeight() اندازه با padding را می دهند.
• outerWidth() و outerHeight() اندازه با padding و border را می دهند.

Padding فاصله بین محتوای داخل و حاشیه داخلی است. Border حاشیه دور عنصر است؛ مثل قاب دور عکس.

موقعیت، اسکرول و مختصات عناصر

برای کارهای دقیق تر ظاهری، متدهای زیر در رفرنس آمده اند:

• offset() مختصات عنصر نسبت به کل سند را می دهد.
• position() موقعیت عنصر نسبت به والد را برمی گرداند.
• offsetParent() اولین والد with position را برمی گرداند.
• scrollLeft() و scrollTop() موقعیت اسکرول افقی و عمودی را مدیریت می کنند.

اسکرول بار همان نوار حرکت صفحه است؛ مثل کشیدن صفحه در موبایل.

ویژگی ها (Attributes) و خواص (Properties)

Attribute همان ویژگی HTML است؛ مثل href یا title. Property بیشتر به وضعیت داخلی عنصر در جاوااسکریپت اشاره دارد.

• attr() ویژگی های HTML را ست یا برمی گرداند.
• removeAttr() یک یا چند ویژگی را حذف می کند.
• prop() خواص عنصر را ست یا برمی گرداند.
• removeProp() خاصیتی را که با prop() ست شده حذف می کند.

نکته: برای ویژگی های استاندارد فرم، معمولا prop() رفتار واقعی تری نسبت به attr() دارد.

متدهای wrap برای پیچیدن عناصر

متدهای wrap() عناصر را داخل تگ های جدید می پیچند؛ مثل گذاشتن چند مداد داخل یک جامدادی.

• wrap() دور هر عنصر انتخابی یک تگ می پیچد.
• wrapAll() همه عناصر را داخل یک والد مشترک قرار می دهد.
• wrapInner() فقط محتوای داخلی عناصر را داخل تگ جدید می پیچد.
• unwrap() والد را برمی دارد اما خود عناصر را نگه می دارد.

نمونه کد با متدهای HTML/CSS jQuery

در این مثال چند متد مهم از همین رفرنس HTML/CSS jQuery را می بینی.

$("p.highlight-target").addClass("highlight");
$("#info").text("متن جدید با jQuery تنظیم شد.");
$("#box").css("background-color", "lightblue");
$("#box").width(300);

مشاهده در ادیتور

در این کد، ابتدا به برخی پاراگراف ها کلاس تازه می دهیم. سپس متن عنصر #info را عوض می کنیم. بعد رنگ پس زمینه و عرض جعبه #box را تغییر می دهیم.

استفاده کاربردی از این رفرنس در پروژه ها

برای طراحی رابط های تعاملی بهتر است این صفحه را کنار خودت داشته باشی. هر وقت خواستی متن، استایل یا ساختار را تغییر دهی، به رفرنس نگاه کن و متد مناسب را پیدا کن.

برای مرور ارتباط این متدها با بقیه بخش ها، می توانی صفحه نمای کلی (Overview) را هم ببینی. همچنین برای افکت های دیداری این تغییرها، صفحه افکت ها (Effects Reference) بسیار مفید است.

اگر روی انتخاب عناصر مشکل داری، بخش انتخاب گرها (Selectors Reference) کمک می کند تا متدهای این رفرنس HTML/CSS روی عناصر درست اعمال شوند.

برای سئو داخلی سایت خودت هم می توانی از لینک رفرنس HTML/CSS jQuery در مقالات آموزشی دیگر استفاده کنی.

جمع بندی سریع

• این صفحه رفرنس HTML/CSS jQuery برای دستکاری ساختار و استایل است.
• کلاس ها با addClass()، removeClass() و toggleClass() مدیریت می شوند.
• متن، HTML و مقدار فرم با text()، html() و val() تنظیم می شوند.
• ابعاد و موقعیت با width()، height()، offset() و position() کنترل می شوند.
• متدهای wrap() و دوستانش برای ساختاردهی و گروه بندی عناصر کاربرد دارند.