0

jQuery #1 Giới thiệu về jQuery

Nói đến làm web, chắc chắn ai cũng đã từng dùng hoặc nghe nói đến jQuery, một bộ thư viện javascript rất nổi tiếng. Bài viết xin giới thiệu về jQuery để các bạn bạn hiểu jQuery là gì, lợi ích và dùng nó như thế nào?

jQuery là gì?

Là một thư viện javascript, cung cấp nhiều hàm và tính năng để tương tác xử lý các thành phần HTML trên trang web (HTML DOM – Document Object Model).

jQuery dùng để làm gì?

Như đã nói ở trên, ta dùng jQuery để xử lý DOM trên trang web. Khi chưa có jQuery (và các thư viện tương tự), ta sẽ phải xử lý DOM rất rất cực khổ; ví dụ sẽ phải thường xuyên gọi document.getElementByTagName(<tên tag>) để lấy được element muốn thao tác, sẽ phải tự mình duyệt qua html tree node.

html tree nodes

Còn khi dùng jQuery, cũng là gọi hàm thôi nhưng nó ngắn gọn hơn nhiều, $(<tên tag>). Không chỉ có thế, $() còn rất đặc biệc khi cho phép bạn lựa chon ngẫu nhiên một element trên trang mà ko cần phải duyệt tuần tự, … Một khi đã “lấy” được các element trên trang một cách thuận tiện, bạn sẽ tha hồ biến đổi, tạo hiệu ứng cho chúng, từ việc đổi màu text, màu background, làm nó bay nhảy trên màn hình, phóng to thu nhỏ,… cho tới thay đổi nội dung mà ko cần load lại toàn bộ trang với kỹ thuật Ajax.

jQuery dùng như thế nào?

Sử dụng jQuery rất đơn giản, cũng giống như mọi thư viện javascript khác, phải import bằng HTML tag <script/>.Vào trang chủ jQuery để download và đặt vào mã nguồn của bạn, sau đó import vào trang html:

Trong ví dụ trên, mình tải về và đặt thư viện jQuery ở thư mục js cùng cấp với file htm đang code. Bạn có thể đặt ở bất kỳ đâu, miễn khai báo đường dẫn chính xác. Hoặc bạn có thể nhúng trực tiếp js từ hosting khác, dùng 1 trong 3 dòng sau:

 

Bắt đầu code những dòng đầu tiên như thế nào?

Dĩ nhiên bạn sẽ cần code jQuery/javasript nằm trong một thẻ <script> nào đó. Để bắt đầu coding với jQuery, bạn phải nắm được điều quan trọng nhất, đó là Selector – là cú pháp để chỉ định chính xác element muốn lấy trên tài liệu HTML. Bạn sẽ dễ dàng làm quen sử dụng nếu bạn từng là một HTML Designer hay thường xuyên làm việc với CSS. Vì cú pháp Selector của jQuery hầu như giống hệt selector của CSS.

Ví dụ 1: Nhúng jQuery vào tài liệu và chuẩn bị code

Nhìn dòng 5, có vẻ như nó dài dòng hơn mong đợi? Không, bạn chỉ phải viết dòng này 1 lần và có thể nhồi tất cả code vào bên trong hàm này nếu lười gõ lại lần nữa. Thực tế thì đặt code js ở đâu cũng chạy được tại sao lại phải nhồi vào trong khối code của dòng 5? Nếu không đặt code jQuery xử lý ở trong sự kiện “Tài liệu sẵn sàng” thì có khả năng code đó sẽ không hoạt động như mong muốn. Bạn biết đấy, các thành phần trên trang web cần có thời gian để download về máy. Nếu code js đặt ở <head> chạy trước khi đoạn cuối của trang HTML chưa tải xong – jQuery selector sẽ không tìm thấy đối tượng đó. Thậm chí, nhỡ đoạn code bạn viết ra thực thi trước khi file mã nguồn jQuery tải về, sẽ gặp lỗi undefined ngay…

Ví dụ 2: làm text của đoạn văn ở thẻ p chuyển thành màu blue

Đặt đoạn code này ở dòng 6 ví dụ 1:

$("p").css("color","blue");

Tada! bây giờ thì đoạn text sẽ như thế này: jQuery js a beautiful js lib.

Cú pháp jQuery selector

Hoàng Tựa

Yêu thích lập trình web và tạo ra những thứ đẹp đẽ.

Leave a Reply

Your email address will not be published. Required fields are marked *