Jquery Get

Posted on by mtoplistChuyên mục:Top List

Jquery chứa nhiều phương thức mạnh mẽ cho việc thay đổi và thao tác với các phần tử và thuộc tính HTML.

Thao tác với DOM

Một trong những phần quan trọng của Jquery là khả năng thao tác và xử lý với DOM.

DOM = Document Object Model
DOM định nghĩa một tiêu chuẩn để truy cập các tài liệu HTML và XML.

Ba phương thức đơn giản nhưng hữu ích cho việc thao tác DOM là:

  • text()

    – Thiết lập hoặc trả về nội dung text của phần tử được chọn.

  • html()

    – Thiết lập hoặc trả về nội dung của phần tử được chọn (bao gồm cả cấu trúc HTML).

  • val()

    – Thiết lập hoặc trả về giá trị của các trường trong form.

Ví dụ về Jquery text() và html()

Ví dụ dưới đây giúp ta phân biệt rõ giữa 2 phương thức Jquery text() và html():


<p id="test">This is some <b>bold</b> text in a paragraph.</p>
<button id="btn1">Phương thức Text</button>
<button id="btn2">Phương thức HTML</button>

Đoạn code Jquery :


$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});

Ví dụ về Jquery val()

Ví dụ dưới đây giúp ta hiểu về phương thức Jquery val():


<p>Name: <input type="text" id="test" value="Master FrontEnd"></p>
<button id="btn3">Show Value</button>

Đoạn code Jquery :


$("#btn3").click(function(){
alert("Value: " + $("#test").val());
});

Get Attributes – attr()

Phương thức jQuery attr() được sử dụng để lấy các giá trị hoặc gán giá trị cho thuộc tính.

Ví dụ dưới đây giúp ta hiểu cách lấy giá trị của thuộc tính href trong thẻ a:


<a href="https://www.masterfrontend.com" id="demo">Master FrontEnd</a>
<button>Get value Attr</button>
<script>
$("button").click(function(){
alert($("#demo").attr("href"));
});
</script>

Ở bài học tiếp theo chúng ta sẽ tìm hiểu về cách thiết lập, thay đổi nội dung hoặc attribute.

mtoplist