NTM Solutions

Facebook Youtube Google+

Thứ Tư, 25 tháng 1, 2017

Tự học JQuery - HTML - Bài 1 - jQuery – Phương thức lấy nội dung và thuộc tính

jQuery có rất nhiều phương thức mạnh mẽ để thay đổi và xử lý các đối tượng HTML và các thuộc tính.

Jquery xử lý DOM

01 phần rất quan trọng của jQuery là khả năng xử lý DOM.
jQuery có các phương thức liên quan đến DOM làm cho nó dễ dàng truy cập và xử lý các phần tử cũng như thuộc tính.
DOM = Document Object Model

Chuẩn DOM xác định 01 tiêu chuẩn truy cập HTML và tài liệu XML :
"W3C Document Object Model (DOM) là 01 mẫu và 01 ngôn ngữ trung gian cho phép các chương trình và các đoạn mã truy cập và cập nhật nội dung , cấu trúc, và kiểu của 01 tài liệu HTML."

Lấy nội dung - text(), html(), và val()

03 hàm đơn giản nhưng hữu dụng của jQuery để xử lý DOM:

  • text() - Thiết lập hoặc trả về nội dung văn bản của các phần tử.
  • html() - Thiết lập hoặc trả về nội dung của các phần tử đã được chọn( bao gồm cả thẻ html)
  • val() - thiết lập hoặc trả về giá trị của các phần tử form.
Ví dụ sau mô tả cách lấy nội dung với 02 phương thức text() và html():
$("#btn1").click(function(){
    alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
});


Ví dụ sau mô tả cách lấy giá trị của 01 trường input với phương thức jQuery val():
$("#btn1").click(function(){
    alert(
"Value: " + $("#test").val());
});

Lấy các thuộc tính - attr()

Phương thức attr() được sử dụng để lấy các giá trị thuộc tính.
Ví dụ sau mô tả cách lấy giá trị của thuộc tính href trong 01 liên kết:
$("button").click(function(){
    alert($(
"#lienket").attr("href"));
});

Chương tiếp theo sẽ giải thích cách thiết lập (thay đổi) các giá trị nội dung và thuộc tính.