Bài giảng Công nghệ Web - Bài 5: Làm việc với jQuery

Nội dung text: Bài giảng Công nghệ Web - Bài 5: Làm việc với jQuery

1. Bài 5: Làm việc với jQuery Lê Quang Lợi Email: loilequang@gmail.com loilq@utehy.edu.vn
2. Bài 05: Làm việc với jQuery » jQuery (Write less done more) » Cơ bản về cú pháp » Thư viện mã nguồn với jQuery » Hiệu ứng website với jQuery Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
3. 5.1 Giới thiệu về jQuery » Thư viện các hàm viết sẵn dựa trên javascript » Tập các hàm thao tác với HTML » hàm hiệu ứng: tạo hiệu ứng đẹp mắt /chuyên nghiệp » Thư viện hỗ trợ ajax: jAjax » jQuery UI: Cung cấp giao diện hỗ trợ sẵn rất linh hoạt » Tương tác với các thẻ HTML dựa trên CSS » Đơn giản và thống nhất cách xử lý tài liệu HTML Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
4. 5.2 Làm việc với jQuery » Download thư viện: » Nhúng thư viện với ứng dụng: » Tạo hàm tương tác: $ thay thế cho jQuery Ví dụ $(docuent).ready(function(){ $(“#btn”).click(function(){ alert(“Chào”); }); }); Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
5. 5.2 Làm việc với jQuery » Cú pháp cơ bản: hàm([đối]).hàm([đối]); » Dấu: $ thay thế cho jQuery . $(document); // lấy về đối tượng DOM . jQuery(document); » Câu lệnh: theo cú pháp javascript » Hàm ready(); tài liệu đã sẵn sàng $(docuent).ready(function(){ $(“#btn”).click(function(){ alert(“Chào”); }); }); Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
6. 5.2 Làm việc với jQuery(lấy về các thẻ) » Lấy về thẻ theo quy tắc đặt tên của CSS: $(“selector”) . Thẻ theo ID: $(“#nhãCSS”); . Thẻ theo Class: $(“.nhãnCSS”) . Thẻ HTML: $(“h1”); . Thẻ dạng input: $(“:button”) » Chú ý: xây dựng tên CSS như thế nào thì sử dụng selectort tương ứng Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
7. 5.3 Tương tác HTML với JQuery » Cài đặt hàm ready trong tài liệu HTML $(document).ready( function(){ // mã jQuery và javascript đặt ở đây (01) }); » Thiết lập các sự kiện cho thẻ trong vùng (01) $(“:button”).click(function(){ // mã Jquery ở đây }); Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
8. 5.3 Tương tác HTML với JQuery » Thiết lập các thuộc tính: attr $(“#myDiV”).Attr(“innerHTML”,”chao”); » Lấy giá trị thuộc tính HTML: var txt = $(“#myDiV”).Attr(“innerHTML”); Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
9. 5.4 Hàm hiệu ứng jQuery » jQuery hỗ trợ nhiều hiệu hứng cho thẻ HTML . fadeIn, fadeOut, fadeTo: ẩn hiện theo tốc độ mờ . animation: di duyển vị trí . show, hide: ẩn hiện theo tốc độ » Cài đặt hiệu ứng: $(“the”).HieuUng(*đối+); Ví dụ: $("#right").click(function(){ $(".block").animate({"left": "+=50px"}, "slow"); }); $("#left").click(function(){ $(".block").animate({"left": "-=50px"}, "slow"); }); Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
10. 5.4 Hàm hiệu ứng jQuery » Hiệu ứng giao diện . fadeIn: hiển thị với độ trong suốt và tốc độ (mini giây) . fadeOut: ẩn đối tượng thẻ . fadeTo: Chuyển động giao diện theo một chiều cố định . Lên trên . Xuống dưới . Sang trái . Sang phải Ví dụ: $(“#myDiv”).fadeIn(20);// mờ trong 20 minigiây $(“#myDiv”).fadeIn(“Slow”);// Theo tốc độ Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
11. 5.5 Giao diện trong jQuery » Hỗ trợ thư viện giao diện tương tứng » Nhiều giao diện được hỗ trợ với các CSS khác nhau » Cú pháp: $(selctor).Tengiaodien(); Ví dụ $(document).ready(function() { $("button").button(); }); Button label Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY