intTypePromotion=1

Bài giảng Phát triển ứng dụng Web – Web Programming: Chương 8 - ThS. Lương Trần Hy Hiến

Chia sẻ: Lavie Lavie | Ngày: | Loại File: PDF | Số trang:0

0
57
lượt xem
12
download

Bài giảng Phát triển ứng dụng Web – Web Programming: Chương 8 - ThS. Lương Trần Hy Hiến

Mô tả tài liệu
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Bài giảng Phát triển ứng dụng Web – Web Programming: Chương 8 trình bày về giới thiệu Jquery; Jquery selector/Jquery filter; thay đổi nội dung document; xử lý sự kiện; kiểm tra hợp lệ; Ajax; giao diện; hiệu ứng và hoạt ảnh. Mời các bạn tham khảo bài giảng để hiểu rõ hơn về những nội dung này.

Chủ đề:
Lưu

Nội dung Text: Bài giảng Phát triển ứng dụng Web – Web Programming: Chương 8 - ThS. Lương Trần Hy Hiến

  1. Lập trình Web JQuery Lương Trần Hy Hiến, Khoa CNTT, ĐH Sư phạm TpHCM
  2. Nội dung • Giới thiệu về JQuery • JQuery Selector / JQuery Filter • Thay đổi nội dung document • Xử lý sự kiện • Kiểm tra hợp lệ • Ajax • Giao diện • Hiệu ứng & hoạt ảnh HIENLTH, FIT of HCMUP 2
  3. Giới thiệu jQuery • jQuery là thư viện được viết bằng ngôn ngữ JavaScript hỗ trợ cho việc thiết kế giao diện trên Web. • jQuery được thiết kế để thay đổi cách lập trình ở phía client như Javascript truyền thống. • jQuery cung cấp các tính năng: – Truy xuất tài liệu HTML (DOM) dễ dàng hơn. – Xử lý sự kiện javascript một cách dễ dàng. – Các control hỗ trợ trong quá trình thiết kế giao diện web. – Cung cấp các hiệu ứng trên web. – Đơn giản hóa việc sử dụng công nghệ AJAX. – Hỗ trợ các thư viện giao diện. HIENLTH, FIT of HCMUP 6
  4. JQUERY STUDY PATH Core Selectors JQuery Validation Events UI AJAX Functions Effects HIENLTH, FIT of HCMUP 7
  5. Ví dụ mở đầu HIENLTH, FIT of HCMUP 8
  6. JQUERY    $(document).ready(function()  {  $("p").click(function()  { Library  $(this).hide();  }); Event  }); Selector  HIENLTH, FIT of HCMUP 9
  7. Khởi động nhanh với Jquery HIENLTH, FIT of HCMUP 10
  8. Bộ chọn (Selector) • Dùng để chọn 1 hay nhiều thẻ HTML • Một số cách lựa chọn: jQuery Selects… $(‘#myId’) By ID $(‘div’) By Element Type $(‘.myClass’) By Class $(‘div, span, p.myClass, #myid’) Áp dụng cho nhiều thẻ $(‘*’) Tất cả các thẻ $(‘p#id’), $(‘p.myClass’) Chỉ định bởi tên theo và classname (id) 11
  9. Bộ chọn theo quan hệ phân cấp 12
  10. Bộ chọn các phần tử form SELECTOR Ý NGHĨA :input Chọn tất cả các thẻ input, textarea trên form :text Chọn tất cả các textfield trên form :password Chọn tất cả các password field :radio Chọn tất cả các radio button :checkbox Chọn tất cả các checkbox :submit Chọn tất cả các button submit :reset Chọn tất cả các button reset :image Chọn tất cả các image :button Chọn tất cả các generalized button :file Chọn tất cả các control upload file HIENLTH, FIT of HCMUP 13
  11. Bộ chọn các phần tử form HIENLTH, FIT of HCMUP 14
  12. Bộ lọc cơ bản 15
  13. Bộ lọc thuộc tính 16
  14. Một số bộ lọc khác HIENLTH, FIT of HCMUP 17
  15. Bộ lọc con cháu • Ví dụ – $(“li:nth-child(even)”) - xác định các thẻ con tại vị trí chẵn – $(“li:nth-child(even)”) - xác định thẻ là con duy nhất – $(“li:nth-child(2)”) - xác định các thẻ con thứ 3 – $(“li:nth-child(3n+1)”) – xác định các thẻ thứ 1, 4, 7, 10… HIENLTH, FIT of HCMUP 18
  16. Xử lý tập kết quả HIENLTH, FIT of HCMUP 19
  17. Xử lý nội dung HIENLTH, FIT of HCMUP 20

CÓ THỂ BẠN MUỐN DOWNLOAD

 

Đồng bộ tài khoản