Bài giảng Phát triển ứng dụng Web. Web Programming - Chương 8: Lập trình Web JQuery

Lập trình Web
JQuery
Lương Trần Hy Hiến, Khoa CNTT, ĐH Sư phạm TpHCM
• 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
Nội dung
2HIENLTH, FIT of HCMUP
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.
6HIENLTH, FIT of HCMUP
JQUERY STUDY PATH
JQuery
Core
Selectors
Events
Functions
Validation
UI
AJAX
Effects
7HIENLTH, FIT of HCMUP
Ví dụ mở đầu
8HIENLTH, FIT of HCMUP
JQUERY

 

 

 $(document).ready(function()

 {

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

 {

 $(this).hide();

 });

 });

 
Library
Event
Selector
9HIENLTH, FIT of HCMUP
Khởi động nhanh với Jquery
10HIENLTH, FIT of HCMUP
Bộ chọn (Selector)
• Dùng để chọn 1 hay nhiều thẻ HTML
• Một số cách lựa chọn:
11
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)
Bộ chọn theo quan hệ phân cấp
12
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
Bộ chọn các phần tử form
13HIENLTH, FIT of HCMUP
Bộ chọn các phần tử form
14HIENLTH, FIT of HCMUP
Bộ lọc cơ bản
15
Bộ lọc thuộc tính
16
Một số bộ lọc khác
17HIENLTH, FIT of HCMUP
• 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
Bộ lọc con cháu
18HIENLTH, FIT of HCMUP
Xử lý tập kết quả
19HIENLTH, FIT of HCMUP
Xử lý nội dung
20HIENLTH, FIT of HCMUP
Chèn và bổ sung
21HIENLTH, FIT of HCMUP
Chèn và bổ sung
22HIENLTH, FIT of HCMUP
Xử lý thuộc tính
23HIENLTH, FIT of HCMUP
Xử lý CSS
24HIENLTH, FIT of HCMUP
Form Events
• $(selector).blur()
• $(selector).change()
• $(selector).focus()
• $(selector).select()
• $(selector).submit()
26HIENLTH, FIT of HCMUP
Keyboard Events
• $(selector).focusin()
• $(selector).focusout()
• $(selector).keydown()
• $(selector).keypress()
• $(selector).keyup()
27HIENLTH, FIT of HCMUP
Hiệu ứng ẩn/hiện
28HIENLTH, FIT of HCMUP
Hiệu ứng fade và slide
29HIENLTH, FIT of HCMUP
Hiệu ứng tùy biến
30HIENLTH, FIT of HCMUP
Form validation
31HIENLTH, FIT of HCMUP
Form validation
32HIENLTH, FIT of HCMUP
Luật validation
33HIENLTH, FIT of HCMUP
Luật validation
34HIENLTH, FIT of HCMUP
• Datepicker
• Accordion
• Tab
• Dialog
Giao diện (Jquery UI)
35HIENLTH, FIT of HCMUP
UI-Datepicker
$(function() {
$( "#datepicker" ).datepicker();
});
Date: 
36HIENLTH, FIT of HCMUP
UI-Datepicker
37HIENLTH, FIT of HCMUP
UI-Accordion
$(function() {
$( "#accordion" ).accordion();
});
First header
First content
Second header
Second content
38HIENLTH, FIT of HCMUP
UI-AutoComplete
$(function() {
$( "#tags" ).autocomplete
({
source: ["ActionScript", "AppleScript", "Java“, "JavaScript","Lisp",
"Perl","PHP","Python“, "Ruby","Scala","Scheme”]
});
});
Tags: 
39HIENLTH, FIT of HCMUP
UI-Dialog
$(function() {
$( "#dialog" ).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.
40HIENLTH, FIT of HCMUP
UI-TABS
$(function() {
$( "#tabs" ).tabs();
});
Nunc tincidunt
Proin dolor
Proin elit arcu, rutrum commodo, vehicula tempus
Morbi tincidunt, dui sit amet facilisis feugiat
41HIENLTH, FIT of HCMUP
UI-Sortable
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
Item 1
Item 2
Item 3
</div
42HIENLTH, FIT of HCMUP
UI-Selectable
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
$(function() {
$( "#selectable" ).selectable();
});
Item 1
Item 2
Item 3
43HIENLTH, FIT of HCMUP
Ajax
44HIENLTH, FIT of HCMUP
• 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)
G | ajaxStart
L | beforeSend
G | ajaxSend
L | success
G | ajaxSuccess
L | error
G | ajaxError
L | complete
G | ajaxComplete
G | ajaxStop
AJAX
• jQuery Main
– 
– 
• jQuery API Documentation
– 
– 
• jQuery UI
– 
– 
• jQuery Blog
– 
• Around The Web
– 
– 
– 
• Tools
– Visual Studio JavaScript Intellisense Support (KB958502)
–  (Firebug Firefox Plug-in)
–  (JS Bin - Collaborative JavaScript Debugging)
• Twitter
– @jquery, @jqueryui, @jresig, @rem, @codylindley , @reybango, @elijahmanor, 
@jamespadolsey, @brandonaaron, @malsup, @pbakaus, @rworth
Resources
Q & A
47HIENLTH, FIT of HCMUP