I. Giới thiệu cơ bản về jQuery.

1. jQuery là gì?

  • jQuery là một thư viện kiểu mới của JavaScript, hệ thông lại các hàm của JavaScript để cho ngắn gọn, dễ nhớ, dễ dùng, được tạo bởi John Resig vào năm 2006 với một phương châm tuyệt vời : Write less, do more – Viết ít, làm nhiều.
  • jQuery làm đơn giản hóa việc truyền tải HTML, xử lí sự kiện và tương tác với Ajax.
  • jQuery được tích hợp nhiều module khác nhau từ module hiệu ứng cho đến module truy vấn selector. jQuery được sử dụng đến 99% trên tổng số website trên thế giới (trừ những website sử dụng JS Framework).

2. 1 . Những chức năng cơ bản của thư viện jQuery.

  • Thao tác DOM − jQuery giúp dễ dàng lựa chọn các phần tử DOM để traverse (duyệt) một cách dễ dàng như sử dụng CSS, và chỉnh sửa nội dung của chúng bởi sử dụng phương tiện Selector mã nguồn mở, mà được gọi là Sizzle.
  • Xử lý sự kiện − jQuery giúp tương tác với người dùng tốt hơn bằng việc xử lý các sự kiện đa dạng mà không làm cho HTML code rối tung lên với các Event Handler.
  • Hỗ trợ AJAX − jQuery giúp bạn rất nhiều để phát triển một site giàu tính năng và phản hồi tốt bởi sử dụng công nghệ AJAX.
  • Hiệu ứng − jQuery đi kèm với rất nhiều các hiệu ứng đa dạng và đẹp mắt mà bạn có thể sử dụng trong các Website của mình.
  • Gọn nhẹ − jQuery là thư viện gọn nhẹ – nó chỉ có kích cỡ khoảng 19KB (gzipped).
  • Được hỗ trợ hầu hết bởi các trình duyệt hiện đại − jQuery được hỗ trợ hầu hết bởi các trình duyệt hiện đại, và làm việc tốt trên IE 6.0+, FF 2.0+, Safari 3.0+, Chrome và Opera 9.0+
  • Cập nhật và hỗ trợ các công nghệ mới nhất − jQuery hỗ trợ CSS3 Selector và cú pháp XPath cơ bản.

 2.2. Tại sao jQuery làm việc tốt ?

  • Tận dụng kiến thức về CSS. Các jQuery Selector hoạt động y chang như CSS Selector với cùng cấu trúc và cú pháp. Chính vì thế thư viện jQuery là cửa ngõ cho các web designer muốn thêm nhiều tính năng hơn nữa cho trang web của mình. Bởi vì điều kiện tiên quyết để trở thành một web designer chuyên nghiệp là khả năng sử dụng CSS thuần thục. Với kiến thức có sẵn về CSS, bạn sẽ có sự khởi đầu thuận lợi với jQuery.
  • Hỗ trợ Plugin. Để tránh bị rơi vào trạng thái quá tải tính năng, jQuery cho phép người dùng tạo và sử dụng Plugin nếu cần. Cách tạo một plugin mới cũng khá đơn giản và được hướng dẫn cụ thể, chính vì thế cộng đồng sử dụng jQuery đã tạo ra một loạt những plugin đầy tính sáng tạo và hữu dụng.
  • Xoá nhoà sự khác biệt giữa trình duyệt. Một thức tế tồn tại là mỗi một hệ thống trình duyệt lại có một kiểu riêng để đọc trang web. Dẫn đến một điều làm đau đầu các web designer là làm thế nào để cho trang web có thể hiển thị tốt trên mọi trình duyệt. Cho nên đôi khi người ta phải làm hẳn một phần code phức tạp để đảm bảo rằng trang web của họ được hiển thị gần như tương đồng ở các trình duyệt phổ biến. Jquery giúp bạn thêm một lớp bảo vệ cho sự khác biệt của trình duyệt và giúp quá trình này diễn ra dễ dàng hơn rất nhiều.
  • Luôn làm việc với Set. Ví dụ khi chúng ta yêu cầu jQuery tìm tất cả các thành phần có class là delete và ẩn chúng đi. Chúng ta không cần phải loop qua từng thành phần được trả về. Thay vào đó, những phương pháp như là hide() được thiết kế ra để làm việc với set thay vì từng thành phần đơn lẻ. Kỹ thuật này được gọi là vòng lặp ẩn, điều đó có nghĩa là chúng ta không phải tự viết code để loop nữa mà nó vẫn được thực thi, chính vì thế code của chúng ta sẽ ngăn hơn rất nhiều.
  • Cho phép nhiều tác vụ diễn ra trên cùng một dòng. Để tránh phải sử dụng những biến tạm hoặc các tác vụ lặp tốn thời gian, jQuery cho phép bạn sử dụng kiểu lập trình được gọi là Chaining cho hầu hết các method của nó. Điều đó có nghĩa là kết quả của các tác vụ được tiến hành trên một thành phần chính là thành phần đó, nó sẵn sàng cho tác vụ tiếp theo được áp dụng lên nó. Những chiến lược được nêu ở trên giúp kích thước của jQuery rất nhỏ bé chỉ khoảng trên dưới 20Kb dạng nén. Nhưng vẫn đảm bảo cung cấp cho chúng ta những kỹ thuật để giúp code trên trang nhỏ gọn và mạch lạc.

