Tiểu luận môn lập trình ứng dụng web Lập trình JQUERY

Seminar
Đề tài: Lập trình JQUERY
GVHD:
Mai Xuân Hùng
Nhóm sv thực hiện:
Nguyễn Diệu Nga : 09520572
Nguyễn Thị Hiền : 09520514
Hoàng Thị Kim Oanh : 09520600
1. JQuery là gì?
2. Tạ i sa o dù ng jQuery ?
•
jQuery đơn giản hóa cách viết Javascript và tăng tốc độ xử lý các sự kiện trên trang web, giúp tiết kiệm thời gian và
công sức so với cách viết javascript thông thường.
•
Bên cạnh đó, việc sử dụng jQuery giúp giải quyết tốt vấn đề xung đột giữa các trình duyệt web.
•
Học jQuery rất đơn giản, nếu như bạn nắm vững CSS, bạn có thể tiếp cận và sử dụng jQuery nhanh chóng.
3. Ưu điểm của JQuer y
•
Hỗ trợ tốt việc xử lí các vấn đề thường gặp (DOM, AJAX…)
•
Tương thích nhiều trình duyệt web phổ biến.
•
Nhỏ gọn, dễ dùng, có nhiều tài liệu hướng dẫn sử dụng chi tiết.
•
Ít xung khắc với các thư viện Javascript khác.
•
Plugin phong phú.
4.jQuery có thể làm được nhữ ng gì ?
•
Hướng tới các thành phần trong HTML

•
Thay đổi giao diện của một trang web
•
Thay đổi nội dung của tài liệu
•
Tương tác với người dùng
•
Tạo hiệu ứng động cho những thay đổi của tài liệu
•
Lấy thông tin từ server mà không cần tải lại trang web
5. Làm sao để sử dụng jQuery?
Để sử dụng jQuery bạn phải có thư viện do jQuery cung cấp bằng cách truy cập vào để
Download phiên bản mới nhất
Hoặc có thể sử dụng trực tiếp jQuery lưu trữ tại jQuery hay Google từ 2 địa chỉ sau:
/> />6.Ví d ụ demo hiệu ứng động sử dụn g jquery
•
/* Tạo khung bên ngoài */
#bound { width: 1000px;
height: 600px;
border: 1px solid #666;
position: fixed;}
•
/* Tạo box nằm bên trong khung*/
#box { width: 200px;
height: 150px;
background: red;
position: absolute;
left: 20px; top: 20px;}
6.Ví dụ demo hiệu ứng động sử dụng jquery(tt)

•
/*hàm đổi màu box*/
$('a#btdoimau').click(function() {$('#box').css('background','blue') });
•
/*hàm thay đổi kích thước box*/
$('a#btchangebgandsize').click(function() {$('#box').css({'background':'red',
'width':'100px','height':'100px'}); });
•
/*hàm trả lại box như ban đầu*/
$('a#btrestore').click(function()
{$('#box').css({'background':'red',
'width':'200px','height':'150px'});});
6.Ví dụ demo hiệu ứng đ ộng sử dụng jquery(tt)
•
/*hàm slidedown*/
$('a#btslidedown').click(function() { $('#box').slideDown(); });
/*hàm slideup*/
$('a#btslideup').click(function() { $('#box').slideUp();});
/*hàm slideup*/
$('a#btfadeout').click(function() {$('#box').fadeOut(); });
/*hàm slideup*/
$('a#btfadein').click(function() { $('#box').fadeIn(); });
/* Hàm ẩn box*/
$('a#bthide').click(function() { $('#box').hide();});
/*Hàm hiện box*/
$('a#btshow').click(function() { $('#box').show();});
/* Hàm ẩn box trong 4s*/
$('a#bthide4s').click(function() {$('#box').hide('4000');});
/* Hàm hiện box trong 4s*/
$('a#btshow4s').click(function() {$('#box').show('4000');});

6.Ví dụ demo hiệu ứng động sử dụng jquery(tt)
6.Ví dụ demo hiệu ứng động sử dụng jquery(tt)
/*Hàm animate*/
$('#btanimate').click(function() { $('#box')
.animate({"left" : "580px" },' 3000')
.animate({"top" : "380px","width" : "200px",
"height":"100px"}, '2000')
.animate({"top" : "20px","left" : "20px",
"width" : "300px",
"height":"200px"}, '3000')
.animate({"width" : "50px",
"heigh" : "100px"}, '4000');});