Asp net bai 14 decuong ajax

Bài giảng chi tiết môn học lập trình ASP.Net Bài học cung cấp kiến thức cơ sở lý thuyết tổng quan về ASP.NET, kiến trúc ASP.NET, Code phía server, cách thức truyền dữ liệu giữa các trang, chuyển trang. Sau khi học xong bài học này sinh viên có thể xây dựng được các trang Web Form sử dụng điều khiển Html, Server và biết cách truyền dữ liệu giữa các trang Web

HỌC PHẦN: LẬP TRÌNH WEB BẰNG ASP.NET BÀI 14 SỬ DỤNG JQUERY JQuery gì? Cài đặt sử dụng 2.1 Cài đặt 2.2 Sử dụng 2.3 Gọi hàm thư viện jQuery 3 Bộ chọn JQuery 3.1 Bộ chọn phần tử 3.2 Bộ chọn id 3.3 Bộ chọn class Sự kiện jQuery Hiệu ứng jquery jQuery HTML 6.1 jQuery thao tác DOM 6.2 Lấy nội dung phương thức text(), html(), val() 6.3 Phương thức attr() – lấy thuộc tính 6.4 Đặt giá trị thuộc tính cho phần tử HTML 6.5 Thêm nội dung vào HTML 6.6 jQuery thao tác với CSS jQuery Traversing 7.1 jQuery Ancestors 10 7.2 jQuery Descendants 10 7.3 jQuery Siblings 11 7.4 jQuery Filterings 11 JQuery gì? jQuery thư viện JavaScript thiết kế John Resig vào năm 2006 với phương châm tốt đẹp: viết hơn, làm nhiều jQuery công cụ JavaScript thiết kế để đơn giản hóa nhiệm vụ khác Dưới danh sách tính quan trọng hỗ trợ jQuery: Học kết hợp Trang HỌC PHẦN: LẬP TRÌNH WEB BẰNG ASP.NET • Thao tác với mơ hình DOM: jQuery dễ dàng chọn phần tử DOM, duyệt qua sửa đổi nội dung • Xử lý kiện: jQuery cung cấp cách nắm bắt kiện, chẳng hạn người dùng nhấp vào liên kết mà không làm xáo trộn HTML • Hỗ trợ AJAX: jQuery giúp nhiều để phát triển trang web hỗ trợ sử dụng cơng nghệ AJAX • Hình ảnh động: jQuery xây dựng nhiều hiệu ứng hình ảnh động mà sử dụng trang web • Gọn nhẹ: jQuery thư viện gọn nhẹ - kích thước khoảng 19KB • Hỗ trợ loại trình duyệt: jQuery làm việc tốt trình duyệt IE 6.0+, FF 2.0+, Safari 3.0+, Chrome and Opera 9.0+ Cài đặt sử dụng 2.1 Cài đặt Để sử dụng thư viện jQuery, làm theo hai bước đơn giản: + Vào trang http://jquery.com/ để lấy phiên ví dụ file jquery1.3.2.min.js + Copy file jquery-1.3.2.min.js vào thư mục chứa trang web File jquery-1.3.2.min.js có phiên khác Phiên minified phiên ngắn gọn jquery Hoặc: đặt đường dẫn từ trang web thẻ sau: - với cách máy tính ln ln có kết nối internet JQuery không cần cài đặt đặc biệt giống với JavaScript, không cần thiết lập để sử dụng jQuery 2.2 Sử dụng Sử dụng thư viện jquery sau: The jQuery Example // đoạn code javascript Học kết hợp Trang HỌC PHẦN: LẬP TRÌNH WEB BẰNG ASP.NET 2.3 Gọi hàm thư viện jQuery Hầu hết tất công việc làm sử dụng jQuery đọc thao tác với mơ hình đối tượng tài liệu (DOM), cần phải đảm bảo bắt đầu thêm kiện DOM sẵn sàng Để làm điều này, đăng ký kiện sẵn sàng cho tài liệu sau: $(document).ready(function() { // đoạn code DOM sẵn sàng }); Đây ví dụ đầu tiên: Khi click vào dòng “Click on this to see a dialogue box.” hộp thoại hiển thị “Hello world” The jQuery Example $(document).ready(function() { $("div").click(function() { alert("Hello world!"); }); }); Click on this to see a dialogue box Chúng ta đặt đoạn code sang file khác, giả sử đặt file custom.js: $(document).ready(function() { $("div").click(function() { alert("Hello world!"); }); }); Và file html nội dung sau: The jQuery Example Học kết hợp Trang HỌC PHẦN: LẬP TRÌNH WEB BẰNG ASP.NET Click on this to see a dialogue box Bộ chọn JQuery Query selectors cho phép bạn chọn thao tác các phần tử HTML jQuery selectors dùng để "tìm" (hoặc chọn) HTML elements dựa id, class, loại, thuộc tính, giá trị thuộc tính nhiều nữa Nó dựa CSS Selectors, ngồi nó cịn có thêm số selectors riêng Tất các selectors jQuery bắt đầu với kí hiệu dollar dấu ngoặc đơn: $() 3.1 Bộ chọn phần tử Với jQuery selector bạn có thể chọn tất các phần tử