3. Cách sử dụng jQuery.

Có hai cách để sử dụng jQuery:

  • Cài đặt nội bộ − Bạn có thể tải jQuery Library trên thiết bị nội bộ của bạn và include nó trong HTML code. Cách này là bạn tự host bằng cách vào trang http://jquery.com tải file mới nhất về và load file này mỗi lần sử dụng jquery.
  • Sử dụng từ CDN (CDN Based Version) − Bạn có thể include thư viện jQuery vào trong HTML code một cách trực tiếp từ Content Delivery Network (CDN). Cách này thay vì bạn upload plugin jQuery lên host thì bạn chỉ cần việc nhúng thẻ chèn jQuery từ file jQuery có sẵn trên máy chủ CDN của Google. Ưu điểm cách này là tiết kiệm băng thông.

VD:

Bây giờ bạn có thể include thư viện JQuery vào trong HTML file của bạn như sau:


   
      The jQuery Example
       type="text/javascript"  src="../jquery/jquery-2.1.3.min.js">
		
       type="text/javascript">
         $(document).ready(function(){
            document.write("Hello, World!");
         });     		
   	
   
      

Hello

Nó sẽ cho kết quả:

Hello, World!

Bây giờ chúng ta viết lại ví dụ trên bởi sử dụng thư viện jQuery từ Google CDN.


   
      The jQuery Example
       type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      		
       type="text/javascript">
         $(document).ready(function(){
            document.write("Hello, World!");
         });
      
   	
   
      

Hello

Nó sẽ cho kết quả:

Hello, World!

Cách viết đoạn jQuery đầu tiên:

Để bắt đầu minh sẽ chuẩn bị một ví dụ minh họa dưới đây.

Chuẩn bị 1 tài liệu HTML mẫu như sau:

<html>
<head>
    <title>Jquery cho newbie</title>
    <script type=”text/javascript” src=”path/…/jquery-latest.js”></script>
</head>
<body>
    <button id=”button” href=”#”>click me</button>
    <p class=”para”>Chào các bạn</p>
</body> 
</html>

Kế tiếp mình sẽ chèn thêm đoạn jQuery này vào tài liệu HTML trên, chèn trong cặp thẻ nhé.


    $(document).ready(function(handler ) { 
        $(“#button”).click(function(handler) {
            $(“p”).fadeOut();
        });
    });

Kết quả của đoạn mã trên là khi bạn click vào button “click me” thì đoạn văn bản ở sau nó sẽ bị mờ dần và ẩn đi.

Đầu tiên, thao tác cơ bản nhất của Jquery là chọn một một phần tử trong cấu trúc DOM (Document Object Model) của tài liệu html.  Bạn làm điều đó bằng cách sử dụng hàm $(  ) (hoặc hàm Jquery(  ) ). Hàm $(  ) là một Jquery Object, trong cặp ( ) là một chuỗi tham số, có thể là CSS Selector.

