.load()

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

Có 2 cách sử dụng:

Load sự kiện javascript.
load dữ liệu từ server sau đó đặt HTML trở lại từ các thành phần được chọn.

Cấu trúc

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

$('img').load(function(){...});

.load('url')

$('#test').load('/ajax/test.html');

.load('url',function(){...})

$('#test').load('/ajax/test.html',function(){...});

.load(function(){...})

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('img').load(function(){
        if($(this).height() > 100) {
            $(this).css('border','5px solid blue');
        }
    })
});
</script>
</head>

<body>
<p><img src="http://www.hocwebchuan.com/
common/images/img_webstandard.gif" alt="" /></p>
<p><img src="http://www.hocwebchuan.com/
common/images/img_logo.gif" alt="" /></p>
</body>
</html>

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

Click để xem kết quả.

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

Trước khi có jQuery	Sau khi có jQuery
<p><img src="http://www.hocwebchuan.com/ common/images/img_webstandard.gif" alt="" /></p> <p><img src="http://www.hocwebchuan.com/ common/images/img_logo.gif" alt="" /></p>	<p><img style="border: 5px solid blue;" src="http://www.hocwebchuan.com/ common/images/img_webstandard.gif" alt="" /></p> <p><img src="http://www.hocwebchuan.com/ common/images/img_logo.gif" alt="" /></p>

.load('url')

Html viết:

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

<body>
<div>Thành phần div</div>
<button>Click</button>
</body>
</html>

Nội dung file test.txt

Đây là dòng text của test.txt

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

Click vào button để thấy kết quả.

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

Trước khi có jQuery	Sau khi có jQuery
<div>Thành phần div</div> <button>Click</button>	<div style="display: none;">Thành phần div</div> <button>Click</button>

Ví dụ thêm - load một nội dung cụ thể trong file

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').load('/taiLieu/test.html #list');
});
</script>
</head>

<body>
<div>Thành phần div</div>
</body>
</html>

Nội dung file test.html

<p>Nội dung không được load.</p>

<ul id="list">
<li>Thành phần li 01</li>
<li>Thành phần li 02</li>
<li>Thành phần li 03</li>
<li>Thành phần li 04</li>
<li>Thành phần li 05</li>
</ul>

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

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

Trước khi có jQuery	Sau khi có jQuery
<div>Thành phần div</div>	<div><ul id="list"> <li>Thành phần li 01</li> <li>Thành phần li 02</li> <li>Thành phần li 03</li> <li>Thành phần li 04</li> <li>Thành phần li 05</li> </ul></div>

.load('url',function(){...})

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('button').click(function(){
        $('div').load('/taiLieu/test.txt', function() {
            alert('Thành phần đã được load.');
        });
    }); 
});
</script>
</head>

<body>
<div>Thành phần div</div>
<button>Click</button>
</body>
</html>

Nội dung file test.txt

Đây là dòng text của test.txt

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

Click vào button để thấy kết quả.

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

Trước khi có jQuery	Sau khi có jQuery
<div>Thành phần div</div> <button>Click</button>	<div style="display: none;">Thành phần div</div> <button>Click</button>

.live()

.map()