Cách sử dụng các phương thức để đọc và gán giá trị cho phần tử HTML bằng jQuery
JQuery có một số phương thức để tương tác với nội dung của các phần tử HTML. Trong đó phương thức html() được dùng để lấy nội dung phần tử được chọn, nó lấy cả nội dung HTML markup. Còn nếu muốn chỉ lấy nội dung text không HTML markup thì dùng phương thức text()
Ví dụ sau bấm vào phần tử p.example1 thì sẽ lấy nội dung HTML Markup và text rồi thông báo
HTML + JavaScript
Gán nội dung cho phần tử
Phương thức html(), text() như trên không có tham số thì là đọc và trả về nội dung phần tử, còn nếu nó có tham số thì trở thành thiết lập gán giá trị tham số cho phần tử.
Đọc và gán giá trị phần tử val()
Để đọc hoặc gán giá trị cho các phần tử trong <form> sử dụng phương thức val(), khi phương thức không có tham số là đọc, khi có tham số thì là gán giá trị tham số vào giá trị phần tử.
Ví dụ dọc giá trị của phần tử select
Ví dụ đọc giá trị của input kiểu text
Chúc các bạn thành công.
JQuery có một số phương thức để tương tác với nội dung của các phần tử HTML. Trong đó phương thức html() được dùng để lấy nội dung phần tử được chọn, nó lấy cả nội dung HTML markup. Còn nếu muốn chỉ lấy nội dung text không HTML markup thì dùng phương thức text()
Ví dụ sau bấm vào phần tử p.example1 thì sẽ lấy nội dung HTML Markup và text rồi thông báo
HTML + JavaScript
Mã:
<p class="example1"><strong>Bấm vào đây</strong> <i>để lấy nội dung</i></p>
<script>
//Bắt sự kiện click cho phần tử có class .example1
$(".example1").click(function () {
//lấy phần tử bấm chuột - chính là $(".example1")
var ele_example1 = $(this);
//lấy nội dung
var htmlmarkup = ele_example1.html();
var htmlcontent = ele_example1.text();
alert("HTML Markup:\n" + htmlmarkup);
alert("HTML Content:\n" + htmlcontent);
});
</script>
Gán nội dung cho phần tử
Phương thức html(), text() như trên không có tham số thì là đọc và trả về nội dung phần tử, còn nếu nó có tham số thì trở thành thiết lập gán giá trị tham số cho phần tử.
Mã:
<div class="card p-4 m-4">
<p class="example2"><strong>Bấm vào đây</strong> <i>để thay đổi</i></p>
</div>
<script>
$(".example2").click(function () {
var ele_example2 = $(this);
var htmlmarkup = ele_example2.html();
ele_example2.html(htmlmarkup + htmlmarkup);
});
</script>
Đọc và gán giá trị phần tử val()
Để đọc hoặc gán giá trị cho các phần tử trong <form> sử dụng phương thức val(), khi phương thức không có tham số là đọc, khi có tham số thì là gán giá trị tham số vào giá trị phần tử.
Ví dụ dọc giá trị của phần tử select
Mã:
<select id="single">
<option>Chọn 1</option>
<option>Chọn 2</option>
</select>
<br>
<select id="multiple" multiple="multiple">
<option selected="selected">Chọn 3</option>
<option>Chọn 4</option>
<option selected="selected">Chọn 5</option>
</select>
<br>
<input type="text" value="giá trị text">
<br>
<p id="info1">Nơi hiện thị thông tin</p>
<script>
//Hàm đọc và hiện thị thông tin
function displayVals() {
var singleValues = $( "#single" ).val();
var multipleValues = $( "#multiple" ).val() || [];
$( "p#info1" ).html( "<b>Single:</b> " + singleValues +
" <b>Multiple:</b> " + multipleValues.join( ", " ) );
}
//Bắt sự kiện thi thay đổi giá trị
$( "#single, #multiple" ).change( displayVals );
displayVals();
</script>
Ví dụ đọc giá trị của input kiểu text
Mã:
<input id="inputtext" type="text" value="Nhập giá trị">
<p id="giatriinputtext"></p>
<script>
//Hàm đọc giá trị và hiện thị thông tin
function textthaydoi() {
var value = $( this ).val();
$( "p#giatriinputtext" ).text( value );
}
//Bắt sự kiện keyup của textbox
$( "#inputtext" ).keyup(textthaydoi);
//Cho #inputext phát sinh một sự kiện keyup ban đầu
$( "#inputtext" ).keyup();
</script>
Chúc các bạn thành công.
Nguồn: Internet
Bài viết liên quan
Bài viết mới