Bài 06: jQuery Attributes

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"
            h1Nộ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 = 'h1Nộ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"
            h1Chà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é