website giống sau: $("p") Ví dụ: Khi người dùng click chuột vào button, tất phần tử

ẩn $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); Đây thẻ H2

Đây thẻ p.

Đây thẻ p.

Click để xoá thẻ p Kết quả: Học kết hợp Trang HỌC PHẦN: LẬP TRÌNH WEB BẰNG ASP.NET 3.2 Bộ chọn id jQuery #id selector dùng để tìm thuộc tính id thẻ HTML cụ thể Thuộc tính id nên mơ tả cho thẻ HTML trang, bạn nên dùng #id selector bạn muốn tìm phần tử website Ví dụ muốn tìm thẻ có cùng id="test" bạn làm sau : $("#test") Ví dụ: Khi người dùng click vào button, phần tử xác định có id="test" ẩn $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); }); Đây thẻ H2

Đây thẻ p.

Đây thẻ p có id test.

Click để xoá id test 3.3 Bộ chọn class jQuery class selector dùng để tìm các phần tử có cùng class cụ thể Ví dụ muốn tìm tất các thẻ có cùng class="test" bạn làm sau : $(".test") Khi người dùng click vào button, tất các thẻ có cùng class='test' ẩn Ví dụ: $(document).ready(function(){ Học kết hợp Trang HỌC PHẦN: LẬP TRÌNH WEB BẰNG ASP.NET $("button").click(function(){ $(".test").hide(); }); }); *Các ví dụ jQuery Selectors Cú pháp Mô tả $("*") Chọn tất phần tử $(this) Chọn HTML phần tử $("p.intro") Chọn tất phần tử

với class="intro" $("p:first") Chọn phần tử

$("ul li:first") Chọn phần tử

