Hướng dẫn add class javascript jquery

• Trang chủ
• Tham khảo
• jQuery
• jQuery - function
• .addClass[]

Định nghĩa và sử dụng

• .addClass[]: thêm class cho thành phần.

Cấu trúc

• Đã được thêm vào từ phiên bản 1.0

• Đã được thêm vào từ phiên bản 1.4

.addClass[tênclass]

Html viết:

Tiêu đề


.test {
    background-color: blue;
}


$[function[]{
    $['div'].addClass['test'];
}];




Thành phần div

Hiển thị trình duyệt:

Thành phần div đã được thêm class="test".

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuerySau khi có jQuery

Thành phần div	Thành phần div

.addClass[tênclass01 tênclass02]

Html viết:

Tiêu đề


.test {
    background-color: blue;
}

.bdrDiv {
    border: 3px solid yellow;
}


$[function[]{
    $['div'].addClass['test bdrDiv'];
}];




Thành phần div

Hiển thị trình duyệt:

Thành phần div đã được thêm class="test bdrDiv".

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuerySau khi có jQuery

Thành phần div	Thành phần div

.addClass[function]

Html viết:

Tiêu đề


.list-2 {
    background-color: blue;
}


$[function[]{
    $['ul li'].addClass[function[index]{
        return "list-" + index;
    }];
}];





Thành phần li 0
Thành phần li 1
Thành phần li 2
Thành phần li 3
Thành phần li 4

Hiển thị trình duyệt:

Tất cả các thành phần li đã thêm class theo thứ tự

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuerySau khi có jQuery

Thành phần li 0 Thành phần li 1 Thành phần li 2 Thành phần li 3 Thành phần li 4	Thành phần li 0 Thành phần li 1 Thành phần li 2 Thành phần li 3 Thành phần li 4

.addClass[function[index, class_đã_có]{...}]

Html viết:

Tiêu đề


li {
    background-color: blue;
}

li.bdrRed {
    border: 3px dashed red;
}


$[function[]{
    $['ul li'].addClass[function[index, current]{
        var newClass;
        if[current == "blue"] {
            newClass = "bdrRed";
        }
        return newClass;
    }];
}];





Thành phần li 0
Thành phần li 1
Thành phần li 2
Thành phần li 3
Thành phần li 4

Hiển thị trình duyệt:

Thành phần li có class="blue" đã được thêm class bdrRed.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuerySau khi có jQuery

Thành phần li 0 Thành phần li 1 Thành phần li 2 Thành phần li 3 Thành phần li 4	Thành phần li 0 Thành phần li 1 Thành phần li 2 Thành phần li 3 Thành phần li 4