Bài 03: jQuery Attributes - attr() - prop()
Trong javascript để truy xuất giá trị của một thuộc tính nào đó thì ta phải dùng cú pháp DOM Element và DOM HTML. Nhưng trong jQuery thì rất đơn ...
Trong javascript để truy xuất giá trị của một thuộc tính nào đó thì ta phải dùng cú pháp DOM Element và DOM HTML. Nhưng trong jQuery thì rất đơn giản, ta chỉ cần sử dụng một trong hai hàm attr() và prop(). Hai hàm attr() va prop() trong jquery dùng để xử lý lấy hoặc gán giá trị cho các thuộc tính của thẻ HTML.
1. jQuery Attributes Attr()
Hàm attr() trong jQuery dùng để lấy giá trị hoặc gán giá trị cho các thuộc tính của một hoặc nhiều thẻ HTML, đây là một hàm rất quan trọng và được sử dụng rất nhiều. Vậy các thuộc tính HTML là gì? Mỗi thẻ HTML sẽ có một số thuộc tính riêng của nó như id, name, src, href. Tuy nhiên ta có thể gán cho nó một thuộc tính bất kỳ vì bản chất HTML là các thẻ XML. Nhưng thuộc tính đó có tác dụng hay không thì phải phụ thuộc vào từng thẻ HTML. Ví dụ với thẻ input thì không thể có thuộc tính href, src.
Ví dụ: gán thuộc tính data-url cho thẻ input như sau:
<input type="text" name="name" value="" data-url="code24h.com" />
Hàm attr có hai cách sử dụng, cách thứ nhất là dùng để lấy giá trị của thuộc tính, cách thứ hai là gán giá trị cho thuộc tính.
Ví dụ: XEM DEMO
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
</head>
<body>
<h1>Ví dụ 1</h1>
<strong>Sở thích của bạn là gì? </strong> <br/>
<input type="checkbox" id="an" name="sothich" value="1"/> Ăn <br/>
<input type="button" id="view1" value="Xem Name và Type"/>
<input type="button" id="view2" value="Đổi type thành textbox"/>
<input type="button" id="view3" value="Đổi type thành checkbox"/>
<script language="javascript">
// Bắt đầu code jquery
$(document).ready(function(){
// Khi click vào button có id = view1
$('#view1').click(function(){
// Lấy tên của checkbox có id là an
var name = $('#an').attr('name');
// lấy type của checkbox
var type = $('#an').attr('type');
alert('Name là ' + name + ' và type là ' + type);
});
// Khi click vào button có id = view2
$('#view2').click(function(){
// Thay đổi kiểu thành textbox
$('#an').attr('type', 'textbox');
});
// Khi click vào button có id = view3
$('#view3').click(function(){
// Thay đổi kiểu thành radio
$('#an').attr('type', 'radio');
});
});
</script>
</body>
</html>2. jQuery Attributes Prop()
Hàm prop() trong jquery cũng dùng để lấy các thuộc tính của thẻ, tuy nhiên cách trả về kết quả lại khác một xíu. Đối với những thuộc tính có dạng true/false thì thay vì trả về giá trị của thuộc tính như hàm attr() thì nó sẽ trả về true hoặc false.
Ví dụ: XEM DEMO
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
</head>
<body>
<h1>Ví dụ 2</h1>
<strong>Sở thích của bạn là gì? </strong> <br/>
<input type="checkbox" id="an" name="sothich" value="1" checked/> Ăn <br/>
<input type="button" id="view1" value="Xem Name"/>
<input type="button" id="view2" value="Kiểm tra có check hay không"/>
<script language="javascript">
// Bắt đầu code jquery
$(document).ready(function(){
// Khi click vào button có id = view1
$('#view1').click(function(){
alert($('#an').prop('name'));
});
$('#view2').click(function(){
alert($('#an').prop('checked'));
});
});
</script>
</body>
</html>Các bạn thấy khi click vào button thứ hai thì nó alert() lên true, còn nếu bạn bỏ checked đi thì nó sẽ alert() lên là false.
3. Lời kết
Cả hai hàm attr() và prop() đều có một mục đích là xử lý lấy và gán giá trị cho các thuộc tính trong thẻ HTML. Tuy nhiên ở hàm prop() thì hơi khác một xíu đó là nó sẽ trả về true hoặc false cho những thuộc tính có kiểu true/false như checked, selected. Các bạn chú ý điểm này để sư dụng để khỏi nhầm lẫn nhé.
Nguồn: code24h.com
