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

Lương Trần Hy Hiến, Khoa CNTT, ĐH Sư phạm TpHCM

Nội dung 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

Giới thiệu jQuery 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

JQUERY STUDY PATH JQUERY STUDY PATH

Core

Selectors

JQuery

Validation

Events

AJAX

Functions

Effects

HIENLTH, FIT of HCMUP 7

Ví dụ mở đầu Ví dụ mở đầu

HIENLTH, FIT of HCMUP 8

JQUERY JQUERY

$("p").click(function() {

Library

$(this).hide();

Event

});

Selector

(cid:1) (cid:1)

HIENLTH, FIT of HCMUP 9

Khởi động nhanh với Jquery Khởi động nhanh với Jquery

HIENLTH, FIT of HCMUP 10

Bộ chọn (Selector) Bộ chọn (Selector)

• Dùng để chọn 1 hay nhiều thẻ HTML • Một số cách lựa chọn:

jQuery $(‘#myId’)

Selects… 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)

Bộ chọn theo quan hệ phân cấp Bộ chọn theo quan hệ phân cấp

Bộ chọn các phần tử form 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

Bộ chọn các phần tử form Bộ chọn các phần tử form

HIENLTH, FIT of HCMUP 14

Bộ lọc cơ bản Bộ lọc cơ bản

Bộ lọc thuộc tính Bộ lọc thuộc tính

Một số bộ lọc khác Một số bộ lọc khác

HIENLTH, FIT of HCMUP 17

Bộ lọc con cháu 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

Xử lý tập kết quả Xử lý tập kết quả

HIENLTH, FIT of HCMUP 19

Xử lý nội dung Xử lý nội dung

HIENLTH, FIT of HCMUP 20

Chèn và bổ sung Chèn và bổ sung

HIENLTH, FIT of HCMUP 21

Chèn và bổ sung Chèn và bổ sung

HIENLTH, FIT of HCMUP 22

Xử lý thuộc tính Xử lý thuộc tính

HIENLTH, FIT of HCMUP 23

Xử lý CSS Xử lý CSS

HIENLTH, FIT of HCMUP 24

Form Events Form Events

• $(selector).blur() • $(selector).change() • $(selector).focus() • $(selector).select() • $(selector).submit()

HIENLTH, FIT of HCMUP 26

Keyboard Events Keyboard Events

• $(selector).focusin() • $(selector).focusout() • $(selector).keydown() • $(selector).keypress() • $(selector).keyup()

HIENLTH, FIT of HCMUP 27

Hiệu ứng ẩn/hiện Hiệu ứng ẩn/hiện

HIENLTH, FIT of HCMUP 28

Hiệu ứng fade và slide Hiệu ứng fade và slide

HIENLTH, FIT of HCMUP 29

Hiệu ứng tùy biến Hiệu ứng tùy biến

HIENLTH, FIT of HCMUP 30

Form validation Form validation

HIENLTH, FIT of HCMUP 31

Form validation Form validation

HIENLTH, FIT of HCMUP 32

Luật validation Luật validation

HIENLTH, FIT of HCMUP 33

Luật validation Luật validation

HIENLTH, FIT of HCMUP 34

Giao diện (Jquery UI) Giao diện (Jquery UI)

• Datepicker • Accordion • Tab • Dialog

HIENLTH, FIT of HCMUP 35

UI-Datepicker UI-Datepicker

Date:

HIENLTH, FIT of HCMUP 36

UI-Datepicker UI-Datepicker

HIENLTH, FIT of HCMUP 37

UI-Accordion UI-Accordion

First header

First content

Second header

Second content

HIENLTH, FIT of HCMUP 38

UI-AutoComplete UI-AutoComplete

Tags:

HIENLTH, FIT of HCMUP 39

UI-Dialog UI-Dialog

This is the default dialog which is useful for

displaying information. The dialog window can be moved, resized and closed with the 'x' icon.

HIENLTH, FIT of HCMUP 40

Proin elit arcu, rutrum commodo, vehicula tempus

Morbi tincidunt, dui sit amet facilisis feugiat

HIENLTH, FIT of HCMUP 41

UI-Sortable UI-Sortable

Item 1

Item 2

Item 3

HIENLTH, FIT of HCMUP 42

UI-Selectable UI-Selectable

Item 1
Item 2
Item 3

HIENLTH, FIT of HCMUP 43

AjaxAjax

HIENLTH, FIT of HCMUP 44

AJAXAJAX

• Helpers

– load, get, getJSON, getScript, post (all use $.ajax behind the

scenes)

– $.ajaxSetup(options) can be used to globally set the default options for all AJAX request. You can still override these within each AJAX request object.

Local Events – subscribed to within AJAX request object

• • Global Events – broadcast to all elements in the DOM

– Can be disabled within the AJAX request object’s ‘global’

property

– .bind(‘ajaxStart’, fn) or .ajaxStart(fn)

Resources Resources

•

jQuery Main

•

jQuery API Documentation

– http://jquery.com – http://docs.jquery.com/Downloading_jQuery

•

jQuery UI

– http://api.jquery.com – http://docs.jquery.com

•

jQuery Blog

– http://jqueryui.com – http://jqueryui.com/themeroller/

• Around The Web

– http://stackoverflow.com – http://www.nettuts.com – http://www.smashingmagazine.com

•

Tools

– Visual Studio JavaScript Intellisense Support (KB958502) – http://getfirebug.com/ (Firebug Firefox Plug-in) – http://jsbin.com/ (JS Bin - Collaborative JavaScript Debugging)

•

Twitter

– http://blog.jquery.com/

– @jquery, @jqueryui, @jresig, @rem, @codylindley , @reybango, @elijahmanor, @jamespadolsey, @brandonaaron, @malsup, @pbakaus, @rworth