میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

کلاس‌ها در جی کوئری

۶۷ / ۱۰۰

سلام به شما همراهان و دوستان محترم سایت آموزشی و فروشگاهی مدرسه کدنویسی به دوره ی آموزش jQuery (جی کوئری) خوش آمدید. در این دوره قصد داریم شما را با کلاس‌ها در جی کوئری jQuery آشنا کرده نحوه استفاده از آن را به شما آموزش دهیم پس با من همراه باشید.

 


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

با جی کوئری شما به راحتی می توانید عناصر موجود 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;
}

 


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

با استفاده از متد 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 است.

 


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

امیدواریم این آموزش جی کوئری jQuery نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با jQuery  را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.

 

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