Jquery Set

02/10/2019

Bài sau » « Bài trước

Set Content trong Jquery

Chúng ta sẽ sử dụng 3 phương thức đã học ở bài trước để thiết lập content trong jquery 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.

Để thiết lập content thì trong các phương thức trên, ta truyền vào cho nó đoạn văn bản. Xem ví dụ sau đây: Code HTML:

<p id="test1">Set content bằng phương thức text().</p> <p id="test2">Set content bằng phương thức html().</p> <p>Input field: <input type="text" id="test3" value="Master FrontEnd"></p> <button id="btn1">Phương thức text()</button> <button id="btn2">Phương thức html()</button> <button id="btn3">Phương thức val()</button>

Code Jquery:

$("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("Hello world!"); }); $("#btn3").click(function(){ $("#test3").val("Hello world"); });

Callback function cho text(), html() và val()

Tất cả 3 phương thức jquery text(), html()val() đều có callback function.

Callback function có 2 tham số: index của phần tử hiện tại và giá trị cũ ban đầu. Sau đó, bạn return về chuỗi bạn muốn sử dụng làm giá trị mới cho phần tử.

Ví dụ callback function cho 2 phương thức text()html():

<p id="test1">This is a <b>bold</b> paragraph.</p> <p id="test2">This is another <b>bold</b> paragraph.</p> <button id="btn1">Show Old/New Text</button> <button id="btn2">Show Old/New HTML</button>

Code Jquery:

$("#btn1").click(function(){ $("#test1").text(function(i, origText){ return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; }); }); $("#btn2").click(function(){ $("#test2").html(function(i, origText){ return "Old html: " + origText + " New html: Hello world! (index: " + i + ")"; }); });

Set 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 gán giá trị của thuộc tính href trong thẻ a:

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

Phương thức attr() cho phép thay đổi nhiều thuộc tính cùng lúc. Xem ví dụ dưới đây:

$("button").click(function(){ $("#demo").attr({ "href" : "https://www.masterfrontend.com/blogs/jquery/", "title" : "Học jquery từ A - Z" }); });

Callback function cho attr()

Phương thức jquery attr() cũng có callback function.

Callback function có 2 tham số: index của phần tử hiện tại và giá trị cũ ban đầu. Sau đó, bạn return về chuỗi bạn muốn sử dụng làm giá trị mới cho phần tử.

Ví dụ callback function cho phương thức attr():

$("button").click(function(){ $("#demo").attr("href", function(i, origValue){ return origValue + "/blogs/jquery/"; }); });

Bài sau » « Bài trước
Back to top