Phương thức text() trong jQuery

1) Phương thức text() trong jQuery

- Phương thức text() được dùng để:

• Lấy "nội dung văn bản" bên trong phần tử.
• Hoặc thiết lập lại "nội dung văn bản" bên trong phần tử.

2) Cách sử dụng phương thức text() trong jQuery

- Đối với phương thức text(), chúng ta có ba trường hợp sử dụng tương ứng với ba cú pháp:

2.1) Lấy nội dung văn bản bên trong phần tử

- Dưới đây là cú pháp dùng để lấy nội dung văn bản bên trong phần tử:

$(selector).text();

- Lưu ý: Nếu bộ chọn tìm được nhiều phần tử trùng khớp thì phương thức text() sẽ trả về toàn bộ nội dung văn bản của tất cả các phần tử trùng khớp đó.

2.2) Thiết lập lại nội dung văn bản bên trong phần tử

- Dưới đây là cú pháp dùng để thiết lập lại nội dung văn bản bên trong phần tử:

(cú pháp này thường được sử dụng trong trường hợp bộ chọn chỉ tìm được một phần tử trùng khớp hoặc bạn muốn tất cả các phần tử trùng khớp đều được thiết lập chung một giá trị)

$(selector).text(text);

- Trong đó, tham số "text" là nội dung văn bản mà bạn muốn thiết lập lại cho phần tử.

2.3) Thiết lập lại nội dung văn bản bên trong phần tử (sử dụng hàm)

- Dưới đây là cú pháp dùng để thiết lập lại nội dung văn bản bên trong phần tử sử dụng hàm:

(cú pháp này thường được sử dụng trong trường hợp bộ chọn tìm được nhiều phần tử trùng khớp và bạn muốn mỗi phần tử trùng khớp được thiết lập một giá trị riêng)

$(selector).text(function(index,currenttext){
    return text;
});

- Dưới đây là bảng mô tả ý nghĩa & cách sử dụng các tham số trong cú pháp trên:

3) Một số ví dụ

<script>
    $(document).ready(function(){
        $("button").click(function(){
            var content = $(".info").text();
        });
    });
</script>

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").text("- Lập <u>Trình</u> Web");
        });
    });
</script>

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").text(function(a,b){
                if(a==0){return "Lập Trình Web";}
                if(a==1){return "Tài liệu học " + b;}
                if(a==2){return b + " & jQuery";}
            });
        });
    });
</script>

4) Điểm giống và khác giữa phương thức text() & html()

- Dưới đây là bảng mô tả điểm giống và khác giữa phương thức text() và html():