Tài liệu tìm hiểu jQuery dành cho người mới bắt đầu

11,793 views

Published on

Tài liệu này hướng dẫn những bạn mới bắt đầu học làm việc với jQuery trong việc viết Client Script khi thiết kế website. Những mô tả và hướng dẫn trong tài liệu này là hết sức căn bản và chưa có hướng dẫn nâng cao nào.

Published in: Technology
4 Comments
16 Likes
Statistics
Notes
No Downloads
Views
Total views
11,793
On SlideShare
0
From Embeds
0
Number of Embeds
110
Actions
Shares
0
Downloads
3,355
Comments
4
Likes
16
Embeds 0
No embeds

No notes for slide

Tài liệu tìm hiểu jQuery dành cho người mới bắt đầu

  1. 1. PLIB THƯ VIỆN JAVASCRIPTTÀI LIỆU TÌM HIỂU JQUERY DÀNH CHO NGƯỜI MỚI BẮT ĐẦU Biên soạn Đặng Văn Lel Email dangvanlel@gmail.com Facebook https://facebook.com/dangvanlel Ngày 03.12.2012
  2. 2. Thư Viện Lập Trình TÀI LIỆU TÌM HIỂU JQUERY DÀNH CHO NGƯỜI MỚI BẮT ĐẦUTÓM TẮT NỘI DUNGCHƯƠNG 1: GIỚI THIỆU TỔNG QUÁT .................................................................................... 3 1. jQuery là gì?............................................................................................................................................................... 3 2. Để sử dụng jQuery bạn cần những hiểu biết gì? .................................................................................. 3 3. Tại sao nên sử dụng jQuery? ........................................................................................................................... 3 4. Làm sao để sử dụng jQuery? ........................................................................................................................... 3CHƯƠNG 2: JQUERY HOẠT ĐỘNG NHƯ THẾ NÀO? ................................................................... 5 1. Cú pháp để chọn đối tượng. .............................................................................................................................. 5 2. Điều khiển CSS của đối tượng ......................................................................................................................... 5 2.1. Lấy giá trị của một thuộc tính CSS .............................................................................................................. 5 2.2. Đặt giá trị mới cho CSS .................................................................................................................................... 6 3. Điều khiển thuộc tính của đối tượng ........................................................................................................... 7 3.1. Lấy giá trị thuộc tính của đối tượng ............................................................................................................. 7 3.2. Gán giá trị mới cho thuộc tính ....................................................................................................................... 7 4. Gán sự kiện và xử lý sự kiện ............................................................................................................................ 8 4.1. Gán sự kiện vào đối tượng. ............................................................................................................................. 8 4.2. Hủy sự kiện đã gán vào đối tượng ............................................................................................................. 10 4.3. Vài ví dụ về sự kiện để tham khảo ............................................................................................................. 10 5. Chuyển động, thay đổi hình dạng của đối tượng. .............................................................................. 13 6. Một vài hàm API phổ biến hay dùng. ........................................................................................................ 15CHƯƠNG 3: DANH SÁCH TRA CỨU JQUERY API ...............................................................18 2 Biên soạn Đặng Văn Lel | thuvienlaptrinh.edu.vn
  3. 3. Thư Viện Lập Trình TÀI LIỆU TÌM HIỂU JQUERY DÀNH CHO NGƯỜI MỚI BẮT ĐẦU CHƯƠNG 1: GIỚI THIỆU TỔNG QUÁT1. jQuery là gì? jQuery là một thư viện javascript miễn phí dùng để hỗ trợ cho người lập trình có thể viết javascript nhanh hơn, dễ dàng hơn, ngắn gọn hơn nhưng kết quả thực thi lại tốt hơn. jQuery sẽ làm đơn giản hóa việc quản lý HTML/DOM, điều khiển sự kiện, chuyển động, CSS và việc sử dụng công nghệ AJAX. jQuery tạo ra một hướng đi mới và thay đổi cách mà bạn viết javascript. jQuery tổ chức lại những mục đích mà bạn phải dùng rất nhiều câu lệnh javascript để thực hiện thành một câu lệnh đơn giản duy nhất.2. Để sử dụng jQuery bạn cần những hiểu biết gì? jQuery không phải là một ngôn ngữ mới mà chỉ là thư viện hàm javascript. jQuery hướng tới mục đích làm đơn giản hóa những công việc phức tạp trước đây khi dùng javascript để điều khiển DOM, CSS,… Do vậy, để học jQuery bạn cần tối thiểu nắm bắt được những kiến thức sau:  HTML  JAVASCRIPT  CSS3. Tại sao nên sử dụng jQuery? Mặc dù có rất nhiều những thư viện javascript trên thế giới nhưng jQuery được sử dụng rộng rãi và phổ biến nhất. Đặc biệt với các hãng lớn Google, Microsoft, IBM, … cũng s ử dụng jQuery trên những webiste và công nghệ của họ.4. Làm sao để sử dụng jQuery? jQuery đơn thuần là một tập tin javascript, để sử dụng các hàm jQuery, bạn cần tải về tập tin này rồi dùng thẻ <script> để chèn vào trang web mà bạn muốn dùng cũng giống như chèn những tập tin javascript do bạn viết vậy. Có thể tải về tập tin jQuery phiên bản mới nhất tại trang web chính thức của jQuery tại đây: http://jquery.com/ Truy cập vào website rồi ấn nút “Download (jQuery);” để tải về. 3 Biên soạn Đặng Văn Lel | thuvienlaptrinh.edu.vn
  4. 4. Thư Viện Lập Trình TÀI LIỆU TÌM HIỂU JQUERY DÀNH CHO NGƯỜI MỚI BẮT ĐẦU(Thông thường khi ấn vào nút này thì trình duyệt sẽ mở lên nội dung của tập tin chứ không tảivề. Bạn chỉ việc bấm Ctrl+S để lưu lại nội dung thành một tập tin *.js) 4 Biên soạn Đặng Văn Lel | thuvienlaptrinh.edu.vn
  5. 5. Thư Viện Lập Trình TÀI LIỆU TÌM HIỂU JQUERY DÀNH CHO NGƯỜI MỚI BẮT ĐẦU CHƯƠNG 2: JQUERY HOẠT ĐỘNG NHƯ THẾ NÀO?Phần này tập trung mô tả những cú pháp cơ bản của jQuery cùng với vài mục đích sử dụng phổbiến. Sau đó, dựa vào những giới thiệu trong phần này mà bạn có thể tự mình nghĩ ra những mụcđích dùng khác trong việc khai thác triệt để các hàm API sẽ được liệt kê đầy đủ và chi tiết trongphần sau.1. Cú pháp để chọn đối tượng. jQuery sử dụng cùng một cách như CSS để lựa chọn những phần tử HTML (thẻ HTML) và thực hiện vài việc gì đó lên nh ững đối tượng được chọn. Việc chọn đối tượng có thể thực hiện theo kiểu chọn một đối tượng duy nhất (đơn lẻ) hoặc một tập hợp các đối tượng có cùng đặc điểm (nhiều thành phần). Nguyên tắc để chọn cụ thể như sau: Cú pháp | Chọn đối tượng để thao tác $(doi_tuong) --------------------------------------------------------------------------------------- $ : ký tự bắt đầu của jQuery trong việc xác định đối tượng. doi_tuong : tiêu chí để xác định đối tượng. Liệt kê cụ thể những trường hợp như bên dưới. Sau đây là bảng liệt kê các tiêu chuẩn mẫu để chọn đối tượng: $(this) Chọn đối tượng hiện tại (đối tượng đặc biệt) | đơn lẻ $(document) Chọn đối tượng toàn bộ tài liệu (đối tượng đặc biệt) | đơn lẻ $(window) Chọn đối tượng về cửa sổ hiện hành (đối tượng đặc biệt) | đơn lẻ $(p) Chọn tất cả thẻ <p> | nhiều thành phần $(.ClassName) Chọn tất cả thẻ HTML có class=’ClassName’ | nhiều thành phần $(#IdValue) Chọn thẻ HTML có id=’IdValue’ | đơn lẻ2. Điều khiển CSS của đối tượng 2.1. Lấy giá trị của một thuộc tính CSS Khi dùng jQuery, việc tác động trực tiếp và lấy giá trị một thuộc tính CSS của đối tượng đang được chọn vô cùng đơn giản vì bạn sẽ sử dụng tên thuộc tính và giá trị lấy được sẽ có định dạng y như khi định nghĩa CSS thuần. 5 Biên soạn Đặng Văn Lel | thuvienlaptrinh.edu.vn
  6. 6. Thư Viện Lập Trình TÀI LIỆU TÌM HIỂU JQUERY DÀNH CHO NGƯỜI MỚI BẮT ĐẦUCú pháp | Lấy giá trị của một thuộc tính CSS$(doi_tuong).css(ten_css);---------------------------------------------------------------------------------------doi_tuong : là tiêu chuẩn xác định đối tượng như mô tả ở trên.ten_css : là tên của thuộc tính css như font-size, color, background-color, …Ví dụ, để lấy giá trị thuộc tính CSS font-family của tất cả thẻ <p> ta có câu lệnh jQuery sau:Codevar value = $(p).css(font-family);Giá trị trả về của câu lệnh trên là chuỗi tên của font đang dùng như “Verdana” hay “Arial” Chú ý: giá trị của thuộc tính css trả về sẽ là của cái đầu tiên được tìm thấy trong trường hợp bạn dùng tiêu chí chọn đối tượng theo số nhiều. Trong ví dụ trên, nếu các thẻ <p> trong toàn trang có nhiều font-family khác nhau thì giá trị trả về là của thẻ <p> xuất hiện đầu tiên.2.2. Đặt giá trị mới cho CSSTương tự như lấy giá trị của thuộc tính CSS, việc gán giá trị cho nó cũng khá là đơn giản.Cú pháp | Gán giá trị cho một thuộc tính CSS$(doi_tuong).css(ten_css,gia_tri);---------------------------------------------------------------------------------------doi_tuong : là tiêu chuẩn xác định đối tượng như mô tả ở trên.ten_css : là tên của thuộc tính css như font-size, color, background-color, …gia_tri : là giá trị bạn muốn gán cho thuộc tính cssVí dụ, ta muốn gán giá trị thuộc tính font-family thành Verdana cho toàn bộ thẻ <p>. Câulệnh jQuery sẽ như thế này:Code$(p).css(font-family,Verdana’);Câu lệnh trên sẽ thay thế toàn bộ thuộc tính font-family của tất cả thẻ <p> thành Verdana. Chú ý: Không giống như lấy giá trị, trong trường hợp bạn dùng tiêu chí chọn đối tượng số nhiều thì việc thay thế sẽ làm thay thế toàn bộ các giá trị của các đối tượng chứ không chỉ thay thế cái đầu tiên tìm thấy. Như ví dụ trên, có thể các thẻ <p> trong toàn trang có nhiều thuộc tính font-family khác nhau, nhưng tất cả sẽ bị đổi thành Verdana sau câu lệnh đó. 6 Biên soạn Đặng Văn Lel | thuvienlaptrinh.edu.vn
  7. 7. Thư Viện Lập Trình TÀI LIỆU TÌM HIỂU JQUERY DÀNH CHO NGƯỜI MỚI BẮT ĐẦU3. Điều khiển thuộc tính của đối tượng 3.1. Lấy giá trị thuộc tính của đối tượng Cú pháp | Lấy giá trị một thuộc tính HTML của đối tượng $(doi_tuong).attr(thuoc_tinh); --------------------------------------------------------------------------------------- doi_tuong : tiêu chuẩn xác định đối tượng như mô tả ở trên. thuoc_tinh : tên của thuộc tính của thẻ html. Ví dụ 1, ta có thẻ <img id=vidu_image src=simple.jpg /> Nếu muốn lấy thuộc tính src của thẻ này, ta dùng: Code var value = $(#vidu_image).attr(src); Ví dụ 2, ta có thẻ <input type=txtUID id=vidu /> , nếu muốn lấy giá trị thuộc tính value của thẻ này. Ta có thể dùng câu lệnh jQuery tương tự. Code var value = $(#txtUID).attr(value); Tuy nhiên, đối với ví dụ 2, bạn cũng có thể dùng câu lệnh jQuery như sau để lấy giá trị của thuộc tính value. Code var value = $(#txtUID).val(); Chú ý: đối với các thẻ nhập dữ liệu liệu của FORM, người ta thường dùng hàm val() để lấy giá trị của thuộc tính value của chúng. Không có sự khác biệt nào về kết quả giữa cách dùng attr() và val(). Tùy vào đối tượng là thẻ nào mà thuộc tính chỉ định sẽ có tồn tại hay không. Nếu không tồn tại thì câu lệnh trả về undefined. Ví dụ, nếu bạn cố gắng lấy thuộc tính color của thẻ <img> thì kết quả trả về là undefined vì thẻ <img> không có thuộc tính color. 3.2. Gán giá trị mới cho thuộc tính Việc gán lại giá trị của thuộc tính cũng đơn giản và tương tự như lấy giá trị thuộc tính. Chỉ khác biệt là ta sẽ có 2 tham số bên trong attr(). Nếu bạn cố gắng gán một thuộc tính cho một đối tượng HTML không hỗ trợ thuộc tính đó thì câu lệnh sẽ không được thực thi. 7 Biên soạn Đặng Văn Lel | thuvienlaptrinh.edu.vn
  8. 8. Thư Viện Lập Trình TÀI LIỆU TÌM HIỂU JQUERY DÀNH CHO NGƯỜI MỚI BẮT ĐẦU Cú pháp | Gán lại giá trị của một thuộc tính HTML cho đối tượng $(doi_tuong).attr(thuoc_tinh,gia_tri); --------------------------------------------------------------------------------------- doi_tuong : tiêu chuẩn xác định đối tượng như mô tả ở trên. thuoc_tinh : tên của thuộc tính của thẻ html. gia_tri : giá trị muốn gán cho thuộc tính. Ví dụ, ta có thẻ html <img id=vidu_image src=simple.jpg />. Ta muốn đổi thuộc tính src thành new_image.jpg ta viết: Code $(#vidu_image).attr(src,new_image.jpg);4. Gán sự kiện và xử lý sự kiện Phần này sẽ trình bày việc dùng jQuery để gán sự kiện lên đối tượng và điều khiển xử lý sự kiện đó khi nó x y ra. Nội dung ở đây đề cập đến chỉ bao gồm những cách dùng phổ thông ã nhất để giúp bạn nắm bắt và làm quen. Những nội dung chi tiết hơn về các sự kiện sẽ được đề cập đầy đủ trong những phần tiếp theo trong tài liệu này. 4.1. Gán sự kiện vào đối tượng. Cú pháp phổ biến cho việc gán và xử lý sự kiện như sau: Cú pháp | Gán sự kiện và hàm điều khiển cho sự kiện vào đối tượng $(doi_tuong).ten_su_kien(ham_dieu_khien); ----------------------------------------------------------------------------------------------------  doi_tuong : Tiêu chí xác định đối tượng như đã nói trong phần giới thiệu.  ten_su_kien : Tên của sự kiện (được liệt kê đầy đủ ở 4.4)  ham_dieu_khien : Hàm điều khiển của sự kiện khi sự kiện phát sinh. Hàm điều khiển có thể định nghĩa m ới ngay bên trong câu lệnh gán sự kiện hoặc có thể khai báo hàm đã được định nghĩa riêng bên ngoài. Ví dụ, bạn muốn khi website load lên sẽ hiển thị hộp thoại thông báo dòng chữ “Xin Chào”. Code | Theo cách dùng Javascript thông thường <body onload="alert(Xin Chào)"> Code | Theo cách dùng jQuery $(document).ready(function () { alert(Xin Chào);}); 8 Biên soạn Đặng Văn Lel | thuvienlaptrinh.edu.vn
  9. 9. Thư Viện Lập Trình TÀI LIỆU TÌM HIỂU JQUERY DÀNH CHO NGƯỜI MỚI BẮT ĐẦUVí dụ trên bắt sự kiện onload (khi html đã được load xong và sẵng sàng để trình duyệt hiển thị)và thực thi hàm được định nghĩa ngay bên trong câu lệnh gán sự kiện, hàm này chỉ có một câulệnh alert() để hiển thị hộp thoại có câu “Xin chào”.Để hiểu rõ hơn về cú pháp này, ta sẽ lần lượt xét các ví dụ về sử dụng hàm xử lý sự kiện đượcđịnh nghĩa riêng bên ngoài câu lệnh gán sự kiện: Ví dụ về sử dụng hàm điều khiển định nghĩa riêng (không có tham số)Code// Định nghĩa hàm hiển thị câu Xin Chàofunction Display_Message() { alert(Xin Chào);}// Gán sự kiện ready (onload) cho document và gọi hàm định nghĩa trên khi sự kiện xãy ra$(document).ready(Display_Message); Ví dụ về sử dụng hàm điều khiển định nghĩa riêng (có tham số)Code// Định nghĩa hàm hiển thị nội dung được cung cấp qua tham số thong_diepfunction Display_Message(thong_diep) { alert(thong_diep); }/*Gán sự kiện và gọi hàm Display_Message (kèm theo giá trị tham số là câu ‘Xin Chào, Đặng VănLel’) khi sự kiện xãy ra*/$(document).ready(Display_Message(Xin Chào, Đặng Văn Lel)); 9 Biên soạn Đặng Văn Lel | thuvienlaptrinh.edu.vn
  10. 10. Thư Viện Lập Trình TÀI LIỆU TÌM HIỂU JQUERY DÀNH CHO NGƯỜI MỚI BẮT ĐẦU4.2. Hủy sự kiện đã gán vào đối tượngKhi đã gán sự kiện cho một đối tượng rồi, nhưng trong một số trường hợp hoặc vì vài lý do nàođó mà bạn muốn hủy sự kiện đó thì jQuery giúp bạn làm việc này khá đơn giản.Cú pháp | hủy xử lý sự kiện theo tên sự kiện$(doi_tuong).unbind(ten_su_kien);-----------------------------------------------------------------------------------------------------  doi_tuong : Tiêu chí xác định đối tượng như đã nói trong phần giới thiệu.  ten_su_kien : Tên sự kiện theo chuẩn javascript như click, focus,load,…Còn muốn hủy bỏ xử lý toàn bộ sự kiện của một đối tượng, ta dùng cú pháp này:Cú pháp | hủy xử lý toàn bộ sự kiện$(doi_tuong).unbind();Kết hợp những kiến thức trên về sự kiện, ta sẽ lần lượt đi qua vài ví dụ trong phần 4.3 để cóthể hiểu rõ hơn và biết cách dùng thành thạo hơn đối với từng trường hợp và vấn đề phát sinh.Chủ yếu là vấn đề gán và hủy sự kiện.4.3. Vài ví dụ về sự kiện để tham khảo Ví dụ 1 :Gán sự kiện click lên một button, khi người ta click vào button thì bật hộp thoại có dòng chữ“Xin Chào” lên. 10 Biên soạn Đặng Văn Lel | thuvienlaptrinh.edu.vn
  11. 11. Thư Viện Lập Trình TÀI LIỆU TÌM HIỂU JQUERY DÀNH CHO NGƯỜI MỚI BẮT ĐẦUCode<html><head><!-- Chèn jQuery vào tài liệu --><script language="javascript" src="jquery.js"></script><script language="javascript"> <!-- Sự kiện trang web đã đư ợc tải xong --> $(document).ready(function(){ <!-- Sự kiện click lên đối tượng có id=’btb_1’ --> $(#btb_1).click(function(){ alert(Xin Chào); }); });</script></head><body> <input type="button" id="btb_1" value="Hiển thị hộp thoại" /></body></html>Có lẽ các bạn sẽ đặt câu hỏi ở ví dụ trên là “Tại sao lại đặt lệnh gán sự kiện cho nút btb_1 nằmtrong sự kiện ready() của document?”. Câu trả lời là vì khi trang web đư ợc tải xong thìđ ốitượng btb_1 mới tồn tại. Nếu bạn không đặt câu lệnh gán sự kiện cho btb_1 bên trong sự kiệnready của document thì sẽ không có tác dụng gì hết khi đoạn script xuất hiện trước đoạn địnhnghĩa btb_1 như ở ví dụ trên.Trong trường hợp bạn muốn định nghĩa s ự kiện cho btb_1 mà không muốn đặt bên trong sựkiện ready của document, bạn cần chèn script định nghĩa s ự kiện xuất hiện sau đoạn HTMLđịnh nghĩa đối tượng btb_1 như sau:Code<html><head><!-- Chèn jQuery vào tài liệu --><script language="javascript" src="jquery.js"></script></head><body> <!-- Định nghĩa đối tượng btb_1 --> <input type="button" id="btb_1" value="Hiển thị hộp thoại" /> <!-- Gán sự kiện click cho đối tượng btb_1 --> <script language="javascript"> $(#btb_1).click(function () { alert(Xin Chào); }); </script></body></html>Kết quả của cả 2 code trên là như nhau: 11 Biên soạn Đặng Văn Lel | thuvienlaptrinh.edu.vn
  12. 12. Thư Viện Lập Trình TÀI LIỆU TÌM HIỂU JQUERY DÀNH CHO NGƯỜI MỚI BẮT ĐẦU Ví dụ 2: Sử dụng ví dụ 1, bổ sung thêm một button nữa. Điều kiện là khi người dùng clicklên button 1 thì vẫn hiển thị hộp thoại “Xin Chào”. Nhưng khi người dùng click lên button thứ 2thì hủy bỏ sự kiện click của button thứ nhất. Lúc này, nếu người dùng click lên button 1 thì sẽkhông nhìn thấy hộp thoại “Xin Chào” nữa.Code<html><head><!-- Chèn jQuery vào tài liệu --><script language="javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script></head><body> <!-- Định nghĩa đối tượng btb_1 --> <input type="button" id="btb_1" value="Hiển thị hộp thoại" /> <!-- Định nghĩa đối tượng btb_2 --> <input type="button" id="btb_2" value="Hủy bỏ sự kiện của button 1" /> <script language="javascript"> <!-- Gán sự kiện click cho đối tượng btb_1 --> $(#btb_1).click(function () { alert(Xin Chào); }); <!-- Gán sự kiện click cho đối tượng btb_2 --> $(#btb_2).click(function () { $(#btb_1).unbind(click); }); </script></body></html> 12 Biên soạn Đặng Văn Lel | thuvienlaptrinh.edu.vn
  13. 13. Thư Viện Lập Trình TÀI LIỆU TÌM HIỂU JQUERY DÀNH CHO NGƯỜI MỚI BẮT ĐẦU5. Chuyển động, thay đổi hình dạng của đối tượng. Chuyển động (animation) là một trong những API thú vị nhất trong jQuery. Bạn sẽ dễ dàng điều hướng, thay đổi hình dạng, vị trí của đối tượng vô cùng dễ dàng và thuận tiện. Cú pháp $(doi_tuong).stop(true).animate( { danh_sach_thuoc_tinh }, thoi_gian_chuyen [,dieu_khien]); ----------------------------------------------------------------------------------------------------  stop(true) để đảm bảo dừng xử lý mọi hiệu ứng chuyển động đang chạy của đối tượng.  danh_sach_thuoc_tinh là danh sách những thuộc tính và giá trị muốn thay đổi đến, danh sách này khai báo theo định dạng ten:gia_tri và nếu có nhiều cặp như thế thì sẽ cách nhau bởi dấu phẩy “,” như là ten1:gia_tri1, ten2:gia_tri2  thoi_gian_chuyen là thời gian mà bạn muốn quá trình chuyển hoàn thành tính bằng 1/1000 giây  dieu_khien là hàm điều khiển sẽ được thực thi sau khi quá trình chuyển kết thúc. Hàm này có thể bỏ trống. Để có thể nắm rõ h v ề animate(). Chúng ta sẽ lần lượt đi qua một vài ví dụ trong nhiều ơn trường hợp sử dụng như sau: Ví dụ 1: Đoạn code sau đây sẽ thay đổi chiều cao của đối tượng có id=”vidu” từ chiều cao hiện tại thành 500pixel trong vòng 5 giây. Sau khi thay đổi xong thì hiển thị thông báo “Đã xong” bằng một hộp thoại. 13 Biên soạn Đặng Văn Lel | thuvienlaptrinh.edu.vn
  14. 14. Thư Viện Lập Trình TÀI LIỆU TÌM HIỂU JQUERY DÀNH CHO NGƯỜI MỚI BẮT ĐẦUCode$(#vidu).stop(true).animate({ height:500px},5000, function(){ alert(Đã xong);});Ví dụ 2:Đoạn code sau đây sẽ thay đổi cùng lúc chiều cao và chiều rộng của đối tượng có id=”vidu” từchiều cao và chiều rộng hiện tại thành 500px(cao) và 700px(rộng) trong vòng 3 giây. Saukhi chuyển đổi xong thì không làm gì cả.Code$(#vidu).stop(true).animate({ height :500px, width :700px},3000);Ví dụ 3: Thực hiện công việc như như mô tả sau:Thay đổi cùng lúc chiều cao và chiều rộng của đối tượng có id=”vidu1” từ chiều cao và chiềurộng hiện tại thành 300px(cao) và 400px(rộng) trong vòng 7 giây. Sau khi chuyển đổi xongthì thực hiện một chuyển đổi khác làm thay đổi chiều cao của một đối tượng có id=”vidu2” từchiều cao hiện tại thành 300px trong vòng 2 giây. Sau khi chuyển đổi xong lại thực hiệnchuyển đổi khác làm thay đổi chiều rộng của một đối tượng có id=”vidu3” từ chiều rộng hiệntại thành 250px trong vòng 3.5 giây.Sau khi quá trình chuyển đổi này kết thúc thì thông báocâu “Đã xong” bằng một hộp thoại. Đoạn code cho công việc trên sẽ như thế này:Code$(#vidu1).stop(true).animate({ Height : 300px, width : 400px}, 7000 , function () { $(#vidu2).stop(true).animate( { height : 300px }, 2000 , function(){ $(#vidu3).stop(true).animate() { width : 250px }, 3500, function(){ alert(Đã xong);}); });}); 14 Biên soạn Đặng Văn Lel | thuvienlaptrinh.edu.vn
  15. 15. Thư Viện Lập Trình TÀI LIỆU TÌM HIỂU JQUERY DÀNH CHO NGƯỜI MỚI BẮT ĐẦU Đoạn code trên khá phức tạp khi lồng dieu_khien vào nhau. Để cho đơn giản và dễ quản lý, bạn có thể chia nhỏ ra bằng định nghĩa hàm như code sau: Code // Hàm thay đổi chiều rộng cho đối tượng có id="vidu3" function Animate_Vidu3(){ $(#vidu3).stop(true).animate( { width : 250px }, 3500, function(){ alert(Đã xong);}); } // Hàm thay đổi chiều cao cho đối tượng có id="vidu2" function Animate_Vidu2() { $(#vidu2).stop(true).animate( { height : 300px }, 2000 , Animate_Vidu3 ); } // Chạy thực thi thay đổi chiều rộng và chiều cao của đối tượng có id="vidu1" $(#vidu1).stop(true).animate( { height: 300px, width: 400px }, 7000 , Animate_Vidu2 ); Mô tả chu trình chạy của code trên:  Khi vidu1 bị đổi xong, nó sẽ gọi Animate_Vidu2  Khi Animate_Vidu2 bị gọi thì vidu2 bị đổi, khi vidu2 bị đổi xong, nó sẽ gọi Animate_Vidu3  Khi Animate_Vidu3 bị gọi thì vidu3 bị đổi, khi vidu3 bị đổi xong, nó gọi hàm alert để hiển thị một thông báo “Đã xong”.6. Một vài hàm API phổ biến hay dùng.Đây là danh sách những hàm API jQuery hay dùng nhất để bạn có thể tham khảo nhanh và phụcvụ vài mục đích đơn giản tỏng quá trình làm quen với jQuery cũng như làm cái bài t ập. Cũng nhưnhững nội dung bên trên, những cách dùng liệt kê trong phần này cũng ch ỉ là những trường hợpphổ thông nhất. Để biết thêm chi tiết về các API vui lòng tham khảo chương 3. 6.1. Hàm .fadeIn() Hiệu ứng hiển thị dần dần một đối tượng từ trạng thái trong suốt. Nghĩa là trạng thái ban đầu của đối tượng phải là trong suốt (opacity = 0). 15 Biên soạn Đặng Văn Lel | thuvienlaptrinh.edu.vn
  16. 16. Thư Viện Lập Trình TÀI LIỆU TÌM HIỂU JQUERY DÀNH CHO NGƯỜI MỚI BẮT ĐẦUCú pháp$(doi_tuong).fadeIn(thoi_gian, dieu_khien);----------------------------------------------------------------------------------------------------thoi_gian : thời gian chuyển, có thể dùng số (1/1000 giây) hoặc chuỗi ‘slow’ và ‘fast’dieu_khien : là hàm được thực thi sau khi quá trình đổi kết thúc. Hàm này có thể bỏ trống. Sau đây là danh sách ví dụ về cách dụng hiệu ứng này.Hiển thị đàn đối tượng có id=’vidu1’ trong khoảng thời gian 5 giây.Code$(#vidu1).fadeIn(5000);Hiển thị dần đối tượng có id=’vidu2’ trong khoảng thời gian 200 mili giây (tương ứng ‘fast’)Code$(#vidu2).fadeIn(fast);Hiển thị dần đối tượng có id=’vidu3’ trong khoảng thời gian 600 mili giây(tương ứng ‘slow’).Sau khi xong thì hiển thị hộp thoại “Đã xong”.Code$(#vidu3).fadeIn(slow, function(){alert(Đã Xong);});6.2. Hàm .fadeOut()Hàm này có tác dụng gây hiệu ứng ngược lại với hàm .fadeIn(), nghĩa là nó sẽ làm cho mộtđối tượng trở nên trong suốt từ từ. Các tham số và cách sử dụng ý như .fadeIn().6.3. Hàm .fadeTo()Hàm này có thể sử dụng cho cả hai trường hợp .fadeIn() và .fadeOut() khi nó hướng tới mụcđích chuyển đổi tự trạng thái hiện tại đến một trạng thái được chỉ định. Tùy vào giá trị hiện tạivà giá trị đến mà sẽ có hiệu ứng fadeIn() hay .fadeOut().Cú pháp$(doi_tuong).fadeTo(thoi_gian, dich_den, dieu_khien);----------------------------------------------------------------------------------------------------thoi_gian : thời gian chuyển, có thể dùng số (1/1000 giây) hoặc chuỗi ‘slow’ và ‘fast’dieu_khien : là hàm được thực thi sau khi quá trình đổi kết thúc. Hàm này có thể bỏ trống.dich_den : có giá trị từ 0-1 (tương ứng 0%  100%) là độ fade muốn chuyển đến. 16 Biên soạn Đặng Văn Lel | thuvienlaptrinh.edu.vn
  17. 17. Thư Viện Lập Trình TÀI LIỆU TÌM HIỂU JQUERY DÀNH CHO NGƯỜI MỚI BẮT ĐẦUVí dụ: Giả sử ta có một thẻ <div id=”vidu”></div> đang có độ opacity là 0.5 , ta sẽ xét hiệuứng của những lệnh dưới đây lên đối tượng “vidu” này:Code | Gây hiệu ứng .fadeIn() do số chuyển đến lón hơn hiện tại (0.5)$(#vidu).fadeTo(slow, 0.7, function(){alert(Đã Xong);});Code | Gây hiệu ứng .fadeOut() do số chuyển đến lón hơn hiện tại (0.5)$(#vidu).fadeTo(slow, 0.2, function(){alert(Đã Xong);});6.4. Hàm .show()Về bản chất nếu không có tham số thì hàm này sẽ gọi .css(display, block). Còn nếu có thamsố như cú pháp dưới đây thì nó hoạt động tương tự như .fadeIn().Cú pháp$(doi_tuong).show(thoi_gian, dieu_khien);----------------------------------------------------------------------------------------------------thoi_gian : thời gian chuyển, có thể dùng số (1/1000 giây) hoặc chuỗi ‘slow’ và ‘fast’dieu_khien : là hàm được thực thi sau khi quá trình đổi kết thúc. Hàm này có thể bỏ trống.6.5. Hàm .hide()Trái ngược với .show(), nếu không có tham số thì hàm này sẽ gọi .css(display, none). Cònnếu có tham số như cú pháp dưới đây thì nó hoạt động tương tự như .fadeOut().Cú pháp$(doi_tuong).hide(thoi_gian, dieu_khien);----------------------------------------------------------------------------------------------------thoi_gian : thời gian chuyển, có thể dùng số (1/1000 giây) hoặc chuỗi ‘slow’ và ‘fast’dieu_khien : là hàm được thực thi sau khi quá trình đổi kết thúc. Hàm này có thể bỏ trống. 17 Biên soạn Đặng Văn Lel | thuvienlaptrinh.edu.vn
  18. 18. Thư Viện Lập Trình TÀI LIỆU TÌM HIỂU JQUERY DÀNH CHO NGƯỜI MỚI BẮT ĐẦU CHƯƠNG 3: DANH SÁCH TRA CỨU JQUERY APILà danh sách tập hợp toàn bộ hàm API trong jQuery dùng cho việc tra cứu. Danh sách này đặt tại địa chỉhttp://api.jquery.com/ và hiện tại chúng tôi đang nổ lực dịch nó lại bằng Tiếng Việt và sẽ sớm đưa vào hoạtđộng bản dịch khi khai trương Thư Viện Lập Trình.Những kiến thức trình bày tính đ ến đây trong tài liệu này là đủ để bạn hiểu và có thể sử dụng jQuery, đồng thờicó khả năng tự mở rộng kiến thức cho bản thân về jQuery như plusin hay những hàm API khác …Cảm ơn sự quan tâm của bạn đến tài liệu này và chúng tôi sẽ sớm trở lại với phiên bản tài liệu đầy đủ và chi tiếthơn khi khai trương Thư Viện Lập Trình.Trân trọng. HẾT 18 Biên soạn Đặng Văn Lel | thuvienlaptrinh.edu.vn

×