$("ul li:first-child") Chọn phần tử
• $("[href]") Chọn tất phần tử có thuộc tính href $("a[target='_blank']") Chọn tất thẻ có thuộc tính target "_blank" $("a[target!='_blank']") Chọn tất thẻ có thuộc tính target khác "_blank" $(":button") Chọn tất elements có type="button" $("tr:even") Chọn tất phần tử chẵn $("tr:odd") Chọn tất phần tử lẻ Sự kiện jQuery Tất những hành động khác người dùng tác động lên trang web, nhận phản hồi từ trang web gọi kiện (event) Ví dụ: • Di chuyển chuột lên thành phần website • Chọn vào mục đó • Hoặc click vào button Dưới những kiện DOM chung : Sự kiện chuột Sự kiện bàn phím Sự kiện Form Document/ Window Events click keypress submit Load dblclick keydown change Resize Học kết hợp Trang HỌC PHẦN: LẬP TRÌNH WEB BẰNG ASP.NET mouseenter keyup mouseleave focus Scroll blur Unload Hiệu ứng jquery Phương thức Mô tả animate() Chạy hoạt ảnh tùy chỉnh phần tử chọn clearQueue() Loại bỏ tất các hàm xếp lại khỏi phần tử chọn delay() Đặt độ trễ cho tất các hàm xếp phần tử chọn dequeue() Loại bỏ hàm khỏi hàng đợi, sau đó thực thi hàm fadeIn() Làm mờ dần phần tử chọn lúc vào fadeOut() Làm mờ dần phần tử chọn lúc fadeTo() Làm mờ dần phần tử chọn đến độ mờ định fadeToggle() Chuyển đổi giữa các phương thức fadeIn () fadeOut () finish() Dừng, xóa hồn thành tất hoạt ảnh xếp hàng đợi cho phần tử chọn hide() Ẩn phần tử chọn queue() Hiển thị các hàm xếp hàng đợi phần tử chọn show() Hiển thị phần tử chọn slideDown() Trượt xuống (hiển thị) phần tử chọn slideToggle() Chuyển đổi giữa các phương thức slideUp () slideDown () slideUp() Trượt lên (ẩn) phần tử chọn stop() Dừng hoạt ảnh chạy cho phần tử chọn toggle() Chuyển đổi giữa các phương thức hide () show () Học kết hợp Trang HỌC PHẦN: LẬP TRÌNH WEB BẰNG ASP.NET jQuery HTML 6.1 jQuery thao tác DOM Một phần quan trọng jQuery khả thao tác DOM jQuery có những phương thức thật mạnh mẽ để thay đổi thao tác lên các phần tử HTML thuộc tính chúng DOM viết tắt Document Object Model – Mơ hình đối tượng tài liệu DOM định nghĩa chuẩn cho việc truy xuất vào tài liệu HTML XML: "Document Object Model (DOM) tảng ngôn ngữ trung lập cho phép chương trình kịch (scripts) truy cập tự động cập nhật nội dung, cấu trúc, style tài liệu" 6.2 Lấy nội dung phương thức text(), html(), val() Có phương thức đơn giản, dễ sử dụng cho việc thao tác DOM, đó là: text() - Set trả (returns) nội dung text phần tử chọn html() - Set trả (returns)nội dung HTML phần tử chọn(gồm HTML markup) val() - Set trả (returns) giá trị trường (form field) textbox chẳng hạn 6.3 Phương thức attr() – lấy thuộc tính Phương thức attr() dùng để lấy giá trị thuộc tính 6.4 Đặt giá trị thuộc tính cho phần tử HTML Ví dụ sau cho biết cách thực với những phương thức text(), html(), val() : $("#btn1").click(function(){ $("#test1").text("Ha noi"); }); $("#btn2").click(function(){ $("#test2").html("Tp Ho chi minh"); }); $("#btn3").click(function(){ $("#test3").val("Viet nam"); }); 6.5 Thêm nội dung vào HTML append() - Thêm nội dung vào cuối phần tử chọn prepend() - Thêm nội dung đầu phần tử chọn Học kết hợp Trang HỌC PHẦN: LẬP TRÌNH WEB BẰNG ASP.NET after() - Thêm nội dung sau phần tử chọn before() - Thêm nội dung trước phần tử chọn 6.6 jQuery thao tác với CSS addClass() - Thêm nhiều class đến phần tử chọn removeClass() - Xoá nhiều class từ phần tử chọn toggleClass() - Chính chuyển đổi kết hợp giữa thêm/xoá class từ phần tử chọn css() - Gán trả thuộc tính style (style attribute) Ví dụ CSS: Đây CSS sử dụng cho tất những ví dụ học : important{ font-weight:bold; font-size:xx-large; } blue{ color:blue; } jQuery Traversing jQuery Traversing: Tìm phần tử (element) dựa mối quan hệ với phần tử khác jQuery traversing có nghĩa "di chuyển qua" dùng để tìm lựa chọn phần tử HTML dựa mối quan hệ chúng với những phần tử khác Bắt đầu với lựa chọn di chuyển vượt qua đến phần tử mà muốn Hình ảnh mơ tả family tree (cây gia đình) Với jQuery traversing, dễ dàng di chuyển lên phần tử cha phần tử tại, xuống phần tử (phần tử con), di chuyển đến những phần tử ngang hàng (anh, chị, em) phần tử Giải thích sơ đồ gia đình: Học kết hợp Trang HỌC PHẦN: LẬP TRÌNH WEB BẰNG ASP.NET Thẻ cha (parent)
  , tổ tiên (ancestor) tất những thẻ khác mà chứa bên
  • Thẻ
    cha (parent) hai thẻ
    • , (child) Thẻ
    • bên trái cha (parent) , (child)
      hậu duệ (descendant) Thẻ (child) thẻ
      • bên trái cháu (descendant)
        Hai thẻ
        • anh chị em (siblings) cha thẻ
          Thẻ
          • bên phải cha (parent) ,
            hậu duệ Thẻ
            • phải hậu duệ
              7.1 jQuery Ancestors jQuery Ancestors - tìm chọn phần tử cha mẹ, tổ tiên Có phương thức để thực việc qua DOM để tìm tổ tiên phần tử đó là: parent() parents() parentsUntil() Phương thức parent(): Trả trực tiếp phần tử cha mẹ phần tử chọn Và qua cấp độ đơn DOM (DOM tree) Phương thức jQuery parents: trả tất tổ tiên, ông bà, cha mẹ phần tử lựa chọn, tất theo hướng lên điểm gốc trang () 7.2 jQuery Descendants jQuery Descendants: Tìm chọn phần tử cháu Với jQuery, dễ dàng thao tác với thành phần DOM cấu trúc HTML, lên trên, xuống Trong jQuery, có phương thức hữu ích để thực việc xuống gia đình DOM (DOM tree) đó : children() find() Học kết hợp Trang 10 HỌC PHẦN: LẬP TRÌNH WEB BẰNG ASP.NET Phương thức children(): Trả tất phần tử trực tiếp phần tử chọn Nói cách khác children() qua cấp độ DOM Phương thức find(): Được dùng để tìm tất phần tử phần tử chọn với tham số xác định 7.3 jQuery Siblings jQuery Siblings: Tìm chọn phần tử anh chị ngang hàng Mục đích jQuery Siblings thao tác di chuyển DOM cấu trúc HTML để tìm kiếm, chọn lựa những phần tử ngang hàng phần tử xác định Ngang hàng có nghĩa cùng thuộc phần tử bố mẹ, hay nói cách khác những phần tử anh chị em với Không những jQuery Siblings cịn có khả giúp chọn những phần tử ngang hàng mà muốn giới hạn đặt Các phương thức thực việc ngang DOM sau siblings() next() nextAll() nextUntil() prev() prevAll() prevUntil() + siblings(): Trả tất những phần tử ngang hàng phần tử chọn + next: Trả phần tử ngang hàng phần tử chọn + nextAll: Trả tất phần tử phần tử chọn + nextUntil: Trả tất những phần tử anh chị em giữa đối số định + prev(), prevAll() & prevUntil() : Các phương thức làm việc tương tự các phương thức trả kết ngược lại theo hướng trước đó 7.4 jQuery Filterings Có phương thức để thực kỹ thuật lọc đó first(), last() eq() Và thêm phương thức lọc khác filter() not() cho phép chọn phần tử phù hợp không phù hợp theo tiêu chí định Học kết hợp Trang 11 HỌC PHẦN: LẬP TRÌNH WEB BẰNG ASP.NET * first(): Tìm phần tử nhóm phần tử * last(): Trả phần tử cuối nhóm phần tử chọn * eq(index): Trả phần tử có số với số index * filter(): Lọc phần tử phù hợp với tiêu chí đó * not(): Lọc phần tử khơng phù hợp với tiêu chí đó Học kết hợp Trang 12