[Bài 1] Jquery là gì? Tại sao phải sử dụng jquery?

Bạn đang ở bài 1 trong 7 bài của serie Jquery cơ bản.

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-logo

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:
<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

<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.

<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.


<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.

[Bài 1] Jquery là gì? Tại sao phải sử dụng jquery?
4.65 (92.94%) 34 votes

Từ khóa tìm kiếm:

  • jquery là gì
  • $ trong jquery là gì
  • học jquery
  • javaa script jquery là gì
  • jqueries la gi
  • jquery có tác dụng gì
  • jquery dùng để làm gì
  • tại sao phảu học javascript

Bình luận

4 Bình luận on "[Bài 1] Jquery là gì? Tại sao phải sử dụng jquery?"

Thông báo
avatar
Sắp xếp:   Mới nhất | Cũ nhất | Bình chọn nhiều
trackback

[…] bài đầu tiên của series học jquery cơ bản thì các bạn đã có khái niệm cơ bản về jquery và […]

trackback

[…] 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. Xem thêm tại đây. […]

quangmen
Guest

hỏi dại một câu mong ad giúp cho đoạn jQ này chức năng của nó là làm gì vậy ad : http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

wpDiscuz