Bài giảng Phát triển ứng dụng web - Bài 4: jQuery
lượt xem 8
download
Nội dung chương 4 gồm có: jQuery là gì, vì sao sử dụng jQuery?; xử lý sự kiện HTML; thao tác HTML/DOM; thao tác CSS; hiệu ứng và hoạt cảnh; các tiện ích.
Bình luận(0) Đăng nhập để gửi bình luận!
Nội dung Text: Bài giảng Phát triển ứng dụng web - Bài 4: jQuery
- Bài giảng PHÁT TRIỂN ỨNG DỤNG WEB Lê Đình Thanh Khoa Công nghệ Thông tin Trường Đại học Công nghệ, ĐHQGHN E-mail: thanhld@vnu.edu.vn Mobile: 0987.257.504 1
- Bài 4 jQuery 2 Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
- Nội dung • jQuery là gì, vì sao sử dụng jQuery? • Xử lý sự kiện HTML • Thao tác HTML/DOM • Thao tác CSS • Hiệu ứng và hoạt cảnh • Các tiện ích 3 Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
- jQuery • jQuery là thư viện javascipt giúp cho việc lập trình javascript trở nên đơn giản, hiệu quả hơn • Các tính năng – Thao tác HTML/DOM – Xử lý sự kiện HTML – Thao tác CSS – Xử lý AJAX – Hiệu ứng và hoạt cảnh – Các tiện ích Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
- Cài đặt jQuery • Download thư viện jQuery (tệp .js) tại jQuery.com • Bao hàm tệp thư viện jQuery trong trang HTML Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
- Cú pháp jQuery • jQuery cho phép chọn các đối tượng tài liệu rồi thực hiện hành động trên đối tượng được chọn • Cú pháp: $(selector).action(); • jQuery sử dụng bộ chọn như CSS Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
- Ví dụ • $("#test").hide() document.getElementById(“test”).hide(); Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
- Ví dụ • $("p").hide() arr = document.getElementsByTagName(“p”); for (i = 0; i
- Ví dụ • $(".test").hide() arr = document.getElementsByTagName(“*”); for (i = 0; i
- Lưu ý • Cần sử dụng jQuery khi toàn bộ mã trang đã được tải $(document).ready(function(){ // All jQuery methods go here... }); Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
- Xử lý sự kiện với jQuery Kích hoạt sự kiện Bắt và xử lý sự kiện Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
- Xử lý sự kiện • Kích hoạt sự kiện trên đối tượng tài liệu $(selector).eventName(); • Bắt và xử lý sự kiện trên các đối tượng tài liệu $(selector).eventName(function(args){ // action goes here!! }); Mouse Events Keyboard Form Events Document/Window Events Events click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur unload Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
- Ví dụ • Xử lý sự kiện kích chuột trên nút bấm $("#test").click(function () { alert(“hello!”); }); function dotest() { alert(“hello!”);} Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
- Ví dụ • Khi người dùng gõ enter trên một ô nhập thì chuyển tâm điểm sang ô nhập tiếp theo $("#name").keyup( function(e) { if (e.keyCode ==13) $("#email").focus(); }); function processKeyup(e) { if (windows.event) e= window.event; if (e.keyCode == 13) document.getElementById(“email”).focus(); } Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
- Thao tác DOM/HTML với jQuery Đọc, thay đổi thuộc tính Thêm, xóa đối tượng Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
- Đọc thuộc tính đối tượng tài liệu • Đọc nội dung văn bản của đối tượng tài liệu $(selector).text(); • Đọc nội dung HTML của đối tượng tài liệu $(selector).html(); • Đọc giá trị của đối tượng tài liệu $(selector).val() • Đọc giá trị thuộc tính của đối tượng tài liệu $selector().attr(att); Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
- Ví dụ đọc text và html $(document).ready(function(){ $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); }); }); This is some bold text in a paragraph. Show Text Show HTML Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
- Ví dụ đọc giá trị $(document).ready(function(){ $("button").click(function(){ alert("Value: " + $("#test").val()); }); }); Name: Show Value Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
- Ví dụ đọc thuộc tính $(document).ready(function(){ $("button").click(function(){ alert($("#w3s").attr("href")); }); }); W3Schools.com Show href Value Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
CÓ THỂ BẠN MUỐN DOWNLOAD
-
Bài giảng Phát triển ứng dụng Web – Web Programming: Chương 0 - ThS. Lương Trần Hy Hiến
20 p | 243 | 19
-
Bài giảng Phát triển ứng dụng Web bằng PHP: Phần 2(1) - Dương Khai Phong
45 p | 132 | 17
-
Bài giảng Phát triển ứng dụng Web bằng PHP: Phần 3 - Dương Khai Phong
60 p | 119 | 15
-
Bài giảng Phát triển ứng dụng Web – Web Programming: Chương 5 - ThS. Lương Trần Hy Hiến
0 p | 109 | 15
-
Bài giảng Phát triển ứng dụng Web bằng PHP: Phần 2(2) - Dương Khai Phong
49 p | 131 | 14
-
Bài giảng Phát triển ứng dụng Web bằng PHP: Phần 4 - Dương Khai Phong
50 p | 101 | 12
-
Bài giảng Phát triển ứng dụng cho các thiết bị di động: Phần 2
76 p | 27 | 12
-
Bài giảng Phát triển ứng dụng cho các thiết bị di động: Phần 1
123 p | 48 | 11
-
Bài giảng Phát triển ứng dụng web: Bài 3 - Lê Đình Thanh
42 p | 122 | 11
-
Bài giảng Phát triển ứng dụng Web bằng PHP: Phần 1 - Dương Khai Phong
28 p | 136 | 10
-
Bài giảng Phát triển ứng dụng đa nền tảng - Chương 7: Nguyên lý phát triển ứng dụng với Flutter
88 p | 23 | 8
-
Bài giảng Phát triển ứng dụng đa nền tảng - Chương 8: Đánh giá hiệu năng ứng dụng đa nền tảng
66 p | 24 | 8
-
Bài giảng Phát triển ứng dụng đa nền tảng - Chương 0: Giới thiệu về môn học
27 p | 32 | 7
-
Bài giảng Phát triển ứng dụng đa nền tảng - Chương 2: Tổng quan về kiến trúc của di động
53 p | 20 | 7
-
Bài giảng Phát triển ứng dụng đa nền tảng - Chương 3.2: Cross-Platform
17 p | 21 | 7
-
Bài giảng Phát triển ứng dụng đa nền tảng - Chương 1: Tổng quan về phát triển ứng dụng di động
46 p | 30 | 6
-
Bài giảng Phát triển ứng dụng Web: Bài 6 - Nguyễn Hữu Thể
24 p | 43 | 4
-
Bài giảng Phát triển ứng dụng web: Chương 0 - Lê Đình Thanh
10 p | 15 | 2
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