Học jquery từ cơ bản đến nâng cao phần 1

vnfit.com · 25/2/15

Học jquery từ cơ bản đến nâng cao phần 1

Giới thiệu về jquery

Học jquery dễ hay khó phụ thuộc vào kinh nghiệm của bạn về html, css, javascript. Về cơ bản để học được jquery mình mặc định các bạn đã biết basic về html, css, javascript. Điều quan trọng để học nhanh jquery nữa là bạn nên biết về khái niệm DOM trong html. Bạn có thể tìm kiếm từ khóa “DOM HTML” trên google hoặc có thể tham khảo bài viết trên w3school “JavaScript HTML DOM” đành phải chịu khó đọc nó vậy có thời gian mình sẽ viết khái quát và cơ bản cho các bạn chưa làm quen có thể dễ hiểu. Nói tóm lại là các bạn nên có kiến thức cơ bản những cái mình đã nêu trước đã nếu chưa có hãy đọc qua nó rồi chúng ta tiếp tục vào từng bài từng bài học jquery. Bạn không cần lo lắng dù chưa có những kiến thức cơ bản kia xong update dần dần theo thời gian. Okie giờ chúng ta vào chương trình.

Jquery đơn giản hiểu nó thế này trước viết mã javascript mệt quá họ nghĩ ra một cái thư viện giảm tải việc viết mã để xử lý. Về bản chất jquery chính là một thư viện của javascript. Vì thế các bạn có kiến thức về js rồi thì đừng có lo lắng mà coi đó là thế mạnh vì việc học jquery đơn giản chi là học thư viện của js thôi. Cũng giống như các bạn học CI, Yii, Cake php của php mà thôi.

Jquery hoạt động như thế nào?
JQuery: Cơ bản nhất
đây là một demo cơ bản nhất về jquery giúp bạn có cái nhìn đầu tiên về jquery.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<a href=" jquery.com"> jQuery</a>
<script src=" jquery.js"></script>
<script>
// code jquery sẽ đặt trong này nhé
$( document ).ready(function() {

$( "a" ).click(function( event ) {
alert( "As you can see, the link no longer took you to jquery.com" );
event.preventDefault();
});
});
</script>
</body>
</html>
Bạn có thể download jquery về máy tại đây Downloading jQuery và đặt nó cùng thư mục cùng cấp với file html nhé.

Chú ý: khi bạn download jQuery, tên file sẽ chứa đựng phiên bản, ví dụ: jquery-x.y.z.js. Bạn có thể thay đổi tên thành jquery.js hoặc bạn để nguyên vẫn không có vấn đề gì nhé quan trọng là bạn link đúng đường dẫn đến file là okie nhé.

Hiểu về Document Ready
Để chắc chắc code của bạn chạy sau khi trình duyệt tải về đầy đủ trang web, Nhiều chương trình javascript sử dụng hàm onload:

window.onload = function() {
alert( "welcome" );
};
Thật không may, Code của bạn không chạy đến khi tất cả mọi hình ảnh (images), và bao gồm cả banner được tải về đầy đủ dưới trình duyệt. Để có thể giải quyết vấn đề này jquery đã sử dụng “document is ready” để giải quyết vấn đề này:

$( document ).ready(function() {
// code của bạn đặt ở đây.
});
Ví dụ, trong sự kiện ready , Bạn có thể viết sự kiến click đến một link của thẻ <a>:

$( document ).ready(function() {

$( "a" ).click(function( event ) {
alert( "As you can see, the link no longer took you to jquery.com" );
event.preventDefault();
});
});
Bạn chú ý từ nay về sau khi code jquery bạn nhớ đặt code của bạn trong sự kiện ready. Bạn có thể tham khảo ví dụ ngay đầu tiên của bài “ví dụ cơ bản về jquery”.

Thêm và xóa HTML Class:
Đầu tiên, thêm css vào trong cặp thẻ <head> của file html, giống như dưới:

<style>
a.test {
font-weight: bold;
}
</style>
Tiếp, thêm class bằng cách gọi script .addClass() :

$( “a” ).addClass( “test” );

Tất cả thẻ <a> bây giờ chữ đều chuyển sang chữ đậm ( bold ).

$( “a” ).removeClass( “test” );

Hiệu ứng
Jquery cung cấp cho chúng ta những hiệu ứng ( effects ) giúp tạo cảm giác chậm lại. ví dụ bên dưới, Nếu bạn click vào thẻ <a> sẽ làm cho thẻ <div> của chúng tôi từ ẩn đi:

$( "a" ).click(function( event ) {
event.preventDefault();
$( "div" ).hide( "slow" );
});
Gọi lại hàm (Callbacks function)
Không giống như các ngôn ngữ khác, JavaScript có thể gọi lại một hàm khi một hàm khác thực hiện xong.

Để sử dụng gọi lại hàm, Điều quan trọng là bạn phải xem khi nào thì hàm kết thúc và gọi lại một hàm khi hàm trước của bạn đã kết thúc.

Gọi lại hàm không tham số (callback without parameter)
Nếu bạn callback mà không có tham số (parameter) nó sẽ giống như bên dưới:

$.get( “myhtmlpage.html”, myCallBack );

Khi $.get() kết thúc việc tải về trang myhtmlpage.html, nó sẽ gọi hàm myCallBack().

Chú ý: Tham biến thức 2 trong $.get() chỉ đơn giản là tên hàm và không cần dấu ngoặc đơn đằng sau nhé.

Gọi lại hàm có tham số (callback with parameter)
Chú ý: khác với (callback without parameter) thì (callback with parameter) bạn sử dụng một function() {. Function này là một hàm vô danh nó chỉ thực hiện duy nhất một công việc là : gọi hàm myCallBack(), với 2 tham biếm param1 và param2.

$.get( "myhtmlpage.html", function() {
myCallBack( param1, param2 );
});
Khi $.get() tải thành công trang myhtmlpage.html, nó sẽ thực hiện hàm vô danh (function()), hàm này sẽ gọi myCallBack( param1, param2 ).

Nguồn: vnfit.com/hoc-jquery-tu-co-ban-den-nang-cao-phan-1/

Đăng Nhập hoặc Đăng Ký

Học jquery từ cơ bản đến nâng cao phần 1

vnfit.com Banned

Xem thêm các chủ đề cùng chuyên mục

Ủng hộ diễn đàn

Dự án con

Box tiêu biểu

Giải trí

Đăng Nhập hoặc Đăng Ký

Học jquery từ cơ bản đến nâng cao phần 1

vnfit.com Banned

Xem thêm các chủ đề cùng chuyên mục

Ủng hộ diễn đàn

Tìm kiếm hữu ích