Hướng dẫn jquery load html file - jquery tải tệp html

• Trang chủ
• Tham khảo
• jQuery
• jQuery - function
• .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

.load[function[]{...}]

Html viết:

Tiêu đề


$[function[]{
    $['img'].load[function[]{
        if[$[this].height[] > 100] {
            $[this].css['border','5px solid blue'];
        }
    }]
}];

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ó jQuerySau khi có jQuery

.load['url']url']

Html viết:

Tiêu đề


$[function[]{
    $['button'].click[function[]{
        $['div'].load['/taiLieu/test.txt'];
    }];
}];




Thành phần div
Click

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

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

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ó jQuerySau khi có jQuery

Thành phần div Click	Thành phần div Click

Nội dung file test.txt

Html viết:

Tiêu đề


$[function[]{
    $['div'].load['/taiLieu/test.html #list'];
}];




Thành phần div

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

Nội dung không được load.


Thành phần li 01
Thành phần li 02
Thành phần li 03
Thành phần li 04
Thành phần li 05

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

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

Trước khi có jQuerySau khi có jQuery

Thành phần div	Nội dung file test.txt Thành phần li 01 Thành phần li 02 Thành phần li 03 Thành phần li 04 Thành phần li 05

.load['url',function[]{...}]url',function[]{...}]

Html viết:

Tiêu đề


$[function[]{
    $['button'].click[function[]{
        $['div'].load['/taiLieu/test.txt', function[] {
            alert['Thành phần đã được load.'];
        }];
    }]; 
}];




Thành phần div
Click

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

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

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ó jQuerySau khi có jQuery

Thành phần div Click	Thành phần div Click