Jquery là gì?
Trong bài đầu tiên của series học jquery cơ bản này chúng ta sẽ tìm hiểu sơ lược và có cái nhìn tổng quan về jquery. Vậy jquery là gì?. Jquery là một thư viện javascript, nó giúp viết javascript nhanh hơn với cú pháp đơn giản hơn. Thay vì chúng ta phải viết những dòng code dài và lặp lại nhiều lần trong javascript thì jquery đã đóng gói chúng thành những phương thức sẵn có để dễ dàng sử dụng. Để học jquery bạn cần có kiến thức căn bản về HTML, CSS và javascript. Nếu chưa biết về HTML thì bạn có thể học tại seri HTML căn bản tại đây.
Jquery là gì?
Các đặc trưng cơ bản của jquery là:
- Thao tác HTML/DOM
- Thao tác CSS
- Phương thức sự kiện HTML
- Hiệu ứng và chuyển động
- Ajax
Dùng Jquery để làm gì?
- Jquery có thể cải thiện hiệu suất của ứng dụng
- Jquery tương thích hầu hết các trình duyệt
- Jquery giúp thực hiện UI mà không phải viết nhiều dòng code
- Jquery nhanh
- Dùng jquery bạn có thể tạo ra các hiệu ứng đẹp mắt cho website.
Sử dụng Jquery như thế nào?
Có 2 cách thêm thư viện jquery:
- Sử dụng local: Vào trang chủ jquery.com để tải phiên bản jquery mới nhất. Sau đó bỏ file jquery bạn vừa tải xong vào thư mục web của bạn. Bây giờ bạn có thể thêm thư viện jquery vào file HTML như sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <html> <head> <title>The jQuery Example</title> <script type = "text/javascript" src = "jquery/jquery.min.js"></script> <script type = "text/javascript"> $(document).ready(function(){ document.write("Hello, World!"); }); </script> </head> <body> <h1>Hello</h1> </body></html> |
Sử dụng Google CDN: Bạn thêm đoạn sau vào file HTML để thêm thư viện jquery vào
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <html> <head> <title>The jQuery Example</title> <script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type = "text/javascript"> $(document).ready(function(){ document.write("Hello, World!"); }); </script> </head> <body> <h1>Hello</h1> </body></html> |
Tại sao nên sử dụng CDN?
- Load trang nhanh hơn và không cần download jquery
- Tiết kiệm băng thông vì khổng phải load jquery từ server
- Có tính mềm dẻo hơn vì load file jquery tại các vị trí địa lý khác nhau gần nhất với người dùng thay vì load chỉ từ server của bạn.
Thực thi jquery code
Có 2 cách thực thi jquery code:
Khi load trang: Cách này khi trang chưa load xong thì người dùng có thể nhìn thấy hiệu ứng từ jquery nhưng bất lợi là có thể xảy ra lỗi khi những thành phần làm việc với jquery chưa load xong. Khi bạn sử dụng cách này phải đảm bảo thành phần làm việc với jquery load trước khi jquery được load bằng cách đặt jquery code ngay sau các HTML code.
1 2 3 4 5 | <script language="javascript" type="text/javascript"> $(function(){ $("#div1").css("border", "2px solid green"); });</script> |
Thực thi khi trang đã load xong: bạn phải đặt code trong hàm ready. Đây là cách an toàn và tốt hơn để thực thi code jquery. Việc đảm bảo code jquery chỉ thực thi khi trang đã load xong sẽ giúp tránh người dùng nhìn thấy những hành xử không mong muốn trên trang web của chúng ta. Là một lập trình viên thì mình khuyến khích các bạn nên sử dụng cách thứ 2 này.
1 2 3 4 5 6 7 8 9 | <script language="javascript" type="text/javascript">$(document).ready(function(){$("#div1").css("border", "2px solid green");});</script> |
Kết luận:
Trong bài đầu tiên của series học jquery cơ bản này bạn đã nắm được những khái niệm và cách sử dụng jquery. Trong bài tiếp theo mình sẽ hướng dẫn các bạn cơ bản về selector trong jquery.