Tài liệu ASP.NET 3.5 part 9

Bài số 9 JQUERYBài này giới thiệu tổng quan jQuery.1. JQUERY là gì?jQuery là một thư viện kiểu mới của Javascript giúp đơ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. Các thư viện jQuery cung cấp một mục đích chung là sự trừu tượng hoá các lớp phổ biến cho các trang web scripting, do đó nó hữu ích trong hầu hết các tình huống scripting.
Nội dung trích xuất từ tài liệu:
Tài liệu ASP.NET 3.5 part 9Bài số 9 JQUERY Bài này giới thiệu tổng quan jQuery. 1. JQUERY là gì? jQuery là một thư viện kiểu mới của Javascript giúp đơ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. Các thư viện jQuery cung cấp một mục đích chung là sự trừu tượng hoá các lớpphổ biến cho các trang web scripting, do đó nó hữu ích trong hầu hết các tình huống scripting. Các chức năng jQuery bao gồm:  Chọn một tag hoặc một tập hợp các tag trên trang web.  Cung cấp các hàm tiện ích thông dụng.  Nhanh chóng tạo ra các tag mới.  Quan trọng nhất là phân tách việc thiết kế và lập trình web trên phía client. 2. Download jQuery jQuery là một thư viện script, do đó chúng ta có thể thêm vào trang web. Chúng ta có thể download phiênbản mới nhất của jQuery từ http://docs.jquery.com/Downloading_jQuery. Hình 1: Downdload jQuery Như hình 1 ở trên phiên bản mới nhất của jQuery là 1.3.2, sau khi download về chúng ta được file “jquery-1.3.2.js”, sau đó để viết ứng dụng bạn chỉ cần nhúng file “jquery-1.3.2.js” vào phần javascript của trang. Trong Visual Studio 2008 SP1 đã hỗ trợ đầy đủ các chức năng của JavaScript Intellisense. Để Visual Studiohỗ trợ Intellisense cho jQuery, chúng ta cần cài đặt thêm “Visual Studio 2008 Patch KB958502”, và downloadtừ: http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736. Sau đó chúng ta download file “jquery-1.3.2-vsdoc.js” từ: http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2-vsdoc.js Mục đích chính của “jquery-1.3.2-vsdoc.js” là giúp đỡ chúng ta trong việc viết các dòng chú thích và hỗ trợcho việc phát sinh mã thông minh trong khi soạn thảo jQuery. Microsoft Vietnam – DPE Team | Bài số 9: jQuery 2 3. Sử dụng jQuery trong ASP.NET Chúng ta tạo một project (Vi_du_9) sau đó thêm 2 file “jquery-1.3.2.js” và “jquery-1.3.2-vsdoc.js” vàotrong project (hình 2). Hình 2 Trước khi viết các câu lệnh jQuery là bạn chỉ cần khai báo sử dụng thư viện jQuery như sau: Vi_du_9 4. jQuery hoạt động như thế nào? 4.1. Chạy mã khi Document Ready (trang đã sẵn sàng) Có thể thấy rằng hầu hết khi lập trình với Javascript, kết thúc mã thực thi bằng cách thêm các dòng mã vàoscript, tương tự như sau: window.onload = function() { … } Các mã bên trong đó sẽ được thực thi khi trang được tải xong. Tuy nhiên, mã Javascript không chạy cho đếnkhi tất cả các hình ảnh trong trang được tải xong (kể cả banner quảng cáo). Lý do cho việc sử dụngwindow.onload là để chắc chắn rằng HTML document phải được tải xuống hết, sau đó mới chạy mã kia.Để giải quyết, jQuery có câu lệnh đơn giản, được biết như: $(document).ready(function() { //Mã của chúng ta }); Mã này kiểm tra document và đợi cho đến khi nó sẵn sàng để sử dụng - theo ý chúng ta muốn. Microsoft Vietnam – DPE Team | Bài số 9: jQuery 3 4.2. Function $() Khi chúng ta làm việc với CSS, Xpath hoặc custom, jQuery sử dụng function $() (dấu $ và cặp dấungoặc). Dưới dây là một số thành phần trong $(): $(p): p là tên của một thẻ (tag). $(#id): id là tên của một id. $(.class): class là tên của một lớp. 5. Một số API trong jQuery 5.1. Selectors 5.1.1. Basic id # Trả về một phần tử của mảng: Array Nó tương ứng với một phần tử duy nhất được gán bởi thuộc tính id. Nếu id chứa các ký tự như dấu chấm (.) hoặc 2 dấu [] thì chúng phải thêm 2 dấu ngạch chéo (\\) vào trước các ký tự đó. Nếu là $(#some.id) thì phải viết thành $(#some\\.id) Nếu là $(#some[id]) thì phải viết thành $(#some\\[id]\\) element Kiểu trả về: Array Tương ứng với tất cả các phần tử với tên được gán. .class Kiểu trả về: Array Tương ứng với tất cả các phần tử với tên lớp. * Kiểu trả về: Array Tương ứng với tất cả các phần tử. selector1, selector2, selectorN Kiểu trả về: Array Phù hợp với sự kết hợp của tất cả các kết quả xác định selectors, số lượng selectors là bất kỳ, trật tự của các phần tử DOM trong đối tượng jQuery không nhất thiết phải đúng thứ tự.Ví dụ: Vi_du_9_1.aspx Vi_du_9_1 $(document).ready(function() { $(#div1).css(color, red); $(#div3\\.1\\.\\[0\\]).css(color, red); $(div).css(width, 200px); $(div).css(height, 100px); $(.Class1).css(color, red); $(*).css(border, 1px solid blue); Microsoft Vietnam – DPE Team | Bài số 9: jQuery 4 $(div,span).css(background-color, #EEEEEE); }); div { float:left;padding: 5px;margin: 5px; } .Class1{ } Visual Studio 2008 ASP.NET 3.5 Download jQuery Chào mừng bạn đến với jQuery 5.1.2. HIERACHY ancestor descendant Kiểu trả về: Array Tương ứng với tất cả các phần tử với danh nghĩa descendant của các phần tử xác định bởi danh nghĩa “ancestor”. Ví dụ: $(form input).css(border, 2px dotted blue); parent > child Kiểu trả về: Array Tương ứng với các phần tử con dưới danh nghĩa “child” của phần tử được xác định với danh nghĩa “parent”. Ví dụ: $(#main > *).css(border, 3px double re ...