jQuery là gì?
JQuery là một nền tảng hỗ trợ các lập trình viên trong việc phát triển các ứng dụng trên nền tảng web. Khẩu hiệu của JQuery là "Viết ít, làm được nhiều" quả thật rất ấn tượng với những ai đã và đang sử dụng nó cho công việc của mình. JQuery được bắt đầu được phát triển từ tháng 5 / 2005. JQuery được phân phối, phát triển và bảo đảm tuân thủ theo một trong hai giấy phép là GPL & MIT.
jQuery là một thư viện JavaScript nhanh và súc tích giúp đơn giản hóa các công đoạn xây dựng tài liệu HTML đồng thời làm cho quá trình phát triển web trở nên nhanh chóng hơn. jQuery được thiết kế nhằm thay đổi cách mà bạn viết JavaScript.
Lý thuyết cơ bản về jQuery
Đây là phần lý thuyết cơ bản nhằm giúp bạn bắt đầu sử dụng jQuery. Nếu bạn chưa tạo một trang thí nghiệm, hãy tạo một trang HTML mới với nội dung như sau:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// Your code goes here
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
Sửa thuộc tính src trong thẻ script để trỏ tới nguồn file jquery.js. Ví dụ, nếu file jquery.js ở cùng thư mục với file HTML, thì bạn có thể dùng:
<script type="text/javascript" src="jquery.js"></script>
Bạn có thể hạ tải bản sao jQuery từ trang Downloading jQuery.
Chạy mã khi tài liệu sẵn sàng
Thứ đầu tiên mà hầu hết các lập trình viên Javascript thực hiện là thêm một số mã vào chương trình của họ, tương tự như sau:
window.onload = function(){ alert("welcome"); }
Bên trong đó là mã mà bạn cần chạy đúng khi trang được tải. Tuy nhiên vấn đề là ở chỗ mã Javascript không chạy cho đến khi tất cả các hình ảnh trong trang được tải xong (kể cả banner quảng cáo). Lý do cho việc sử dụng chức năng window.onload trước tiên là tài liệu HTML vẫn chưa được tải xong khi bạn cố gắng chạy mã của mình.
Để tránh cả 2 vấn đề này, jQuery có một câu lệnh đơn giản kiểm tra tài liệu và đợi cho đến khi nó được thực hiện, gọi là sự kiện sẵn sàng:
$(document).ready(function(){
// Your code here
});
Bên trong sự kiện sẵn sàng nêu trên, thêm chức năng quản lý kích trỏ cho liên kết:
$(document).ready(function(){
$("a").click(function(event){
alert("Thanks for visiting!");
});
});
Lưu file HTML và tải lại trang thử nghiệm trên công cụ trình duyệt. Kích trỏ vào liên kết trên trang và trình duyệt sẽ hiện ra thông báo pop-up trước khi đến trang chính có jQuery.
Đối với các sự kiện kích trỏ và phần lớn các sự kiện khác, bạn có thể ngăn chặn cách chạy mặc định - ở đây, theo liên kết đến jquery.com – bằng cách gọi chức năng event.preventDefault() trong bộ quản lý sự kiện:
$(document).ready(function(){
$("a").click(function(event){
alert("As you can see, the link no longer took you to jquery.com");
event.preventDefault();
});
});
Ví dụ đầy đủ
Sau đây là ví dụ về những gì mà file HTML đầy đủ có thể có được nếu bạn sử dụng script này trong file của bạn. Chú ý rằng nó luên kết đến mạng phân phối nội dung (CDN) của Google để tải file cốt lõi của jQuery. Ngoài ra trong khi script tùy biến được kèm trong thẻ <head>, nhìn chung ưu tiên đặt nó trong một file riêng và đảm bảo rằng file có thuộc tính scr trong thành phần script.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(event){
alert("As you can see, the link no longer took you to jquery.com");
event.preventDefault();
});
});
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
Thêm và bỏ một lớp CSS
Quan trọng: Các ví dụ jQuery còn lại sẽ cần được đặt trong sự kiện sẵn sàng để mà chúng hoạt động được khi tài liệu sẵn sàng hoạt động. Xem phần Chạy mã khi tài liệu sẵn sàng ở trên.
Một tác vụ phố biến là thêm (hoặc bỏ) một lớp CSS.
Trước tiên, thêm một số thông tin phong cách trong thẻ <head> trong tài liệu, trông như thế này:
<style type="text/css">
a.test { font-weight: bold; }
</style>
Kế đến thêm chức năng gọi thêm lớp (addClass) cho script của bạn:
$("a").addClass("test");
Tất cả các thành phần a trong tài liệu lúc này đều in đậm. Để loại bỏ lớp này, sử dụng chức năng loại bỏ lớp (removeClass):
$("a").removeClass("test");
Chú ý: CSS cho phép nhiều lớp được thêm vào một thành phần.
Các hiệu ứng đặc biệt
Trong jQuery, có 2 hiệu ứng sẵn có, thực sự giúp website của bạn trở nên nổi bật. Để đặt hiệu ứng này vào trang thử nghiệm, thay đổi chức năng kích trỏ mà bạn đã thêm vào lúc đầu:
$("a").click(function(event){
event.preventDefault();
$(this).hide("slow");
});
Lúc này, nếu bạn kích trỏ vào bất kỳ một liên kết thì nó sẽ biến mất từ từ.
Triệu gọi và chức năng
Triệu gọi là một chức năng được xem là đối số đến một chức năng khác và được thực thi sau khi chức năng cha đã hoàn thành. Điều đặc biệt vầ hàm triệu gọi là các chức năng xuất hiện sau khi chức năng cha có thể hoạt động trước khi chức năng triệu gọi hoạt động. Một điều quan trọng nữa cần biết là cách thức thông qua chức năng triệu gọi một cách hợp lý.
Triệu gọi không có đối số
Đối với chức năng triệu gọi không có đối số, bạn nên đặt nó như thế này:
$.get('myhtmlpage.html', myCallBack);
Chú ý rằng tham số thứ 2 ở đây đơn giản chỉ là tên chức năng (nhưng không phải là một chuỗi và không có dấu ngoặc đơn).
…
Tác giả: John Resig – Dịch giả: Huỳnh Nhật Hà
JQuery là một nền tảng hỗ trợ các lập trình viên trong việc phát triển các ứng dụng trên nền tảng web. Khẩu hiệu của JQuery là "Viết ít, làm được nhiều" quả thật rất ấn tượng với những ai đã và đang sử dụng nó cho công việc của mình. JQuery được bắt đầu được phát triển từ tháng 5 / 2005. JQuery được phân phối, phát triển và bảo đảm tuân thủ theo một trong hai giấy phép là GPL & MIT.
jQuery là một thư viện JavaScript nhanh và súc tích giúp đơn giản hóa các công đoạn xây dựng tài liệu HTML đồng thời làm cho quá trình phát triển web trở nên nhanh chóng hơn. jQuery được thiết kế nhằm thay đổi cách mà bạn viết JavaScript.
Lý thuyết cơ bản về jQuery
Đây là phần lý thuyết cơ bản nhằm giúp bạn bắt đầu sử dụng jQuery. Nếu bạn chưa tạo một trang thí nghiệm, hãy tạo một trang HTML mới với nội dung như sau:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// Your code goes here
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
Sửa thuộc tính src trong thẻ script để trỏ tới nguồn file jquery.js. Ví dụ, nếu file jquery.js ở cùng thư mục với file HTML, thì bạn có thể dùng:
<script type="text/javascript" src="jquery.js"></script>
Bạn có thể hạ tải bản sao jQuery từ trang Downloading jQuery.
Chạy mã khi tài liệu sẵn sàng
Thứ đầu tiên mà hầu hết các lập trình viên Javascript thực hiện là thêm một số mã vào chương trình của họ, tương tự như sau:
window.onload = function(){ alert("welcome"); }
Bên trong đó là mã mà bạn cần chạy đúng khi trang được tải. Tuy nhiên vấn đề là ở chỗ mã Javascript không chạy cho đến khi tất cả các hình ảnh trong trang được tải xong (kể cả banner quảng cáo). Lý do cho việc sử dụng chức năng window.onload trước tiên là tài liệu HTML vẫn chưa được tải xong khi bạn cố gắng chạy mã của mình.
Để tránh cả 2 vấn đề này, jQuery có một câu lệnh đơn giản kiểm tra tài liệu và đợi cho đến khi nó được thực hiện, gọi là sự kiện sẵn sàng:
$(document).ready(function(){
// Your code here
});
Bên trong sự kiện sẵn sàng nêu trên, thêm chức năng quản lý kích trỏ cho liên kết:
$(document).ready(function(){
$("a").click(function(event){
alert("Thanks for visiting!");
});
});
Lưu file HTML và tải lại trang thử nghiệm trên công cụ trình duyệt. Kích trỏ vào liên kết trên trang và trình duyệt sẽ hiện ra thông báo pop-up trước khi đến trang chính có jQuery.
Đối với các sự kiện kích trỏ và phần lớn các sự kiện khác, bạn có thể ngăn chặn cách chạy mặc định - ở đây, theo liên kết đến jquery.com – bằng cách gọi chức năng event.preventDefault() trong bộ quản lý sự kiện:
$(document).ready(function(){
$("a").click(function(event){
alert("As you can see, the link no longer took you to jquery.com");
event.preventDefault();
});
});
Ví dụ đầy đủ
Sau đây là ví dụ về những gì mà file HTML đầy đủ có thể có được nếu bạn sử dụng script này trong file của bạn. Chú ý rằng nó luên kết đến mạng phân phối nội dung (CDN) của Google để tải file cốt lõi của jQuery. Ngoài ra trong khi script tùy biến được kèm trong thẻ <head>, nhìn chung ưu tiên đặt nó trong một file riêng và đảm bảo rằng file có thuộc tính scr trong thành phần script.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(event){
alert("As you can see, the link no longer took you to jquery.com");
event.preventDefault();
});
});
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
Thêm và bỏ một lớp CSS
Quan trọng: Các ví dụ jQuery còn lại sẽ cần được đặt trong sự kiện sẵn sàng để mà chúng hoạt động được khi tài liệu sẵn sàng hoạt động. Xem phần Chạy mã khi tài liệu sẵn sàng ở trên.
Một tác vụ phố biến là thêm (hoặc bỏ) một lớp CSS.
Trước tiên, thêm một số thông tin phong cách trong thẻ <head> trong tài liệu, trông như thế này:
<style type="text/css">
a.test { font-weight: bold; }
</style>
Kế đến thêm chức năng gọi thêm lớp (addClass) cho script của bạn:
$("a").addClass("test");
Tất cả các thành phần a trong tài liệu lúc này đều in đậm. Để loại bỏ lớp này, sử dụng chức năng loại bỏ lớp (removeClass):
$("a").removeClass("test");
Chú ý: CSS cho phép nhiều lớp được thêm vào một thành phần.
Các hiệu ứng đặc biệt
Trong jQuery, có 2 hiệu ứng sẵn có, thực sự giúp website của bạn trở nên nổi bật. Để đặt hiệu ứng này vào trang thử nghiệm, thay đổi chức năng kích trỏ mà bạn đã thêm vào lúc đầu:
$("a").click(function(event){
event.preventDefault();
$(this).hide("slow");
});
Lúc này, nếu bạn kích trỏ vào bất kỳ một liên kết thì nó sẽ biến mất từ từ.
Triệu gọi và chức năng
Triệu gọi là một chức năng được xem là đối số đến một chức năng khác và được thực thi sau khi chức năng cha đã hoàn thành. Điều đặc biệt vầ hàm triệu gọi là các chức năng xuất hiện sau khi chức năng cha có thể hoạt động trước khi chức năng triệu gọi hoạt động. Một điều quan trọng nữa cần biết là cách thức thông qua chức năng triệu gọi một cách hợp lý.
Triệu gọi không có đối số
Đối với chức năng triệu gọi không có đối số, bạn nên đặt nó như thế này:
$.get('myhtmlpage.html', myCallBack);
Chú ý rằng tham số thứ 2 ở đây đơn giản chỉ là tên chức năng (nhưng không phải là một chuỗi và không có dấu ngoặc đơn).
…
Tác giả: John Resig – Dịch giả: Huỳnh Nhật Hà
0 nhận xét | Viết lời bình