Báo cáo Kết hợp hiệu ứng Jquery CSS3

Thuyết Trình Môn Học Công Nghệ WebĐề Tài : Kết hợp hiệu ứng Jquery & CSS3 Nhóm : Nguyễn Hoàng Anh... • Tương tác với người dùng: jQuery cho bạn nhiều phương thức để tương tác với người d

Thuyết Trình Môn Học Công Nghệ Web

Đề Tài : Kết hợp hiệu ứng Jquery & CSS3

Nhóm : Nguyễn Hoàng Anh

JQuery ?

- JQuery là một Javascript Framework

- 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í

Tại sao dùng JQuery ?

• JQuery đơn giản hóa cách viết Javascript.

• 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.

• Ngoài jQuery còn có mooTools, Prototype, Dojo thế nhưng jQuery có vẻ thu hút

các web designer hơn là vì nó nhiều ưu điểm :

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

Hướng tới các thành phần trong HTML:

• Thay đổi giao diện của một trang web:

• Thay đổi nội dung của tài liệu:

• Tương tác với người dùng: jQuery 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 động: jQuery 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.

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

• 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.8.5.min.js

• http://ajax.googleapis.com/ajax/libs/jquery/1.8.5/jquery.min.js

Mặt hạn chế :

- Sử dụng quá nhiều Jquery sẽ làm chậm các máy Silent có cấu hình yếu

- Không tốt cho SEO

Video Minh Họa

CSS3 khác gì CSS ??

• CSS 3 được xây dựng dựa CSS 2.0 trước đó

• Nó cho phép thực thi thêm 1 số tính năng mới,

• Việc thiết kế trình bày template của bạn sẽ trở nên dễ dàng hơn rất nhiều

Một số thuộc tính mới của CSS 3

• Đường viền có góc tròn (Rounded Borders)

• Khó vận dụng CSS để làm được rounded border –Nhưng rất dễ khi làm việc này với CSS3

• Code m u:

• Gradients

• Gradient borders có thể tạo ra những hiệu ứng tuyệt vời nếu được dùng cẩn thận Đoạn mã dưới đây giúp bạn chọn màu sắc cho gradient border

• Code mẫu :

Video Minh Họa

Lợi ích của JQuery & CSS3

• CSS3 thường được kết hợp với HTML5, vì tính hợp lý, phù hợp vì cả 2 điều là công nghệ mới, như vậy thì có gì khác biệt khi kết hợp Jquery và CSS3 ?

• CSS3 cho s n gi n code, Jquery là th vi n javascript m nh m

• S t ng quan gi a t c và rank trên các công c

1/ Tốc độ

2/ Tương thích trình duyệt

3/ Tài liệu

• Jquery được phát triển từ năm 2006 đến nay, tài liệu rất nhiều, cũng như hàng trăm, hàng ngàn các website, blog hướng dẫn đầy rẫy trên internet Việc tìm hiểu, tham khảo một ví dụ ở sự kết hợp cũng dễ dàng hơn

4/ Tính linh hoạt

• Jquery có thể làm gần như mọi thứ hiệu ứng từ cơ bản đến phức tạp

• CSS3 có mục đích cụ thể với từng modul, tất nhiên như vậy thì sẽ phục vụ tốt hơn nhiều

so với Jquery

• -> Jquery & CSS3 có thể thay thế nhiều hiệu ứng lẫn nhau, tạo nên sự đồng bộ cao

• Khi kết hợp CSS3 và Jquery ta sẽ thu được nhiều hiệu ứng đồng thời trên cùng trang web ! Nó sẽ giải quyết triệt để vấn đề tương thích của trình duyệt, nếu browser không

hỗ trợ CSS3 thì có Jquery, và ngược lại

Video Minh Họa

Thanks For Watching !