DATA ANALYSIS and VISUALIZATION 343 ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN Chương 7 jQuery và ứng dụng 344Internet và Công nghệ WebIE103 Nội dung 1 jQuery và cách sử dụng 2[.]
ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN Chương jQuery ứng dụng 343 Nội dung jQuery cách sử dụng Ứng dụng jQuery IE103 Internet Công nghệ Web 344 jQuery cách sử dụng jQuery? • jQuery thư viện Javascript mã nguồn mở, miễn phí • Giúp xây dựng chức Javascript dễ dàng, nhanh • Tương thích với nhiều trình duyệt chạy thiết bị: Desktop, Laptop, Ipad, Anroid… => phổ biến • jQuery với nhiều hiệu ứng có sẵn như: ẩn, hiện, mờ dần, chạy dọc, chạy ngang, • Dễ dàng tạo menu, slideshow hình ảnh mà khơng viết nhiều code • Với jQuery, khơng phải viết chi li lệnh Javascript mà với vài lệnh đơn giản, tạo hiệu ứng đẹp tương tác sinh động cho trang web => viết – làm nhiều IE103 Internet Công nghệ Web 345 jQuery cách sử dụng Cơng dụng • Các module jQuery Ý nghĩa Module Ajax Xử lý ajax Atributes Xử lý thuộc tính đối tượng HTML Effect Xử lý hiệu ứng Event Xử lý kiện Form Xử lý form DOM Xử lý data object model Selector Xử lý luồng lách đối tượng HTML IE103 Internet Công nghệ Web 346 jQuery cách sử dụng Cài đặt jQuery vào trang web • Các phiên jQuery http://jquery.com/download • Phiên jQuery 3.6.1 (ngày 20/11/2023) IE103 Internet Công nghệ Web 347 jQuery cách sử dụng • Lưu file vào Project website • Dùng thẻ để kết nối • Kết nối trực tiếp đường có sẵn: Demo7.01 IE103 Internet Công nghệ Web 348 Ứng dụng jQuery Chọn phần tử HTML • Thao tác jQuery chọn phần tử tài liệu HTML thực hành động cách sử dụng hàm $() • Ví dụ $().() Trong đó: • $ kí hiệu đặc biệt, xác định câu lệnh jQuery • câu truy vấn, chọn phần tử trang HTML jQuery có nhiều cách giúp chọn phần tử trang • () hàm tác động lên phần tử chọn (click, change …) Demo7.03 IE103 Internet Công nghệ Web 349 Ứng dụng jQuery Sử dụng jQuery • $(document).ready() kích hoạt kiện tải xong html tạo thành DOM $(document).ready(function(){ document.write("Hello, World!"); => viết jQuery }); Demo7.02 IE103 Internet Công nghệ Web 350 Ứng dụng jQuery CSS selectors Chọn phần tử (selector) theo kiểu CSS • $(“a”) chọn tất cà thẻ • $(“div.intro”) chọn tất thẻ div có class “intro” • $(“p#button”) chọn tất thẻ p có id “button” • $(this) phần tử hành • $(“.header”) • $(“#left”) • $(“*”) IE103 chọn phần tử có tên class header chọn phần tử có tên left chọn tất phần tử Internet Công nghệ Web 351 Ứng dụng jQuery Attribute selectors Chọn phần tử với thuộc tính cho trước • $(“[href]”) chọn tất phần tử có thuộc tinh href • $(“[href=‘#’]”) chọn tất phần tử với href=“#” • $(“[href!=‘#’]”) chọn tất phần tử với href khác “#” • $(“[src$=‘jpg’]”) chọn tất phần tử mà src chứa “.jpg” IE103 Internet Công nghệ Web 352 Sự kiện Các kiện • Một số hàm xử lý kiện phổ biến thường dùng jQuery IE103 Internet Công nghệ Web 357 Sự kiện $(document).ready(function(){ $("#p1").hover(function(){ alert("Bạn di chuyển chuột vào"); }, function(){ alert("Thực việc tiếp theo"); }); });Demo hover
Demo7.06 IE103 Internet Công nghệ Web 359 Sự kiện $(document).ready(function(){ $("input").focus(function(){ $(this).css("background-color", "yellow"); }); $("input").blur(function(){ $(this).css("background-color", "green"); }); }); Name: Email: Demo7.07 IE103 Internet Công nghệ Web 360 Sự kiện $(document).ready(function(){ $("p").on({ mouseenter: function(){ $(this).css("background-color", "lightgray"); }, mouseleave: function(){ $(this).css("background-color", "lightblue"); }, click: function(){ $(this).css("background-color", "yellow"); } }); });Đa kiện: mouseenter, mouseleave, click
Demo7.08 IE103 Internet Công nghệ Web 361 Hiệu ứng Hiệu ứng jQuery • Tạo hiệu ứng như: hide, show, toggle, slide, fade cú pháp: IE103 Internet Công nghệ Web 362 Hiệu ứng Hiệu ứng jQuery Demo7.09 IE103 Internet Công nghệ Web 363 ... jQuery với nhiều hiệu ứng có sẵn như: ẩn, hiện, mờ dần, chạy dọc, chạy ngang, • Dễ dàng tạo menu, slideshow hình ảnh mà khơng viết nhiều code • Với jQuery, viết chi li lệnh Javascript mà với vài... IE103 Internet Công nghệ Web 361 Hiệu ứng Hiệu ứng jQuery • Tạo hiệu ứng như: hide, show, toggle, slide, fade cú pháp: IE103 Internet Công nghệ Web 362 Hiệu ứng Hiệu ứng jQuery Demo7.09 IE103 Internet