Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống
1
/ 53 trang
THÔNG TIN TÀI LIỆU
Thông tin cơ bản
Định dạng
Số trang
53
Dung lượng
2,2 MB
Nội dung
Bài 7: ThưviệnjQueryvàthưviệnjQueryUI Hệ thống bài cũ Viết mã tạo các hiệu ứng Hiệu ứng Image Rollover Hiệu ứng SlideShow Thao tác với các điều khiển SelectBox CheckBox RadioButton Form Kiểm tra tính hợp lệ cho Form CSS trong JavaScript Viết mã tạo các hiệu ứng Hiệu ứng Image Rollover Hiệu ứng SlideShow Thao tác với các điều khiển SelectBox CheckBox RadioButton Form Kiểm tra tính hợp lệ cho Form CSS trong JavaScript ThưviệnjQueryvàjQueryUI 2 Mục tiêu bài học Thựviệnvà cách tạo thưviệnThưviện JavaScript Sử dụng thưviệnjQuery Sử dụng jQuery để tạo hiệu ứng Hiệu ứng ẩn hiện Hiệu ứng mờ Hiệu ứng chuyển động Sử dụng thưviệnjQueryUI Tạo tính năng kéo thả (drag and drop) Tạo menu chồng nhau Thựviệnvà cách tạo thưviệnThưviện JavaScript Sử dụng thưviệnjQuery Sử dụng jQuery để tạo hiệu ứng Hiệu ứng ẩn hiện Hiệu ứng mờ Hiệu ứng chuyển động Sử dụng thưviệnjQueryUI Tạo tính năng kéo thả (drag and drop) Tạo menu chồng nhau ThưviệnjQueryvàjQueryUI 3 THƯVIỆN JAVASCRIPT Lập trình hướng đối tượng và mô hình DOM 4 THƯVIỆN JAVASCRIPT Thưviện Vấn đề nảy sinh Lập trình viên nhận thấy trong quá trình lập trình phải thực hiện lặp lại nhiều chức năng thông dụng Giải pháp Tạo một thưviện các đoạn mã thực hiện các chức năng thông dụng để chia sẻ chung Lập trình viên chia làm 2 hướng: Những chuyên gia nghiên cứu sâu về hệ thống để viết các đoạn mã tối ưu cho thưviện Các lập trình viên viết các ứng dụng sử dụng đoạn mã từ thưviện Ưu điểm giải pháp Lập trình trở nên dễ dàng hơn Tiết kiệm thời gian Thưviện ngày càng được tối ưu Vấn đề nảy sinh Lập trình viên nhận thấy trong quá trình lập trình phải thực hiện lặp lại nhiều chức năng thông dụng Giải pháp Tạo một thưviện các đoạn mã thực hiện các chức năng thông dụng để chia sẻ chung Lập trình viên chia làm 2 hướng: Những chuyên gia nghiên cứu sâu về hệ thống để viết các đoạn mã tối ưu cho thưviện Các lập trình viên viết các ứng dụng sử dụng đoạn mã từ thưviện Ưu điểm giải pháp Lập trình trở nên dễ dàng hơn Tiết kiệm thời gian Thưviện ngày càng được tối ưu ThưviệnjQueryvàjQueryUI 5 Xây dựng thưviện JavaScript Có thể tự xây dựng thưviện cho cho riêng mình hoặc dùng để chia sẻ Thực hiện viết mã cho thưviện Viết mã thưviện trong một file .js Khi cần sử dụng thì tham chiếu đến file này ThưviệnjQueryvàjQueryUI 6 Demo xây dựng thưviện Viết mã cho thưviện trong file myLibrary.js Sử dụng đối tượng MyLibrary trong thưviện var MyAlert = {}; MyAlert.sendAlert = function(mesg) { alert(mesg); }; <html><head> <script type="text/javascript" src="myLibrary.js" ></script> </head> <body> <script type="text/javascript"> MyAlert.sendAlert("Xin chào, đây là thưviện của tôi"); </script> </body></html> Viết mã cho thưviện trong file myLibrary.js Sử dụng đối tượng MyLibrary trong thưviệnThưviệnjQueryvàjQueryUI7 <html><head> <script type="text/javascript" src="myLibrary.js" ></script> </head> <body> <script type="text/javascript"> MyAlert.sendAlert("Xin chào, đây là thưviện của tôi"); </script> </body></html> (Xem ví dụ My Library) Các thưviện của JavaScript Lập trình mất nhiều thời gian và công sức để làm cho trang web chạy giống nhau trên nhiều trình duyệt Cần có những người nghiên cứu sâu về các trình duyệt, mã javascript để viết nên thưviện các chức năng thông dụng chạy tốt trên nhiều trình duyệt Có rất nhiều thưviện cho JavaScript, mỗi thưviện có một thế mạnh riêng Jquery (Tham khảo: http://jquery.com) Yahoo! User Interface (YUI, Tham khảo: http://developer.yahoo.com/yui) MooTools (Tham khảo: http://mootools.net) Và các thưviện khác (Tham khảo: http://en.wikipedia.org/wiki/comparison_of_JavaScript_framewo rks) Lập trình mất nhiều thời gian và công sức để làm cho trang web chạy giống nhau trên nhiều trình duyệt Cần có những người nghiên cứu sâu về các trình duyệt, mã javascript để viết nên thưviện các chức năng thông dụng chạy tốt trên nhiều trình duyệt Có rất nhiều thưviện cho JavaScript, mỗi thưviện có một thế mạnh riêng Jquery (Tham khảo: http://jquery.com) Yahoo! User Interface (YUI, Tham khảo: http://developer.yahoo.com/yui) MooTools (Tham khảo: http://mootools.net) Và các thưviện khác (Tham khảo: http://en.wikipedia.org/wiki/comparison_of_JavaScript_framewo rks) ThưviệnjQueryvàjQueryUI 8 THƯVIỆNJQuery Lập trình hướng đối tượng và mô hình DOM 9 THƯVIỆNJQueryjQueryjQuery là một thưviện JavaScript được ưa chuộng và dễ sử dụng ThưviệnjQuery bao gồm 1 file JavaScript (Click vào đây để xem file) ThưviệnjQueryvàjQueryUI 10 [...]... muốn nghiên cứu sâu hơn về jQuery ThưviệnjQueryvàjQueryUI 14 Thêm thưviện vào trang web B3 Down thưviện Trên Browser, vào File Save Page As… Để down thưviện Lưu file thưviện vào cùng thư mục với trang web B4 Tham chiếu đến file thưviện (jquery- 1.6.4.min.js ) Thư việnjQueryvàjQueryUI 15 jQueryjQuery thực hiện tìm (query)... Thư việnjQueryvàjQueryUI 12 Thêm thưviện vào trang web của bạn B1 Truy cập địa chỉ http://www .jquery. com Thư việnjQueryvàjQueryUI 13 Thêm thưviện vào trang web của bạn B2 Lựa chọn phiên bản để down Có hai phiên bản Production: Dành cho người chỉ muốn sử dụng thưviện để viết các ứng dụng (Bạn nên down phiên bản này) Development: Dành cho người muốn phát triển các plug-in cho jQuery. .. http://api .jquery. com/category/effects/ để biết thêm về các hiệu ứng mà jQuery cung cấp ThưviệnjQueryvàjQueryUI 33 Hiệu ứng ẩn, hiện và thay đổi trạng thái jQuery cung cấp các phương thức để thực hiện hiệu ứng này show(): Hiển thị element hide(): Ẩn element toggle(): Thay đổi trạng thái của element (Đang ẩn thì hiện, đang hiện thì sẽ ẩn) ThưviệnjQueryvàjQueryUI 34 Demo ẩn đoạn văn bản Bài toán... link"); }); ThưviệnjQueryvàjQueryUI 26 Sử dụng hàm bind() jQuery hỗ trợ những sự kiện sau với hàm bind() beforeunload focusin mousedown resize blur focusout mouseenter scroll change hover mouseleave select click dbclick keydown keypress mousemove submit mouseout toggle error focus keyup load mouseover mouseup ThưviệnjQueryvàjQueryUI unload 27 Truy cập trực tiếp đến xử lý...Làm quen jQuery qua ví dụ đầu tiên Nhấn vào đoạn văn bản thì đoạn văn bản biến mất Xem Vi du jQuery dau tien Thư việnjQueryvàjQueryUI 11 Làm quen jQuery qua ví dụ đầu tiên Tham chiếu đến thưviện $(document).ready(function(){ $("p").click(function(){ $(this).hide(); Mã jQuery }); }); ... ThưviệnjQueryvàjQueryUI 31 Demo duyệt qua các element $(".diem").each(function() { if ($(this).text() >= 5) { $(this).parent().css('font-weight', 'bold'); } }); ThưviệnjQueryvàjQueryUI 32 Các hiệu ứng jQuery cung cấp nhiều hiệu ứng Hiệu ứng ẩn, hiện và thay đổi trạng thái (Hide, Show và Toggle) Hiệu ứng làm mờ (Fade In và Fade Out) Hiệu ứng... chọn các element mà giá trị attriubte bắt đầu bằng value ThưviệnjQueryvàjQueryUI 23 Thực hiện hành động Sau khi tìm được các element, điều quan trọng là thực hiện các hành động lên các element đó jQuery cung cấp các phương thức để thực hiện các hành động Các phương thức Phương thức làm Các phương thức Các phương thức ThưviệnjQueryvàjQueryUI xử lý sự kiện việc với css để thực hiện duyệt qua các... class="link">Link Chọn tất cả các element có tên lớp là link $(".link") Chọn tất cả các element có tên lớp là link $(“a.link") ThưviệnjQueryvàjQueryUI 19 Lựa chọn element theo loại Cú pháp $("tên_thẻ_HTML") Chọn tất cả các element div trên trang $("div") ThưviệnjQueryvàjQueryUI 20 Lựa chọn element theo hệ phân cấp Mã HTML Link Truy cập đến element có id là linkID getElementById("linkID") $("#linkID") Truy cập đến element có id là linkID $("a#linkID") ThưviệnjQueryvàjQueryUI 18 Lựa chọn element . cho Form CSS trong JavaScript Thư viện jQuery và jQuery UI 2 Mục tiêu bài học Thự viện và cách tạo thư viện Thư viện JavaScript Sử dụng thư viện jQuery Sử dụng jQuery để tạo hiệu ứng Hiệu ứng. DOM 9 THƯ VIỆN JQuery jQuery jQuery là một thư viện JavaScript được ưa chuộng và dễ sử dụng Thư viện jQuery bao gồm 1 file JavaScript (Click vào đây để xem file) Thư viện jQuery và jQuery UI 10 Làm. động Sử dụng thư viện jQuery UI Tạo tính năng kéo thả (drag and drop) Tạo menu chồng nhau Thư viện jQuery và jQuery UI 3 THƯ VIỆN JAVASCRIPT Lập trình hướng đối tượng và mô hình DOM 4 THƯ VIỆN JAVASCRIPT Thư