Ở ví dụ trên chính là $(document), $(“#button”), $(“p”). Rõ ràng bạn có thể hướng tới các thành phần trong tài liệu html một cách thật dễ dàng bằng cách tận dụng kiến thức về CSS vì các Jquery Selector có cùng cấu trúc và cú pháp như CSS Selector. Và bằng cách đó bạn hoàn toàn có thể định dạng và thay đổi giao diện của một trang web giống như cách mà CSS đã làm và yên tâm rằng nó hiển thị tôt trên tất cả các trình duyệt. Đây cũng là một ưu điểm của jQuery so với CSS.

Hàm fadeOut() trong ví dụ trên tạo hiệu ứng ẩn mờ dần cho thành phần được chọn. Chi tiết về những hàm tạo hiệu ứng cũng như những hàm khác các bạn có thể xem đầy đủ tại trang chủ của nó http://api.jquery.com/và tra cứu khi cần.

Một điều chú ý nữa đó là hàm $(document ).ready() ở trên. Hàm này đảm bảo cho tất cả mã Jquery đặt trong nó được thực thi sau khi toàn bộ tài liệu html được load xong. Và thường thì chúng ta vẫn làm như vậy.

4.Cách để gọi một hàm thư viện jQuery?

Cũng tương tự như JavaScript, trước khi chúng ta sử dụng các đoạn code của jQuery để đọc hay chỉnh sửa các đối tượng DOM, chúng ta cần đảm bảo rằng chúng ta bắt đầu thêm các sự kiện ngay sau khi DOM sẵn sàng.

Nếu bạn muốn một sự kiện làm việc trên trang của bạn, bạn nên gọi nó bên trong Hàm $(document).ready(). Mọi thứ bên trong sẽ tải ngay sau khi DOM được tải và trước khi nội dung trang được tải.

Để làm điều này, chúng ta đăng ký một sự kiện đã sẵn sàng cho tài liệu như sau:

$(document).ready(function() {
   // do stuff when DOM is ready
});

Để gọi bất kỳ hàm thư viện jQuery nào, sử dụng các thẻ HTML script như dưới đây:


   
      The jQuery Example
       type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      
       type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("div").click(function() {alert("Hello, world!");});
         });
      
   	
   
      
id=“mydiv”> Click on this to see a dialogue box.

 


   	
  • Hàm $() sử dụng để lấy ra một phần tài liệu HTML :
$("#element")
  • Bạn có thể dùng hàm $() để chạy hàm sau khi một sự kiện phát sinh
$(function()

  {

      // bắt đầu hàm của jQuery...

  });

II. So sánh jQuery với JavaScript thuần túy.

Trên đây là giới thiệu những điều cơ bản về jQuery, chúng ta cùng nhắc lại khái niệm:

  1. Javascript là một ngôn ngữ lập trình dùng để tương tác cho trang web, thực hiện một số tác vụ không thể thực hiện được với chỉ HTML như kiểm tra thông tin nhập vào, tự động thay đổi hình ảnh … Nó được chèn vào các trang web bởi tất cả các trình duyệt hiện đại. Javascript được thông dịch trong trang HTML sau khi toàn bộ trang được load nhưng trước khi trang được hiển thị.
  2. JQuery là một thư viện của javascript nên nó cũng là file js thông thường, nó không làm mọi thứ cho bạn mà giúp bạn viết code javascript nhanh hơn, đơn giản hơn và tăng tốc độ xử lý các sự kiện trên trang web. Nó cũng giúp giải quyết tốt vấn đề xung đột giữa các trình duyệt web.

– Javascpript là một ngôn ngữ lập trình( đối tượng, mảng, số, chuỗi, tính toán)

– JQuery là một thư viện của javascript.

Chúng ta cùng làm một số ví dụ để hiểu rõ hơn

VD: Lấy giá trị của một ID nào đó và cho hiển thị thông báo ra màn hình.

Sử dụng JS thuần :

//Nếu bạn muốn lấy giá trị của nó, bạn phải sử dụng chuỗi hàm sau :
 
 var myContent = document.getElementById('content');
 alert(myContent.value);

Và sử dụng Jquery :

alert($('#content').val());


Kết luận:
 

Nếu như bạn nào đã biết về javascript có thể dễ dàng nhận ra rằng bộ mã của jQuery đơn giản và dễ sử dụng hơn Javascript rất nhiều. Điều này làm giảm thời gian cũng như công sức của lập trình viên một cách đáng kể. Đó cũng là 1 lý do khiến Jquery trở thành một trong những thư viện của JavaScript được yêu thích nhất. Chính vì thế những web designer bắt đầu chú ý đến các thư viện JavaScript mở như jQuery để tạo ra các hiệu ứng có thể tương tác trực tiếp với người đọc một cách nhanh chóng và dễ dàng hơn rất nhiều là sử dụng thuần JavaScript. Như vậy cái bạn cần hiểu, từ một phuơng thức nào đó, Jquery có thể thực thi các lệnh JS thông qua cách viết của riêng nó đễ dễ dàng, ngắn gọn hơn, nhưng thực sự nền tảng nó vẫn chỉ là JS và JavaScript là nền tảng cho sự phát triển của các thư viện khác
.

Advertisements