Bài giảng Bài 7: Thư viện jQuery và thư viện jQuery UI - ĐH FPT
lượt xem 12
download
Bài 7: Thư viện jQuery và thư viện jQuery UI cung cấp cho người học các kiến thức về 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, sử dụng thư viện jQuery UI.
Bình luận(0) Đăng nhập để gửi bình luận!
Nội dung Text: Bài giảng Bài 7: Thư viện jQuery và thư viện jQuery UI - ĐH FPT
- Bài 7: Thư viện jQuery và thư viện jQuery UI
- 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 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 ẩn hiện Hiệu ứng mờ Hiệu ứng chuyển độ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 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ện jQuery và jQuery UI 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ện jQuery và jQuery UI 6
- Demo xây dựng thư viện Viết mã cho thư viện trong file myLibrary.js var MyAlert = {}; MyAlert.sendAlert = function(mesg) { alert(mesg); }; Sử dụng đối tượng MyLibrary trong thư viện MyAlert.sendAlert("Xin chào, đây là thư viện của tôi"); (Xem ví dụ My Library) Thư viện jQuery và jQuery UI 7
- 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) Thư viện jQuery và jQuery UI 8
- THƯ VIỆN JQuery Lập trình hướng đối tượng và mô hình DOM 9
- 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 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ện jQuery và jQuery UI 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 }); }); Hay nhan vao toi, toi se bien mat!!! Thư viện jQuery và jQuery UI 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ện jQuery và jQuery UI 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 hoặc muốn nghiên cứu sâu hơn về jQuery Thư viện jQuery và jQuery UI 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ện jQuery và jQuery UI 15
- jQuery jQuery thực hiện tìm (query) đến các element của trang web và thực hiện các “hành động” lên chúng Cú pháp: $(selector).action() $: Chỉ ra sử dụng thư viện jQuery selector: Chỉ ra các phần tử được chọn action: Chỉ ra các hành động được thực hiện lên các phần tử được chọn đó $("p").hide() $("div").show() Thư viện jQuery và jQuery UI 16
- Lựa chọn các element Lựa chọn element theo ID Lựa chọn element theo lớp Lựa chọn element theo loại Lựa chọn element theo hệ thống phân cấp Lựa chọn element theo vị trí Lựa chọn element theo attribute Thư viện jQuery và jQuery UI 17
- Lựa chọn element theo ID Cú pháp $("#id_của_element") Mã HTML < a href="#" id="linkID">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ện jQuery và jQuery UI 18
- Lựa chọn element theo lớp Cú pháp $(".tên_lớp") Mã HTML < a 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ện jQuery và jQuery UI 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ện jQuery và jQuery UI 20
CÓ THỂ BẠN MUỐN DOWNLOAD
-
Bài giảng Ngôn ngữ lập trình C++ - Chương 7: Ra vào dữ liệu
93 p | 163 | 28
-
Giáo trình tin học trong hoạt động thông tin - thư viên part 7
30 p | 96 | 21
-
Bài giảng Thiết kế Web: Chương 7 - Một số đề tài NCKH môn Thiết kế Web 1
8 p | 103 | 18
-
Bài giảng Lập trình Assembly: Chương 7 - Nguyễn Văn Thọ
14 p | 151 | 18
-
Bài giảng Lập trình hệ nhúng: Chương 7 - Phạm Ngọc Hưng
13 p | 80 | 10
-
Bài 7: Đường viền và các thuộc tính của đường viền
4 p | 71 | 8
-
Bài giảng Lập trình cho khoa học dữ liệu - Bài 7: Thư viện numpy
28 p | 41 | 8
-
Bài giảng Lập trình Net với C# - Chương 7: XML và .NET với C#
18 p | 87 | 7
-
Bài giảng Cơ sở dữ liệu (Database): Chương 7 - TS. Đặng Thị Thu Hiền
28 p | 36 | 6
-
Bài giảng Nhập môn lập trình khoa học dữ liệu: Bài 7 - Trương Xuân Nam
36 p | 22 | 6
-
Bài giảng Ngôn ngữ lập trình - Bài 7: Khuôn mẫu (Template) và thư viện chuẩn (STL)
61 p | 85 | 6
-
Bài giảng Lập trình viên mã nguồn mở (Module 4) - Bài 7: JQuery
14 p | 44 | 5
-
Bài giảng Kiến trúc máy tính: Chương 7 - ThS. Lê Văn Hùng
18 p | 122 | 5
-
Bài giảng Kỹ thuật lập trình - Chương 7.2: Thư viện STL (Standard Template Library)(Trường Đại học Bách khoa Hà Nội)
36 p | 16 | 5
-
Bài giảng Lập trình nâng cao - Chương 7: Simple AI
54 p | 47 | 3
-
Bài giảng Nhập môn về lập trình - Chương 7: Mảng (Array)
8 p | 44 | 3
-
Bài giảng Lập trình nâng cao - Chương 7+8: Graphics (Đồ họa với SDL)
97 p | 8 | 1
Chịu trách nhiệm nội dung:
Nguyễn Công Hà - Giám đốc Công ty TNHH TÀI LIỆU TRỰC TUYẾN VI NA
LIÊN HỆ
Địa chỉ: P402, 54A Nơ Trang Long, Phường 14, Q.Bình Thạnh, TP.HCM
Hotline: 093 303 0098
Email: support@tailieu.vn