jQuery là gì ?

Nếu để ý bạn sẽ nhận ra trên blog này có rất nhiều thủ thuật sử dụng jQuery, vậy thực chất jQuery là cái gì và tại sao Noct lại "nghiện" nó đến vậy ?

jQuery là một Javascript Framework, một thư viện kiểu mới của Javascript hỗ trợ các nhà lập trình web tạo ra các tương tác động trên website. jQuery được khởi xướng bởi John Resig vào năm 2006 (ông này hiện đang làm trưởng dự án cho Mozzila), jQuery có mã nguồn mở và hoàn toàn miễn phí cho mọi người sử dụng. Thư viện javascript này phát triển rất nhanh, có một cộng đồng sử dụng đông đảo và được rất nhiều lập trình viên trên thế giới tham gia hoàn thiện, phát triển và viết Plugin cho nó.

Tại sao dùng jQuery ?

jQuery đơn giản hóa cách viết Javascript và tăng tốc độ xử lý các sự kiện trên trang web, giúp tiết kiệm thời gian và công sức rất nhiều so với việc ngồi viết javascript theo cách thông thường. Đúng như khẩu hiệu của nó "Viết ít hơn, làm nhiều hơn", nếu không dùng jQuery thì một chuyên gia cũng phải viết mất vài trang giấy mới làm được một nút Back to Top với hiệu ứng trượt, trong khi đó dân nghiệp dư chỉ cần vài dòng code ngắn ngủi + jQuery là đã có thể "múa rìu qua mắt thợ". Bên cạnh đó, việc sử dụng jQuery giúp giải quyết tốt vấn đề xung đột giữa các trình duyệt web.

Ngoài jQuery còn có các thư viện javascript nổi tiếng khác như mooTools, Prototype, Dojo... thế nhưng jQuery có vẻ thu hút các web designer hơn là vì nó có các ưu điểm:
- Hỗ trợ tốt việc xử lí các vấn đề thường gặp (DOM, AJAX...)
- Tương thích nhiều trình duyệt web phổ biến.
- Nhỏ gọn, dễ dùng, có nhiều tài liệu hướng dẫn sử dụng chi tiết.
- Ít xung khắc với các thư viện Javascript khác.
- Có rất nhiều Plugin.
- Nếu nắm vững CSS thì bạn có thể học nó trong một tiếng !

jQuery có thể làm được những gì ?

Hướng tới các thành phần trong HTML: nếu không sử dụng thư viện Javascript này, bạn phải viết rất nhiều dòng code mới có thể đạt được mục tiêu là di chuyển trong cấu trúc cây (Document Object Model) của một tài liệu HTML và chọn ra các thành phần liên quan. jQuery cho phép bạn chọn bất cứ thành phần nào của tài liệu để "vọc" một cách dễ dàng như sử dụng CSS.

Thay đổi giao diện của một trang web: CSS là công cụ rất mạnh để định dạng một trang web nhưng nó có một nhược điểm là không phải tất cả các trình duyệt đều hiển thị giống nhau. Cho nên jQuery ra đời để lấp chỗ trống này, vì vậy bạn có thể sử dụng nó để giúp trang web có thể hiển thị tốt trên hầu hết các trình duyệt. Hơn nữa jquery cũng có thể thay đổi class hoặc những định dạng CSS đã được áp dụng lên bất cứ thành phần nào của HTML ngay cả khi trang web đó đã được trình duyệt load thành công.

Thay đổi nội dung của tài liệu: jQuery không chỉ có thể thay đổi bề ngoài của trang web, nó cũng có thể thay đổi nội dung của chính tài liệu đó chỉ với vài dòng code. Nó có thể thêm hoặc bớt nội dung trên trang, hình ảnh có thể được thêm vào hoặc đổi sang hình khác, danh sách có thể được sắp xếp lại hoặc thậm chí cả cấu trúc HTML của một trang web cũng có thể được viết lại và mở rộng. Tất cả những điều này bạn hoàn toàn có thể làm được nhờ sự giúp đỡ của API (Giao diện lập trình ứng dụng).

