Bài 5: Classes trong Jquery

Trong thực tế, sẽ tồn tại rất nhiều trường hợp mà chúng ta muốn thay đổi class của một thẻ HTML trong một thời gian nào đó, điều này trong javascript thuần chúng ta cũng có thể làm được nhưng rất rối và dài dòng. Và trong Jquery có hỗ trợ cho chúng ta 3 hàm chuyên dụng để gải quyết điều này một cách nhanh chóng và đơn giản.

1, Hàm addClass().

-Hàm addClass() trong Jquery có tác dụng thêm attribute class cho thành phần được chọn.

Cú pháp:

$('selector').addClass(option);

Trong đó option có thể là tên class mà bạn muốn thêm hoặc là một function xử lý các class mà bạn muốn thêm.

VD: Thêm thuộc tính class có tên là banner vào thẻ p.

$('p').addClass('banner');

Xem Kết Quả

VD: Thêm class có tên là banner-index vào thẻ p.

$('div').addClass(function(i){
    return 'className' + i;
});

Xem Kết Quả

VD: Thêm class banner-index vào thẻ p nếu thẻ p có class là demo rồi thì thêm class là demonew.

$('p').addClass(function(i, cl){
    if(cl == 'demo'){
        return 'demonew';
    }
  else
    return "banner-"+i;
});

Xem Kết Quả

2, Hàm removeClass().

-Hàm removeClass() trong jquery có tác dụng loại bỏ các attribute class trong thành phần được chọn.

Cú pháp:

$('selector').removeClass(option);

Trong đó option có thể là tên class mà bạn muốn loại bỏ hoặc là một function xử lý các class mà bạn muốn loại bỏ.

VD: Thêm thuộc tính class có tên là banner vào thẻ p.

$('p').removeClass('banner');

Xem Kết Quả

VD: Xóa thẻ class banner-index của các thẻ p.

$('p').removeClass(function (i) {
    return 'banner-'+i;
});

Xem Kết Quả

VD: Xóa classbanner-index của các thẻ p, nếu thẻ p đó có class là pri nữa thì bỏ qua.

$('p').removeClass(function (i, cls) {
    if(cls.indexOf('pri')!=-1){

    } else {
        return 'banner-'+i;
    }
});

Xem Kết Quả

3, Hàm toggleClass().

-Hàm toggleClass() trong Jquery có tác dụng thêm hoặc bỏ một hoặc nhiều class của thành phần được chọn.

Cú Pháp:

$('selector').toggleClass('tenclass',switch);
//hoặc
$('selector').toggleClass(function(){...});

Trong đó: 

• tenclass là tên class mà bạn muốn thêm hoặc xóa(toggle).
• switch là điều kiện đúng nó sẽ chạy.
• Trường hợp hàm xem ví dụ cuối.

VD: toggleClass banner.

$('p').toggleClass('banner');

Xem Kết Quả

VD: toggleClass sau mỗi 2 lần click.

$('p').toggleClass('banner');

Xem Kết Quả

VD: Nếu như class hiện tại là pri thì toggleClass là banner-red và nếu không có class pri thì toggleClass là banner-yellow.

$('p').toggleClass(function(){
    if($(this).attr('class').indexOf('pri') != -1){
        return 'banner-red';
    } else {
        return 'banner-yellow';
    }
});

Xem Kết Quả

4, Lời kết.

-Như vậy bài này mình đã giới thiệu xong đến mọi người về hai hàm addClass() và removeClass() trong jquery rồi, bài tiếp theo chúng ta sẽ tìm hiểu về