Khám Phá Phương thức Getter và Setter trong jQuery

Để hiểu cách thiết lập và truy xuất giá trị, nội dung, và thuộc tính của phần tử, bạn hãy đọc tiếp bài học jQuery về phương thức Getter và Setter dưới đây từ Mytour.

Khám Phá Phương thức Getter và Setter trong jQuery

1. Thu Thập hoặc Đặt Giá trị và Nội dung trong jQuery

Một số phương thức của jQuery có thể được sử dụng để thiết lập hoặc đọc giá trị trên phần tử đã chọn, bao gồm các phương thức như text(),html(),attr() và val().

Nếu các phương thức này được gọi mà không có đối số thì chúng được gọi là getter, vì chúng nhận (hoặc đọc) giá trị của phần tử. Nếu các phương thức này được gọi với một giá trị làm đối số thì chúng được gọi là setter, vì chúng gán (hoặc thiết lập) giá trị đó.

2. Sử Dụng Phương thức text() trong jQuery

Phương thức text() trong jQuery được dùng để trích xuất hoặc thiết lập nội dung là văn bản cho các phần tử đã chọn.

2.1. Trích Xuất Nội dung bằng Phương thức text()

Ví dụ: trong ví dụ dưới đây minh họa cách trích xuất nội dung văn bản từ đoạn văn bản:

Kết quả xuất hiện như bên dưới:

Lưu ý: Phương thức text() trong jQuery trích xuất nội dung văn bản của tất cả các phần tử đã chọn (tức là nội dung văn bản), các phương thức getter khác như html(), attr() và val() chỉ trả về giá trị của phần tử đầu tiên được chọn.

2.2. Gán Nội Dung bằng Phương thức text()

Ví dụ: ví dụ dưới đây minh họa cách gán nội dung văn bản cho đoạn văn bản:

Kết quả hiển thị như sau:

Lưu ý: Nếu các phương thức text(),html(),attr() và val() trong jQuery được gọi với cùng một giá trị làm đối số, chúng sẽ áp dụng giá trị đó cho tất cả các phần tử tương ứng.

3. Phương thức html() trong jQuery

Phương thức html() trong jQuery được dùng để trích xuất hoặc gán nội dung HTML cho phần tử.

3.1. Trích xuất nội dung HTML với phương thức html()

Ví dụ: Ví dụ dưới đây minh họa cách trích xuất nội dung HTML từ các phần tử p (đoạn văn) và phần tử chứa div:

Kết quả hiển thị như sau:

Lưu ý: Trong trường hợp nhiều phần tử được chọn, phương thức html() chỉ trả về nội dung HTML của phần tử đầu tiên từ tập hợp các phần tử phù hợp.

3.2. Gán nội dung HTML với phương thức html()

Ví dụ dưới đây mô tả cách gán nội dung HTML cho phần tử body:

Kết quả xuất hiện như sau:

4. Thuộc tính attr() trong jQuery

Phương thức attr() trong jQuery được dùng để trích xuất giá trị của thuộc tính từ phần tử hoặc đặt giá trị cho một hoặc nhiều thuộc tính của phần tử được chọn.

4.1. Trích xuất giá trị thuộc tính với phương thức attr()

Dưới đây là ví dụ minh họa cách trích xuất giá trị của thuộc tính href từ siêu liên kết (hyperlink), nói cách khác, từ phần tử a, cũng như giá trị của thuộc tính alt từ phần tử thẻ ảnh:

Kết quả hiển thị như sau:

Lưu ý: Trong trường hợp nhiều phần tử được chọn, phương thức attr() chỉ trả về giá trị của thuộc tính từ phần tử đầu tiên trong số các phần tử phù hợp.

4.2. Gán giá trị cho thuộc tính với phương thức attr()

Dưới đây là ví dụ minh họa cách gán giá trị cho thuộc tính checked của hộp kiểm (checkbox):

Kết quả hiển thị như sau:

Ngoài ra, phương thức attr() trong jQuery còn hỗ trợ việc thiết lập đồng thời nhiều thuộc tính. Trong ví dụ dưới đây, chúng ta sẽ minh họa cách thiết lập các thuộc tính class và title cho các phần tử thẻ ảnh:

Kết quả hiển thị như sau:

5. Phương thức val() trong jQuery

Phương thức val() trong jQuery được sử dụng để lấy hoặc thiết lập giá trị hiện tại cho các thành phần biểu mẫu HTML, bao gồm input, select và textarea.

5.1. Thu thập giá trị từ các thành phần biểu mẫu với phương thức val()

Ví dụ dưới đây minh họa cách thu thập các giá trị từ biểu mẫu bằng phương thức val():

Kết quả xuất hiện như sau:

Lưu ý: Trong trường hợp có nhiều phần tử được chọn, phương thức val() chỉ trả về giá trị của phần tử đầu tiên từ tập hợp các phần tử phù hợp.

5.2. Đặt giá trị cho các thành phần biểu mẫu với phương thức val()

Ví dụ dưới đây minh họa cách đặt giá trị cho các thành phần biểu mẫu bằng phương thức val():

Kết quả xuất hiện như sau:

Trong bài học này, Mytour đã chia sẻ với bạn về phương thức Getter và Setter trong jQuery. Trong bài học kế tiếp, Mytour sẽ tiếp tục giới thiệu với bạn về Hàm callback trong jQuery.