jQuery là gì?

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

 

jQuery là gì?

Tìm hiểu jQuery

jQuery luôn là lựa chọn trước tiên của mình trong công việc khi phát triển các dự án website.

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 so với cách viết javascript thông thường.

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.

Học jQuery rất đơn giản, nếu như bạn nắm vững CSS, bạn có thể tiếp cận và sử dụng jQuery nhanh chóng.

Ưu điểm của jQuery:

  • Hỗ trợ tốt việc xử lí các vấn đề thường gặp (DOMAJAX…)
  • 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.
  • Plugin phong phú.

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 một cách dễ dàng dựa vào jQuery selector.

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ỉ  thay đổi bề ngoài của trang web, mà còn  có thể thay đổi nội dung của chính tài liệu đó. Nó có thể thêm hoặc bớt nội dung trên trang, 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ương tác với người dùngjQuery cho bạn nhiều phương thức để tương tác với người dùng và tối giản các mã Event trong code HTML.

Tạo hiệu ứng độngjQuery cho phép bạn sử dụng rất nhiều hiệu ứng động như mờ dần, slideUp, slideDown()…

Hỗ trợ Ajax: đâ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 webcó 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.

Nguồn tham khảo: http://noct-land.blogspot.com/2011/05/jquery-la-gi.html

Làm sao để sử dụng jQuery?

Để sử dụng jQuery bạn phải có thư viện do jQuery cung cấp bằng cách truy cập vào http://jquery.com để Download phiên bản mới nhất (Hiện tại khi PT viết bài này là phiên bảnjQuery 1.7.2).

Hoặc có thể sử dụng trực tiếp jQuery lưu trữ tại jQuery hay Google từ 2 địa chỉ sau:

http://code.jquery.com/jquery-1.7.2.min.js

http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

Ví dụ về jQuery

Ví dụ sau sẽ tìm trong tài liệu HTML thành phần div có id là element và thêm vào thành phần này 1  class content

Mã HTML:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
5 </head>
6 <body>
7      <div id="element">Thành phần div sẽ được tác động</div>
8 </body>
9 </html>

Mã Javascript:

1 <script type="text/javascript">
2     $(document).ready(function () {
3        $('#element').addClass('content');
4     });
5 </script>

Từ ví dụ trên bạn có thể nhận thấy các jQuery chọn các đối tượng tương tự như CSS selector

1 $(document).ready(function () {
2    //Đoạn mã này đảm bảo jQuery sẽ luôn chạy dù bạn chèn code trong thẻ head hay chèn trong body
3 }):

 

VinaInfotech
Bình luận của bạn