تغییر ظاهر عناصر توسط متدهای CSS در جی کوئری

علیرضا حاتمی نیا 550

 

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

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

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

این چهار متد عبارتند از :

  • addClass() :  توسط این متد می توانید یک یا چند کلاس را به عنصر یا عناصر انتخاب شده اضافه نمایید.
  • ()removeClass : توسط این متد می توانید یک یا چند کلاس را ازعنصر یا عناصر انتخاب شده حذف نمایید.
  • ()toggleClass : توسط این متد می توانید بین متدهای ()addClass و ()removeClass حرکت نمایید.
  • ()css : این متد یک خصوصیت CSS را تنظیم می کند و مقدار آن را نیز بر می گرداند.
در ادامه به توضیح هر یک از متدهای بالا می پردازیم.

متد addClass() در جی کوئری

از متد addClass() می توانید یک یا چند کلاس را به یک یا چند عنصر اضافه کنید.

مثال برای متد addClass()

در مثال زیر دو کلاس .blue و .red که در CSS تعریف شده اند را به ترتیب به عناصر <p>, <h2>,<h3> و <div> اضافه می کنیم.
CSS
.blue {
color: blue;
}
.red {
    color: red;
}
.font-20 {
    font-size: 20px;
}

HTML

<h2>Heading 2</h1>
<h3>Heading 3</h2>
<p>This is first paragraph.</p>
<p>This is second paragraph.</p>

<div>This is some text in my div tag</div><br>

<button>Add classes</button> 

jquery addClass html example

Jquery

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

jquery addClass example

نکته: همچنین می توانید در متد addClass() بیش از یک کلاس را اضافه کنید:

$("button").click(function(){
  $("#div").addClass("red font-20");
});

متد removeClass() در جی کوئری

از متد removeClass() می توانید جهت حذف یک یا چند کلاس از یک یا چند عنصر استفاده کنید.

مثال برای متد removeClass()

در مثال زیر کلاس های .red و .font-20 را از عنصر <div> حذف مینماییم.
HTML
<div class="red font-20">This is some text in my div tag</div><br>

<button>remove classes</button>

jquery removeClass html example

Jquery

$("button").click(function(){
        $("div").removeClass("red font-20");

    });

jquery removeClass example

متد toggleClass() در جی کوئری

از متد toggleClass() جهت حرکت بین دو متد addClass() و removeClass() استفاده می شود. یعنی اگر عنصر یا عناصر دارای کلاس بودند این متد مانند متد removeClass() عمل می کند و اگر دارای کلاس مربوطه نبودند مانند متد addClass() عمل می کند.

مثال برای متد toggleClass()

HTML
<div>This is some text in my div tag</div><br>

<button>remove classes</button>

Jquery

$("button").click(function(){
        $("div").toggleClass("red font-20");

    });

در قسمت بعدی آموزش در مورد متد css() بیشتر توضیح خواهم داد.

 

کلمات کلیدی

جی کوئری jquery

لینک های مرتبط

طراحی سایت اصفهان
علیرضا حاتمی نیا
طراح و برنامه نویس وب
طراحی وبسایت های واکنش گرا
طراحی و پیاده سازی سیستم مدیریت محتوا
سئو و بهینه سازی سایت