03/08/2018, 10:14
Bài 06: jQuery Attributes - html()
DEMO Hàm ...
Hàm html() jquery dùng để lấy nội dung HTML bên trong một thẻ nào đó. Nếu selector bạn truyền vào trả về là một danh sách thì nó sẽ lấy nội dung HTML của phần tử đầu tiên.
1. Cú pháp hàm html() jquery
Hàm html() jquery có hai cách dùng như sau:
- Dùng lấy nội dung (get): $('selector').html()
- Dùng thiết lập nội dung (set): $('selector').html('noi dung ben trong')
2. Cách sử dụng hàm html() jquery
Sử dụng html() lấy nội dung (get):
Ví dụ: Lấy nội dung của thẻ div#content và alert() lên màn hình.
Xem demo:
<!DOCTYPE html>
<html>
<head>
<title>Đổi màu nhé</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script language="javascript">
$(document).ready(function(){
$('#button').click(function(){
var content = $('#content').html();
alert(content);
});
});
</script>
</head>
<body>
<div id="content">
<h1>Nội dung nè</h1>
</div>
<input type="button" value="Lấy nội dung bên trong" id="button"/>
</body>
</html>Sử dụng html() để thiết lập nội dung (set):
Vi dụ: Khai báo một biến chứa một đoạn mã html và gán vào thẻ div#content
Xem demo:
<!DOCTYPE html>
<html>
<head>
<title>Đổi màu nhé</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script language="javascript">
$(document).ready(function(){
$('#button').click(function(){
var content = '<h1>Nội dung nè</h1>';
$('#content').html(content);
});
});
</script>
</head>
<body>
<div id="content">
</div>
<input type="button" value="Thiết lập nội dung" id="button"/>
</body>
</html>3. Ví dụ tổng hơp hàm html() jquery
Cho hai thẻ div#content1 và div#content2. Xây dựng chương trình hoán đổi nội dung bên trong hai thẻ div này.
Xem demo:
<!DOCTYPE html>
<html>
<head>
<title>Đổi màu nhé</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<style>
#content1{
height: 200px; background:red
}
#content2{
height: 200px; background:yellow
}
</style>
<script language="javascript">
$(document).ready(function()
{
$('#button').click(function(){
// Lấy nội dung
var content1 = $('#content1').html();
var content2 = $('#content2').html();
// Thực hiện đổi nội dung
$('#content1').html(content2);
$('#content2').html(content1);
});
});
</script>
</head>
<body>
<div id="content1">
<h1>Chào mừng các bạn</h1>
</div>
<div id="content2">
<h1>Đến với <a href="https://code24h.com">code24h.com</a></h1>
</div>
<input type="button" value="Hoán đổi nội dung" id="button"/>
</body>
</html>4. Lời kết
Bài này thật sự căn bản nhưng mình rất thích mấy cái ví dụ, nó rất thực tế và dễ hiểu cho những bạn mới học jquery. Hy vọng qua bài này bạn nắm được cách sử dụng hàm html() trong jquery và kết hợp vỡi những hàm khác để xử lý giao diện nhé.
Nguồn: code24h.com
