jQuery là gì?
 |
| jQuery là gì? Công dụng của jQuery trong thiết kế website là gì? |
Các module chính của jQuery bao gồm:
- Ajax - xử lý Ajax
- Atributes - Xử lý các thuộc tính của đối tượng HTML
- Effect - xử lý hiệu ứng
- Event - xử lý sự kiện
- Form - xử lý sự kiện liên quan tới form
- DOM - xử lý Data Object Model
- Selector - xử lý luồng lách giữa các đối tượng HTML
Tính năng quan trọng của jQuery là gì?
 |
| jQuery là bước tiến đột phá mới cho lập trình website |
- jQuery tự động sửa lỗi và chạy được trên mọi trình duyệt phổ biến. Ví dụ như Chrome, Firefox, Safari, MS Edge, IE, Android và iOS.
- jQuery cũng khiến việc tạo Ajax dễ dàng hơn. Ajax hoạt động bất đồng bộ (asynchronously) với phần còn lại của code.
- jQuery sẽ giúp bạn thêm hoặc xóa yếu tố DOM trong một trang web HTML. Giúp đóng gói các dòng code dễ dàng hơn.
- Việc tạo hiệu ứng cũng được đơn giản hóa bởi jQuery. Giống với code snippet ở trên có hiệu ứng animation, nó phủ các dòng code và bạn chỉ việc thêm biến/nội dung.
- HTML document traversal, hiệu ứng, và việc điều khiển sự kiện cũng được thực hiện tốt hơn với jQuery.
Cách viết chương trình jQuery cơ bản
 |
| Được ứng dụng vào hầu hết các website hiện nay, việc học jQuery luôn luôn là điều cần thiết |
Sử dụng javascript thuần
HTML:<input type="text" id="id-textbox" value=""/> <br/> <input type="button" id="id-button" onclick="showTextVal()" value="Alert"/><br>
JavaScript:
function showTextVal(){
var value = document.getElementById('id-textbox').value;
alert(value);
}
Ở
button tôi đã gắn hàm showTextVal() vào sự kiện click, sau đó tôi có định nghĩa một hàm showTextVal() với chức năng là hiển thị lên nội dung của textbox. Bây giờ ta sẽ tham khảo bài giải trong jQuery nhé.Sử dụng thư viện jQuery
Như tôi đã giới thiêu ở phần jQuery là gì, jQuery là một thư viện viết bằng Javascript. Muốn sử dụng jQuery ta phải download về. Sau đó đặt trong project và dùng thẻscript để gọi file jquery ra với cú pháp:
<script language="javascript" src="duong_dan_toi_file_jquery.js"></script>
index.html với nội dung như sau:
<!DOCTYPE html> <html> <head> <title>Chạy chương trình jquery đầu tiên</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>jQuery</h1> <input type="text" id="id-textbox" value=""/> <br/> <input type="button" id="id-button" value="Alert"/> <script language="javascript"> // Code jQuery tại đây </script> </body> </html>
Trong file
index.html mình đã import file jQuery vào và đồng thời tạo một thẻ script nằm phía dưới để code những đoạn mã jQuery. Điều này tuân thủ nguyên tắc phải import file jQuery rồi mới sử dụng được.
Bước 3: Viết sự kiện click với jQuery.
Ở bước này thì trước tiên ta tìm hiểu cú pháp của jQuery đã nhé. jQuery luôn bắt đầu bằng ký tự đô la $ hoặc dòng chữ jQuery.
// Lấy đối tượng có id = id-button trong javascript
var object = document.getElementById('id-button');
// Lấy đối tượng có id = id-button trong jQuery
var object = $('#id-button');
//Hoặc
var object = jQuery('#id-button');
Bạn sửa lại file
index.html tại phần xử lý jQuery mà mình đã đánh dấu như sau:// Khi click vào button có id = id-button
$('#id-button').click(function()
{
// Cách 1: Khai báo biến và lấy giá trị
var textbox = $('#id-textbox');
alert(textbox.val());
// Cách 2: Truy xuất trực tiếp
alert($('#id-textbox').val());
});
Trong đó:
Bạn thấy rõ ràng trong ví dụ tôi đã code theo thứ tự các hàm alert từ 0 -> 4, nhưng vì đoạn thứ 3 tôi đặt trong sự kiện
Rất đơn giản phải không nào, bây giờ bạn ví dụ dưới đây nhé:
$('#id-button').click()có nghĩa là gán sự kiện click cho thẻ HTML cóid="id-button", tham số truyền vào là một hàm xử lý chương trình khi xảy ra sự kiện click.$('#id-textbox')có nghĩa là lấy thẻ HTML cóid="id-textbox"$('#id-textbox').val()có nghĩa lấy giá trị của thẻ input cóid="id-textbox".
Quy trình biên dịch của javascript
Cũng như các ngôn ngữ lập trình khác như PHP, C# thì javascript sẽ biên dịch từ trên xuống dưới và từ trái qua phải. Tuy nhiên trong javascript có thêm một số đặc điểm hơi khác xíu, đó là sự kiệnwindow.onload, khi gặp những đoạn code nằm trong sự kiện này thì trình biên dịch sẽ bỏ qua và cho tới khi trang web load xong thì thực thi những đoạn code bên trong nó.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<script language="javascript">
alert('Đoạn thứ nhất');
alert('Đoạn thứ hai');
window.onload = function (){
alert('Đoạn thứ ba');
};
alert('Đoạn thứ 4');
</script>
</body>
</html>
window.onload nên nó sẽ được biên dịch sau cùng.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="demo">
Noi dung ben trong
</div>
<script language="javascript">
// Nếu như ta đặt nội dung thẻ script này trên thẻ div thì sẽ xuất hiện lỗi, vì
// theo quy trình thì nó biên dịch từ trên xuống và từ trái sang, nhưng lúc này
// thẻ div lại nằm dưới nên nó ko tìm thấy thẻ div
alert(document.getElementById('demo').innerHTML);
</script>
</body>
</html>
Sự kiện onload trong jQuery
Với javascript thuần thì ta gọi là sự kiệnwindow.onload như sau:
window.onload = function(){
// Nội dung bên trong
};
Nhưng với jQuery thì ta sẽ gọi cách khác:
$(document).ready(function(){
/*Nội dung bên trong*/
});
Rất đơn giản phải không nào, bây giờ bạn ví dụ dưới đây nhé:
<!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>
<script language="javascript">
alert('Lần thứ nhất');
alert('Lần thứ hai');
$(document).ready(function(){
alert('Lần thứ ba');
});
alert('Lần thứ bốn');
</script>
</body>
</html>
Hy vọng sau khi đọc xong bài viết này bạn đã có thêm kiến thức về "jQuery là gì?". Từ đó hoàn thiện thêm về thiết kế website cho trang của mình. Chúc bạn thành công.
0 Nhận xét