قسمت دهم: کلاس‌ها

در قسمت قبل از دوره آموزش کتابخانه جی کوئری  با متدهای مربوط به تنظیم و اضافه کردن عناصر و محتوا به سند وب خود آشنا شدیم. در این قسمت می خواهیم به دو موضوع حذف کردن عناصر در سند وب و مبحث کلاس ها در جی کوئری بپردازیم. با ما همراه باشید.

حذف کردن عناصر در جی کوئری

با جی کوئری شما به راحتی می توانید عناصر موجود html را از صفحه خود حذف کنید. برای حدف کردن عناصر در سند html دو متد وجود دارد: اولی متد remove و دومی متد empty.

متد remove در جی کوئری

این متد تمامی عناصر انتخاب شده و همه عناصر زیر شاخه آن را حذف می کند. در مثال زیر عنصر با آی دی div1 حدف می شود و همچنین تمامی زیر شاخه های آن نیز حذف خواهد شد:

$("#div1").remove();

متد empty در جی کوئری

این متد تمامی عناصر زیرشاخه عنصر انتخاب شده را حذف می کند اما خود عنصر را حذف نمی کند.

برای مثال در نمونه زیر تمامی عناصر زیرشاخه عنصر با ایدی div1 حذف خواهد شد اما خود عنصر حذف نخواهد شد:

$("#div1").empty();

فیلتر کردن عناصر برای حذف آن ها

با استفاده از جی کوئری شما می توانید عناصری که می خواهید آن ها را حذف کنید، فیلتر کنید و دایره ی عناصر مورد نظر خود را مشخص کنید.

برای مثال در کد زیر ابتدا تمامی تگ های p را انتخاب می کنیم. سپس در پرانتز جلوی remove تعریف می کنیم که تنها عناصری را که کلاس test دارند حذف شوند:

$("p").remove(".test");

همچنین در متد remove می توان به جای یک پارامتر، دو پارامتر را برای فیلتر کردن انتخاب کرد.

در مثال زیر عناصر p با کلاس های test و demo را حذف می شود:

$("p").remove(".test,.demo");

دریافت و تنظیم کلاس های css در جی کوئری

با استفاده از جی کوئری شما می توانید به راحتی استایل عناصر html را دستکاری کنید.

یکی از راه های تغییر استایل عناصر تغییر کلاس های آن است. یعنی مثلا کلاسی داریم که به عنصر ما رنگ آبی می دهد. در این صورت اگر آن کلاس را به عنصر بدهیم رنگ آن به آبی تغییر می کند و اگر آن را از عنصر حذف کنیم رنگ آن به رنگ پیشفرض برمی گردد.

با استفاده از جی کوئری شما می توانید در کلاس های عناصر html تغییراتی ایجاد کنید. از جمله اضافه کردن کلاس، حذف کلاس، تغییر وضعیت کلاس ها و...

در این بخش ما یک استایل پیشفرض می نویسیم تا با استفاده از این کد css بقیه مثال های خود درباره کلاس های را توضیح دهیم.

در کد زیر دو کلاس را تعریف کرده ایم که کلاس اول دارای ویژگی فونت bold و فونت سایر large است. کلاس دوم نیز دارای رنگ آبی است.

.important {
  font-weight: bold;
  font-size: xx-large;
}

.blue {
  color: blue;
}

(همانطور که در ابتدای دوره اشاره کردیم پیش نیاز این دوره آشنایی با HTML ،CSS و جاوا اسکریپت است. به همین دلیل ما در این دوره آموزشی از توضیح کدها مربوط به استایل خودداری می کنیم. برای یادگیری زبان css می توانید به مقالات آموزش css روکسو مراجعه کنید)

متد اضافه کردن کلاس ها درجی کوئری

با استفاده از متد addClass در جی کوئری شما می توانید کلاسی را به عنصر یا عناصر مورد نظر خود اضافه کنید.

در مثال زیر می بینیم که با کلیک بر روی دکمه ابتدا تگ h1 ،h2 و p کلاس blue دریافت می کنند و سپس تگ div  کلاس important می گیرد.

$("button").click(function(){
  $("h1, h2, p").addClass("blue");
  $("div").addClass("important");
});

شما همچنین می توانید با استفاده از متد addClass چندین کلاس را به یک عنصر اختصاص دهید. مانند نمونه زیر که در آن به یک عنصر با ایدی div1 ، دو کلاس important و blue را داده ایم.

$("button").click(function(){
  $("#div1").addClass("important blue");
});

حذف کلاس ها در جی کوئری

با استفاده از متد removeClass شما می توانید کلاس های یک یا چند عنصر را حذف کنید. در نمونه زیر با کلیک بر روی عنصر، کلاس blue از عناصر h1 ،h2 و p حذف می گردد.

$("button").click(function(){
  $("h1, h2, p").removeClass("blue");
});

تغییر وضعیت کلاس ها در جی کوئری

با استفاده از متد toggleClass می توانیم بین حالت remove class و add class سوییچ کنیم. برای درک بهتر این موضوع به نمونه زیر نگاه کنید:

$("button").click(function(){
  $("h1, h2, p").toggleClass("blue");
});

در این نمونه سه عنصر با استفاده از متد toggleClass ابتدا کلاس blue را دریافت می کنند و سپس با اجرای دوباره تابع، کلاس blue از آن ها حذف می شود و این کار تکرار می شود.

همانطور که به خاطر دارید متدهای Toggle بین دو حالت سوییچ می کنند در اینجا هم با هر بار اجرا شدن متد Toggle کلاس یک بار به عنصر انتخاب شده داده می شود و با اجرای دوباره این متد کلاس از عنصر گرفته می شود. به همین دلیل می گوییم که متد toggleClass ترکیبی از دو متد remove class و add class است.

در این قسمت از دوره آموزش کتابخانه جاوا اسکریپت با نحوه ی حذف و خالی کردن عناصر آشنا شدیم و همچنین متدهای مربوط به کار با کلاس ها در جی کوئری از جمله حذف و اضافه کلاس ها را بررسی کردیم.

در قسمت بعد به ادامه مباحث مربوط به استایل و ارتباط آن با جی کوئری خواهیم پرداخت.