Love beautiful code? We do too.

  1. Home
  2. Tutorial
  3. Hàm jQuery
  4. .text() trong jQuery
Previous Lesson Next Lesson

.text() trong jQuery

Định nghĩa và sử dụng .text() trong jQuery

.text(): Lấy nội dung text của thành phần, hoặc thay đổi nội dung text cho thành phần.

Cấu trúc .text() trong jQuery .text() trong jQuery

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

.text()

Lấy nội dung HTML của thành phần

$('div').text();
.text('Nội dung')

Gán nội dung HTML cho thành phần

$('div').text('<p>Nội dung được thêm vào</p>');

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

.text(function(){...})

$('div').text(function(index){
    return 'item thứ ' + (index + 1);
});

.text()

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    var txt = $('p').text();
    $('button').click(function(){
       alert(txt); 
    });
});
</script>
</head>

<body>
<p>Thành phần <span>span</span> bên trong thành phần cha</p>
<button>Click</button>
</body>
</html>

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

Với cách sử dụng $('p').text() ta đã lấy nội dung text bên trong <p>.

.text('Nội dung HTML')

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').text('Đoạn text được thêm vào');
});
</script>
</head>

<body>
<div></div>
</body>
</html>

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

Ban đầu thành phần <div> là thành phần rỗng, nhưng khi ta sử dụng .text('Đoạn text được thêm vào') thì thành phần <div> đã được thêm nội dung.

.text(function(){...})

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('li').text(function(index){
    return 'item thứ ' + (index + 1);
});
});
</script>
</head>

<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>

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

Previous Lesson Next Lesson

Viết câu trả lời

Drop Images

0 Bình luận

Danh mục bài học

Hoclaptrinh.vn © 2017

From Coder With