jQuery là gì ?

/
jQuery
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 jQuery1.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
Add a Comment

20 comments

Dynamic view là một ví dụ tuyệt vời nhất trong việc ứng dụng jQuery. Lần đầu tiên em chú ý đến nó là hiệu ứng back to top và hover, rồi những slide, cái này còn đẹp hơn cả flash nữa. Và còn nhiều những ứng dụng trong ảnh, video mà blog bác đã có nói tới.

P/S: Sao bỏ label jQuery đi vậy bác?

5/11/2011 comment-delete

Đang định add lại nhưng chưa rõ cái related post nó hiển thị thế nào, để test thử :D

5/11/2011 comment-delete

Hi Noct, hình như em khoái vọc jQuery đúng hông, lúc trước anh cũng thế. Dạo này bận quá k có thời gian viết nữa.

5/11/2011 comment-delete

ngày xưa mới ra api của jquery mình cũng nhúng vào 1 đống, h có css3 html5 rồi tiện hơn, sắp tới sẽ là sự bùng nổ của jCanvas

5/11/2011 comment-delete

@HNH: anh Hà dạo này đi đâu mất tiêu không thấy tăm hơi nhỉ :D
@Pika Rock: website HTML5 hiện tại chưa thấy nhiều, mà tài liệu để học nó cũng ít quá, có khi sau này nó thay thế jQuery thật :)

5/11/2011 comment-delete

Đang loay hoay tìm hướng code cho mấy cái template mới thì được bác Noct mở đường. Em chuẩn bị vào vọc đây. Thank you!

5/12/2011 comment-delete

Nhận xét này đã bị quản trị viên blog xóa.

5/17/2011 comment-delete

@minhpham: Rất vui vì bạn đã quan tâm nhưng lần sau đừng chèn link quảng cáo của adf.ly vào URL nhé.

5/17/2011 comment-delete

Bác noct ơi em có phiên bản jquery 1.6 nè.bác lấy không mới xuất năm 2011.em cho bác đó.vì bác bị nghiên cái này mà.hihi.http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js:D

6/02/2011 comment-delete

jQuery có phải do bạn viết ra đâu mà đem đi biếu tôi, và phiên bản giới thiệu trong bài này cũng là 1.6

Lần sau đừng ngớ ngẩn vậy nữa nhé.

6/02/2011 comment-delete

Bài viết này hay thật đấy

Ồ , vậy ra Dynamic View là dùng Jquery :D

Bác Noct code một thủ thuật emoticon cho blogger dựa vào Jquery được không, em cám ơn bác ngàn lần :*

Cái của FanDung hay của Huỳnh Nhật Hà đều có nhược điểm là trên IE phải chờ load xong trang, hoặc tối thiểu phải load xong toàn bộ mớ comments rồi mới bắt đầu replace ký hiệu thành emo :(

Vì thế mình dùng code của người khác, chạy theo từng comments, lagg b-(

6/20/2011 comment-delete

Hiện tượng mà Ngan nói xảy ra trên IE mấy nhỉ ? Mình test trên IE9 thấy emo load trước cả avatar @-)
Bên jQuery có hàm .replaceWith nhưng cũng chưa rõ nó có làm tốt hơn hay không, để test thử :D

6/20/2011 comment-delete

Cố lên bác :D mình thì chả biết gì ngoài html với css :D

Mình cũng xài win7 nên cũng IE9, lâu rồi ko test được bằng các bản IE cũ hơn
Nhưng lần cuối cùng mình kiểm tra thì IE8 vẫn bị thế

6/20/2011 comment-delete

bạn có thể làm thêm một bài hướng dẫn về cách áp dụng code Jquery được người dùng chia sẻ vào blogger được hông?
...mình là dân cơ khí có được học VisualBasic ở trường nên đọc qua các bài giới thiệu ở www.3schools.com cũng có hiểu cấu trúc và cách hoạt động Jquery, Javascript.
Còn việc áp dụng vào blogger như thế nào thì mình chưa biết? trang bên dưới cung cấp Jquery và Css rất hay
http://tutorialzine.com/

7/05/2011 comment-delete

hi...mình đã biết cách áp dụng các bài hướng dẫn Jquery trang đó vào blogger, do mình bị thiếu một đoạn code Jquery nữa, sau khi View code Demo mới thấy!
có nhiều cái hay để vọc đây, hehe!

7/05/2011 comment-delete

Mình chèn nhiều code jQuery thì bị xung đột và không biết cách khắc phục. Bạn giúp mình với!

9/21/2011 comment-delete

@*Fabie* chỉ nhúng duy nhất 1 bản jquery trong trang web, ví dụ bạn chèn cả jquery 1.5.2 và 1.6.0 trong blog thì sẽ xảy ra xung đột.

9/21/2011 comment-delete

tks anh nhiều vì file jquery x'D
em đang đau đầu vì có khá nhiều tiện ích liên quan đến jquery nhưng ko biết làm sao để tạo file js cho blog của mình :(

10/28/2011 comment-delete

Nhận xét này đã bị quản trị viên blog xóa.

12/19/2011 comment-delete

Đăng nhận xét

- Không chèn liên kết quảng cáo khi đăng nhận xét.
- Nội dung nên liên quan tới chủ đề của bài.
- Use English if you do not understand what we are talking about.

Chèn Emoticons
Top
Copyright © 2011 Noct Blog. Content is licensed under a Creative Commons Attribution-NonCommercial 3.0 License