-------
Phần 28.
Các xử lý cơ bản trong jQuery
Ở cuối phần trước có nói về dấu nháy đơn (‘ ’) và nháy kép
(“ ”) trong JavaScript và jQuery. Dùng dấu nào cũng được.
Thấy trên stackoverflow họ cũng bàn tán về nó: http://stackoverflow.com/questions/242813/when-to-use-double-or-single-quotes-in-javascript
Thôi chọn dấu nháy đơn vậy, để gõ cho nhanh (không phải giữ
phím Shift khi gõ). Tuy nhiên, khi nào học đến JSON thì phải để ý một chút.
Đây là
clip số 9: các set-get (thiết lập – lấy) giá trị thuộc tính của element
- text():
lấy hoặc thiết lập phần văn bản của phần tử
Ví dụ,
lấy giá trị văn bản
$(‘#btn1’).click(function()
{
alert($(‘h1’).text());
});
Ví dụ,
gán giá trị văn bản
$(‘#btn1’).click(function()
{
$(‘h1’).text(‘Đã
bấm rồi!’);
});
Để ý:
set – có truyền giá trị cho hàm text(‘giá trị’); get – không truyền giá trị cho
hàm text();
- html():
lấy hoặc thiết lập nội dung HTML của phần tử
Ví dụ,
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="UTF-8">
<title>Document</title>
<script
src="jquery.js"></script>
<script>
$(document).ready(function()
{
$('#button').click(function()
{
var
frm = $('form').html();
alert(frm);
});
});
</script>
</head>
<body>
<form action="#">
<label>Họ tên:
</label>
<input
type="text" id="ho-ten"> <br />
<label>Mật khẩu:
</label>
<input
type="password"> <br />
<label></label>
<input
type="submit" value="Đăng nhập" id="button">
</form>
</body>
</html>
Ví dụ,
$(document).ready(function() {
$('#button').click(function()
{
var
frm = $('form');
frm.html('hi');
});
});
- val():
thiết lập hoặc lấy giá trị của trường dữ liệu (của các input)
Ví dụ,
$(document).ready(function()
{
$('#button').click(function()
{
var
hoTen = $('#ho-ten').val();
$('#button').val(hoTen);
});
});
Phương
thức attr(‘tên thuộc tính’): lấy giá trị của thuộc tính.
Phương
thức attr(‘tên thuộc tính’, ‘giá trị’): thiết lập giá trị cho thuộc tính.
Ví dụ,
$(document).ready(function() {
alert($('input').attr('id'));
$('input').attr('id',
'username');
});
Phương
thức prop(‘tên thuộc tính’): lấy giá trị của thuộc tính.
Phương
thức prop(‘tên thuộc tính’, ‘giá trị’): thiết lập giá trị cho thuộc tính.
$(document).ready(function() {
alert($('input').prop('id'));
$('input').prop('id',
'username');
});
Đọc
thêm để phân biệt prop() và attr().
Ví dụ,
<script>
$(document).ready(function()
{
var
attr = $('#chk').attr('checked');
var
prop = $('#chk').prop('checked');
alert('gia
tri cua attr: ' + attr + ' - prop: ' + prop);
});
</script>
[HTML]
<form
action="#">
<input
type="checkbox" id = "chk" checked="checked">
</form>
Đây là
clip số 10: làm việc với radio và checkbox
Ví dụ
về radiobox,
<!DOCTYPE html>
<html lang="en">
<head>
<meta
charset="UTF-8">
<title>Document</title>
<script
src="jquery.js"></script>
<script>
$(document).ready(function()
{
$('#btnSubmit').click(function(){
var
rdChecked = $('input[type="radio"]:checked');
if
(rdChecked.length > 0) {
$('#result').text('checked');
}
else {
$('#result').text('no
checked');
}
});
});
</script>
</head>
<body>
<label>
<input
type="radio" name="gender" value="1" /> Male
</label>
<label>
<input
type="radio" name="gender" value="0" /> Female
</label>
<br />
<input
type="submit" value="Submit" id="btnSubmit" />
<div
id="result">
</div>
</body>
</html>
Ví dụ về
checkbox: kiểm tra xem người dùng đã đánh dấu chọn vào những ngày nào, lấy giá
trị và ngày tương ứng.
[jQuery]
<script>
$(document).ready(function()
{
$('#btnSubmit').click(function()
{
var
cbChecked = $('input[type="checkbox"]:checked')
var
result = '';
cbChecked.each(function()
{
result
+= $(this).attr('name') + ' - ' + $(this).val() + ' ';
});
$('#result').text(result);
});
});
</script>
[HTML]
<label><input type="checkbox"
value="2" id="cbMon" name="cbMonday"
/>Mon</label>
<label><input
type="checkbox" value="3" id="cbTue" name="cbTuesday"
/>Tue</label>
<label><input
type="checkbox" value="4" id="cbWeb" name="cbWednesday"
/>Wed</label>
<label><input
type="checkbox" value="5" id="cbThu" name="cbThursday"
/>Thu</label>
<br />
<input
type="button" value="Submit" id="btnSubmit">
<div
id="result"></div>
Đây là
clip số 11: làm việc với select box (hộp chọn)
Ví dụ
single select,
[HTML]
<select
id="selectSkill">
<option>Chọn
ngôn ngữ</option>
<option
value="HTML">HTML</option>
<option
value="CSS">CSS</option>
<option
value="JS">JS</option>
<option
value="PHP">PHP</option>
</select>
<input
type="button" value="Submit" id="btnSubmit">
<div
id="result"></div>
[JavaScript]
$(document).ready(function() {
$('#btnSubmit').click(function()
{
var
result = '';
var
selected = $('#selectSkill option:selected');
if
(selected.length > 0) {
result
= selected.val();
$('#result').html(result);
}
});
});
Ví dụ multiple
select,
[HTML]
<select id="selectSkill" multiple>
<option>Chọn
ngôn ngữ</option>
<option
value="HTML">HTML</option>
<option
value="CSS">CSS</option>
<option
value="JS">JS</option>
<option
value="PHP">PHP</option>
</select>
<input
type="button" value="Submit" id="btnSubmit">
<div
id="result"></div>
[JavaScript]
$(document).ready(function() {
$('#btnSubmit').click(function()
{
var
result = '';
var
selected = $('#selectSkill option:selected');
if
(selected.length > 0) {
selected.each(function(){
result
+= $(this).val() + '<br />';
});
$('#result').html(result);
}
});
});
-----------
Cập nhật [3/10/2017][3/10/2016]
-----------