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

 

 

با سلام خدمت شما همراهان گرامی وبسایت آموزش برنامه نویسی و علاقه مندان به آموزش جی کوئری.
در جلسه قبل با آموزش حذف عناصر در جی کوئری همراه شما بودیم. در این جلسه به آموزش تغییر ظاهر عناصر توسط 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>

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

Jquery

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

مثال متد addclass در جیکوئری

نکته: همچنین می توانید در متد 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>

مثال متد removeclassدر جی کوئری

Jquery

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

    });

نمونه متد removeclass در جی کوئری

متد 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() بیشتر توضیح خواهم داد.

برای درج نظر و یا طرح سوالات خود لطفا در سایت ثبت نام کنید و یا وارد سایت شوید

نظرات کاربران

برای این مطلب تاکنون نظری ارسال نشده است. شما اولین نفر باشید