Tương tác với người dùng: cho dù công cụ bạn dùng có mạnh mẽ đến mấy, nhưng nếu bạn không có quyền quyết định khi nào nó được sử dụng thì công cụ đó cũng coi như bỏ. Với thư viện javascript như jQuery, nó cho bạn nhiều cách để tương tác với người dùng ví dụ như khi người dùng nhấp chuột vào đường link thì sẽ có gì xảy ra. Nhưng cái hay của nó là không làm cho code HTML của bạn rối tung lên chính là nhờ các Event Handler.

Tạo hiệu ứng động cho những thay đổi của tài liệu: để tương tác tốt với người dùng, các web designer phải cho người dùng thấy được hiệu ứng gì sẽ xảy ra khi họ làm một tác vụ nào đó. jQuery cho phép bạn sử dụng rất nhiều hiệu ứng động như mờ dần, chạy dọc chạy ngang v.v.. và nếu vẫn chưa đủ, nó còn cho phép bạn tự tạo ra các hiệu ứng của riêng mình.

Lấy thông tin từ server mà không cần tải lại trang web: đây chính là công nghệ ngày càng trở nên phổ biến Asynchronous JavaScript And XML (AJAX), nó giúp người thiết kế web tạo ra những trang web tương tác cực tốt và nhiều tính năng. Thư viện jQuery loại bỏ sự phức tạp của trình duyệt trong quá trình này và cho phép người phát triển web có thể tập trung vào các tính năng đầu cuối, đơn giản hoá các tác vụ javascript. Ngoài những tính năng như đã nêu ở trên, jQuery còn cho phép các nhà phát triển web viết code javascript đơn giản hơn nhiều so với cách truyền thống như là các vòng lặp và điều khiển mảng.

Nếu trước đây khi chưa có nhiều Javascript Framework mạnh như jQuery, các trang web đa phần là tĩnh, tính tương tác rất kém. Việc tự phát triển mã nguồn cho trang web khá phức tạp và mất nhiều thời gian. Có thể dùng Flash để bù đắp khiếm khuyết đó, thế nhưng Flash lại không có chút giá trị nào về SEO. Chính vì vậy các thư viện javascript mở như jQuery đang rất được chú ý. Đơn cử như việc Blogger sử dụng jQuery cho tính năng Dynamic View mới ra gần đây.

Ngay trên blog này sử dụng đến 6 hiệu ứng + 2 Plugin của jQuery (đang định bổ sung vài cái nữa), tất cả đều hoạt động rất mượt và ổn định. Mình hoàn toàn có thể bỏ bớt jQuery effect để đạt được tốc độ tối ưu cho blog, nhưng nếu như vậy thì Noct Blog chẳng khác gì các trang web tĩnh chán ngắt khác và chắc là sẽ không được nhiều người chú ý.

Bạn e ngại việc sử dụng thư viện jQuery khiến giảm tốc độ tải trang web ? Đúng, jQuery khiến trang web load chậm hơn một chút nhưng mình khẳng định là nhanh hơn nhiều so với đoạn code Recent Posts mà bạn vẫn thường dùng (tải feed về, xử lí feed, hiển thị...). Nếu vẫn cảm thấy chậm, bạn cần nâng cấp phiên bản mới của trình duyệt web hoặc tốt hơn hết là thay mới cỗ PC già cỗi của mình. Khi sử dụng jQuery thì bạn được nhiều hơn là mất, trang web của bạn trông sẽ chuyên nghiệp hơn, load chậm hơn một chút nhưng sẽ có nhiều visitor hơn. Cũng giống như là bạn đi tới cơ quan của mình bằng một chiếc xe xịn, bạn được nhiều người hâm mộ, bạn cảm thấy hài lòng mặc dù biết nó tốn xăng.

Phiên bản mới nhất của jQuery là 1.6 được cung cấp free tại địa chỉ https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js bởi các server cực mạnh của Google, bạn có thể sử dụng các phiên bản cũ hơn nếu thích. Cú pháp để chèn jQuery vào trong template là như thế này:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
Đừng chần chừ e ngại, hãy trải nghiệm jQuery bằng các thủ thuật đơn giản trên blog này, có thể bạn sẽ mê nó ngay.

Tất cả các hiệu ứng của jQuery chỉ cần dùng chung một liên kết đến jquery.js là đủ, và hãy đảm bảo là nó ở vị trí trên cùng.
Ví dụ:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<Code thủ thuật 1>
............................
<Code thủ thuật 2>
............................

Bài viết có sử dụng tư liệu của izwebz.com