Tài liệu JQuery

st item thứ ba. The JQuery Example <script type="text/javascript" src=""> $(document).ready(function() { Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 37 $("li").eq(2).addClass("selected"); }); .selected { color:red; } list item 1 list item 2 list item 3 list item 4 list item 5 list item 6 Nó sẽ cho kết quả sau: Lọc các phần tử trong jQuery Phương thức filter( selector ) có thể được sử dụng để lọc ra tất cả các phần tử từ tập hợp các phần tử được kết nối mà không kết nối với Selector đã cho. selector có thể được viết bởi sử dụng bất kỳ cú pháp Selector nào. Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 38 Ví dụ Ví dụ đơn giản sau áp dụng màu tới các list mà liên kết với class là middle: The JQuery Example <script type="text/javascript" src=""> $(document).ready(function() { $("li").filter(".middle").addClass("selected"); }); .selected { color:red; } list item 1 list item 2 list item 3 list item 4 list item 5 list item 6 Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 39 Nó sẽ cho kết quả sau: Xác định vị trí các phần tử con trong jQuery Phương thức find( selector ) có thể được sử dụng để xác định vị trí tất cả phần tử con của một loại phần tử cụ thể. selector có thể được viết bởi sử dụng bất kỳ cú pháp selector nào. Ví dụ Ví dụ đơn giản sau chọn tất cả phần tử có sẵn bên trong các phần tử khác nhau. The JQuery Example <script type="text/javascript" src=""> $(document).ready(function() { $("p").find("span").addClass("selected"); }); .selected { color:red; } This is 1st paragraph and THIS IS RED This is 2nd paragraph and THIS IS ALSO RED Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 40 Nó sẽ cho kết quả sau: Các phương thức DOM Filter trong jQuery Bảng dưới liệt kê các phương thức hữu ích giúp bạn có thể sử dụng để lọc ra các phần tử đa dạng từ một danh sách các phần tử DOM: STT Phương thức & Miêu tả 1 eq( index ) Rút gọn tập hợp phần tử được kết nối thành một phần tử đơn 2 filter( selector ) Gỡ bỏ tất cả phần tử từ tập hợp các phần tử được kết nối mà không kết nối với selector cụ thể đã cho. 3 filter( fn ) Gỡ bỏ tất cả phần tử từ tập hợp các phần tử được kết nối mà không kết nối với hàm cụ thể đã cho 4 is( selector ) Kiểm tra sự chọn lọc hiện tại với một Expression và trả về true, nếu ít nhất một phần tử của sự chọn lọc đó phù hợp với selector đã cho 5 map( callback ) Tịnh tiến một tập hợp các phần tử trong đối tượng jQuery vào trong tập hợp các giá trị khác trong một mảng jQuery (nếu có thể hoặc không chứa các phần tử) Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 41 6 not( selector ) Gỡ bỏ tất cả các phần tử kết nối với selector đã cho từ tập hợp các phần tử được kết nối. 7 slice( start, [end] ) Chọn một tập hợp con của các phần tử được kết nối Các phương thức DOM Traversing trong jQuery Bảng dưới liệt kê tất cả phương thức hữu ích bạn có thể sử dụng để xác định vị trí các phần tử đa dạng trong một DOM: STT Phương thức & Miêu tả 1 add( selector ) Thêm nhiều phần tử, đã kết nối bởi selector đã cho, tới tập hợp các phần tử được kết nối. 2 andSelf( ) Thêm sự chọn lọc trước tới sự chọn lọc hiện tại 3 children( [selector]) Nhận một tập hợp các phần tử chứa tất cả các phần tử con trực tiếp duy nhất của mỗi một trong tập hợp các phần tử được kết nối. 4 closest( selector ) Nhận một tập hợp các phần tử chứa phần tử cha gần nhất mà kết nối selector đã cho, bao gồm phần tử bắt đầu 5 contents( ) Tìm tất cả node con bên trong các phần tử được kết nối (bao gồm cả các text node), Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 42 hoặc nội dung tài liệu, nếu phần tử là một Iframe. 6 end( ) Biến đổi hoạt động phá hủy (destructive) gần đây nhất, thay đổi tập hợp các phần tử về trạng thái trước đó. 7 find( selector ) Tìm kiếm các phần tử con mà kết nối với selector đã cho. 8 next( [selector] ) Nhận một tập hợp các phần tử chứa anh (em) kế tiếp duy nhất của mỗi phần tử trong tập hợp phần tử đã cho. 9 nextAll( [selector] ) Tìm tất cả các phần tử anh em kế sau phần tử hiện tại 10 offsetParent( ) Trả về một tập hợp jQuery với phần tử cha đã xác định vị trí của phần tử được kết nối đầu tiên 11 parent( [selector] ) Nhận cha trực tiếp của một phần tử. Nếu được gọi trên một tập hợp các phần tử, phương thức parent trả về một tập hợp các phần tử cha trực tiếp duy nhất 12 parents( [selector] ) Nhận một tập hợp các phần tử chứa tổ tiên (ancestor) của tập hợp các phần tử đã kết nối (ngoại trừ các phần tử root) 13 prev( [selector] ) Nhận một tập hợp các phần tử chứa phần tử anh em ở trước duy nhất của mỗi phần Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 43 tử trong tập hợp các phần tử đã kết nối. 14 prevAll( [selector] ) Tìm tất cả phần tử anh em ở trước phần tử hiện tại 15 siblings( [selector] ) Nhận một tập hợp phần tử chứa tất cả phần tử anh em duy nhất của mỗi phần tử trong tập hợp các phần tử đã cho CSS Selector trong jQuery Thư viện jQuery hỗ trợ gần như tất cả các Selector trong Cascading Style Sheet (CSS), khi đã được đề cập trên World Wide Web Consortium. Sử dụng thư viện jQuery, các nhà lập trình có thể nâng cấp các Website của họ mà không cần lo lắng về các trình duyệt và phiên bản của nó, miễn là các trình duyệt này đã kích hoạt JavaScript. Hầu hết các phương thức jQuery CSS không sửa đổi nội dung của đối tượng jQuery và chúng được sử dụng để áp dụng các thuộc tính CSS trên các phần tử DOM. Áp dụng các thuộc tính CSS trong jQuery Thực sự đơn giản để áp dụng các thuộc tính CSS bởi sử dụng phương thức css( PropertyName, PropertyValue ) của jQuery. Dưới đây là cú pháp cho phương thức này: selector.css( PropertyName, PropertyValue ); Ở đây, bạn có thể truyền PropertyName như là một chuỗi JavaScript và dựa trên giá trị của nó, PropertyValue có thể là một chuỗi hoặc integer. Ví dụ Ví dụ sau thêm màu Font tới list item thứ ba: Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 44 The jQuery Example <script type="text/javascript" src=""> $(document).ready(function() { $("li").eq(2).css("color", "red"); }); list item 1 list item 2 list item 3 list item 4 list item 5 list item 6 Nó sẽ cho kết quả sau: Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 45 Áp dụng nhiều thuộc tính CSS trong jQuery Bạn có thể áp dụng nhiều thuộc tính CSS bởi sử dụng phương thức CSS( {key1:val1, key2:val2....) của jQuery. Bạn có thể áp dụng bao nhiêu thuộc tính như bạn muốn chỉ trong một lần gọi phương thức đơn. Sau đây là cú pháp cho phương thức này: selector.css( {key1:val1, key2:val2....keyN:valN}) Tại đây bạn có thể truyền key như là thuộc tính và val như là giá trị của nó được miêu tả ở trên. Ví dụ Sau đây là ví dụ đơn giản mà thêm màu Font cũng như màu nền tới list item thứ 3: The jQuery Example <script type="text/javascript" src=""> $(document).ready(function() { $("li").eq(2).css({"color":"red", "background-color":"green"}); }); list item 1 list item 2 list item 3 list item 4 Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 46 list item 5 list item 6 Nó sẽ cho kết quả sau: Thiết lập độ rộng và chiều cao phần tử trong jQuery Phương thức width( val ) và height( val ) có thể được sử dụng để thiết lập độ rộng và chiều cao tương ứng của bất kỳ phần tử. Ví dụ Ví dụ đơn giản sau thiết lập độ rộng của phần tử div đầu tiên, trong khi phần còn lại của các phần tử có độ rộng được thiết lập bởi Style Sheet. The jQuery Example <script type="text/javascript" src=""> $(document).ready(function() { $("div:first").width(100); $("div:first").css("background-color", "blue"); }); div{ width:70px; height:50px; float:left; margin:5px; background:red; cursor:pointer; } Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 47 d d d d Nó sẽ cho kết quả sau: Các phương thức CSS trong jQuery Bảng dưới liệt kê tất cả phương thức mà bạn có thể sử dụng để xử lý các thuộc tính CSS: STT Phương thức & Miêu tả 1 css( name ) Trả về thuộc tính style trên phần tử đã kết nối đầu tiên 2 css( name, value ) Thiết lập thuộc tính style đơn tới một giá trị trên tất cả phần tử đã kết nối 3 css( properties ) Thiết lập một đối tượng key/value như là các thuộc tính style tới tất cả các phần tử đã kết nối 4 height( val ) Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 48 Thiết lập chiều cao CSS của mỗi phần tử đã kết nối 5 height( ) Nhận chiều cao, giá trị pixel, được tính toán hiện tại của phần tử đã kết nối đầu tiên 6 innerHeight( ) Nhận chiều cao bên trong (trừ Border và bao gồm padding) cho phần tử đã kết nối đầu tiên 7 innerWidth( ) Nhận độ rộng bên trong (trừ Border và bao gồm padding) cho phần tử đã kết nối đầu tiên. 8 offset( ) Nhận offset hiện tại của phần tử kết nối đầu tiên, bằng giá trị pixel, liên quan tới tài liệu 9 offsetParent( ) Trả về một tập hợp jQuery với phần tử cha đã xác định vị trí của phần tử kết nối đầu tiên 10 outerHeight( [margin] ) Nhận chiều cao bên ngoài (bao gồm Border và padding theo mặc định) cho phần tử đã kết nối đầu tiên 11 outerWidth( [margin] ) Nhận độ rộng bên ngoài (bao gồm Border và padding theo mặc định) cho phần tử đã kết nối đầu tiên 12 position( ) Nhận vị trí trên cùng và bên trái của một phần tử liên quan tới phần tử cha ở offset của Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 49 nó 13 scrollLeft( val ) Khi một giá trị được truyền vào trong, scrollLeft offset được thiết lập tới giá trị đó trên các phần tử đã kết nối. 14 scrollLeft( ) Nhận ScrollLeft offset của phần tử đã kết nối đầu tiên 15 scrollTop( val ) Khi một giá trị được truyền vào, scrollTop offset được thiết lập tới giá trị đó trên tất cả phần tử đã kết nối 16 scrollTop( ) Nhận scrollTop offset của phần tử đã kết nối đầu tiên. 17 width( val ) Thiết lập độ rộng CSS của mỗi phần tử đã kết nối 18 width( ) Nhận độ rộng, giá trị pixel, được tính toán hiện tại của phần tử kết nối đầu tiên Thao tác DOM trong jQuery jQuery cung cấp các phương thức để thao tác với DOM một cách cực kỳ hiệu quả. Bạn không cần viết những đoạn code quá dài để sửa đổi giá trị thuộc tính của bất kỳ phần tử nào hoặc để trích (extract) các đoạn HTML code từ một thẻ p hoặc div. jQuery cung cấp các phương thức như .attr(), .html(), .val() để thu nhận thông tin từ các phần tử DOM để sử dụng cho lần sau. Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 50 Thao tác nội dung trong jQuery Phương thức html( ) nhận nội dung html (bên trong HTML) của phần tử đã kết nối đầu tiên. Dưới đây là cú pháp của phương thức .html(): selector.html( ) Ví dụ Ví dụ đơn giản sau sử dụng các phương thức .html() và .text(val). Trong đó, .html() thu nhận nội dung HTML từ đối tượng và sau đó phương thức .text(val) thiết lập giá trị của đối tượng bởi sử dụng tham số đã truyền. The jQuery Example <script type="text/javascript" src=""> $(document).ready(function() { $("div").click(function () { var content = $(this).html(); $("#result").text( content ); }); }); #division{ margin:10px;padding:12px; border:2px solid #666; width:60px;} Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 51 Click on the square below: This is Blue Square!! Nó sẽ cho kết quả: Thay thế phần tử DOM trong jQuery Bạn có thể thay thế hoàn toàn một phần tử DOM với các phần tử HTML hoặc DOM đã xác định. Phương thức replaceWith( content ) thực hiện mục đích này rất hiệu quả. Sau đây là cú pháp: selector.replaceWith( content ) Ở đây, content là những gì bạn muốn thay thế cho phần tử ban đầu. Nó có thể là HTML hoặc văn bản. Ví dụ Ví dụ đơn giản sau sẽ thay thế phần tử div với "JQuery is Great" − The jQuery Example <script type="text/javascript" src=""> $(document).ready(function() { $("div").click(function () { $(this).replaceWith("JQuery is Great"); Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 52 }); }); #division{ margin:10px;padding:12px; border:2px solid #666; width:60px;} Click on the square below: This is Blue Square!! Nó sẽ cho kết quả sau: Gỡ bỏ các phần tử DOM trong jQuery Có thể có một tình huống khi bạn muốn gỡ bỏ một hoặc nhiều phần tử DOM từ tài liệu. jQuery cung cấp hai phương thức để xử lý tình huống này: Phương thức empty( ) gỡ bỏ tất cả node con từ tập hợp các phần tử đã kết nối, trong khi phương thức remove( expr ) gỡ bỏ tất cả các phần tử đã kết nối từ DOM. Dưới đây là cú pháp: selector.remove( [ expr ]) Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 53 or selector.empty( ) Bạn có thể truyền tham số expr tùy ý để lọc tập hợp các phần tử cần gỡ bỏ. Ví dụ Trong ví dụ đơn giản, các phần tử được gỡ bỏ ngay sau khi chúng được click: The jQuery Example <script type="text/javascript" src=""> $(document).ready(function() { $("div").click(function () { $(this).remove( ); }); }); .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;} Click on any square below: Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 54 Nó sẽ cho kết quả sau: Chèn các phần tử DOM trong jQuery Có thể có tình huống khi bạn muốn chèn một hoặc nhiều phần tử DOM mới vào trong tài liệu đang tồn tại của bạn. jQuery cung cấp nhiều phương thức đa dạng để chèn các phần tử vào các vị trí khác nhau. Phương thức after( content ) chèn content sau mỗi phần tử đã kết nối, trong khi phương thức before( content ) chèn content trước mỗi phần tử đã kết nối. Dưới đây là cú pháp của các phương thức: selector.after( content ) or selector.before( content ) Ở đây, content là những gì bạn muốn chèn. Nó có thể là HTML hoặc văn bản. Ví dụ Trong ví dụ sau, các phần tử div được chèn ngay trước phần tử được click: The jQuery Example <script type="text/javascript" src=""> $(document).ready(function() { Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 55 $("div").click(function () { $(this).before('' ); }); }); .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;} Click on any square below: Nó sẽ cho kết quả sau: Các phương thức thao tác DOM trong jQuery Dưới đây liệt kê tất cả phương thức mà bạn có thể sử dụng để thao tác các phần tử DOM: STT Phương thức & Miêu tả 1 after( content ) Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 56 Chèn content sau mỗi phần tử đã kết nối 2 append( content ) Phụ thêm content tới bên trong mỗi phần tử đã kết nối 3 appendTo( selector ) Phụ thêm tất cả phần tử đã kết nối tới tập hợp phần tử đã cho khác 4 before( content ) Chèn content trước mỗi phần tử đã kết nối 5 clone( bool ) Mô phỏng các phần tử DOM đã kết nối, và tất cả các Event Handler của chúng, và chọn các mô phỏng đó 6 clone( ) Mô phỏng các phần tử DOM đã kết nối và chọn các mô phỏng đó 7 empty( ) Gỡ bỏ tất cả các node con từ tập hợp các phần tử đã kết nối 8 html( val ) Thiết lập các nội dung HTML của mỗi phần tử đã kết nối 9 html( ) Nhận các nội dung HTML (HTML bên trong) của phần tử đã kết nối đầu tiên 10 insertAfter( selector ) Chèn tất cả phần tử đã kết nối vào sau tập hợp các phần tử đã xác định khác Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 57 11 insertBefore( selector ) Chèn tất cả phần tử đã kết nối vào trước tập hợp các phần tử đã xác định khác 12 prepend( content ) Thêm vào trước content tới bên trong mỗi phần tử đã kết nối 13 prependTo( selector ) Thêm vào trước tất cả phần tử đã kết nối tới tập hợp các phần tử đã xác định khác 14 remove( expr ) Gỡ bỏ tất cả phần tử đã kết nối từ DOM 15 replaceAll( selector ) Thay thế các phần tử đã kết nối bởi Selector đã cho với các phần tử được kết nối 16 replaceWith( content ) Thay thế tất cả phần tử đã kết nối với các phần tử HTML hoặc DOM đã xác định 17 text( val ) Thiết lập các nội dung text của tất cả phần tử đã kết nối 18 text( ) Nhận các nội dung text đã tổ hợp của tất cả phần tử đã kết nối 19 wrap( elem ) Bao bọc (wrap) mỗi phần tử đã kết nối với phần tử đã xác định 20 wrap( html ) Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 58 Wrap mỗi phần tử đã kết nối với nội dung HTML đã xác định 21 wrapAll( elem ) Wrap tất cả phần tử trong tập hợp đã kết nối vào trong một phần tử bao bọc đơn (elem ở đây là phần tử DOM) 22 wrapAll( html ) Wrap tất cả phần tử trong tập hợp đã kết nối vào trong một phần tử bao bọc đơn (html là phần tử HTML) 23 wrapInner( elem ) Wrap các nội dung con bên trong mỗi phần tử đã kết nối (bao gồm các node văn bản) với một phần tử DOM 24 wrapInner( html ) Wrap các nội dung con bên trong mỗi phần tử đã kết nối (bao gồm các node văn bản) với một cấu trúc HTML Xử lý sự kiện trong jQuery Chúng ta có khả năng tạo các trang web động bởi sử dụng các Sự kiện (Event). Các sự kiện là các hành động mà có thể được phát hiện bởi ứng dụng web của bạn. Sau đây ví dụ một số sự kiện:  Nhấp chuột  Tải trang web  Di chuyển chuột qua một phần tử  Đệ trình một HTML Form  Thao tác nhấn phím trên bàn phím  etc. Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 59 Khi các sự kiện này được kích hoạt, bạn có thể sử dụng các hàm custom để phản hồi bất kỳ những gì bạn muốn với sự kiện đó. Những hàm custom này gọi là Event Handler. Bind các Event Handler trong jQuery Sử dụng Event Model trong jQuery, chúng ta có thể thiết lập các Event Handler trên các phần tử DOM với phương thức bind() như sau: The jQuery Example <script type="text/javascript" src=""> $(document).ready(function() { $('div').bind('click', function( event ){ alert('Hi there!'); }); }); .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;} Click on any square below to see the result: ONE TWO THREE Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 60 Code trên sẽ làm cho phần tử div phản hồi lại sự kiện click; khi người sử dụng nhấp chuột bên trong phần tử div này, ngay sau đó, thông báo sẽ được hiển thị. Nó sẽ cho kết quả sau: Cú pháp đầy đủ của lệnh bind() trong jQuery như sau: selector.bind( eventType[, eventData], handler) Tiếp theo, chúng tôi diễn tả chi tiết các tham số:  eventType − Một chuỗi chứa một loại JavaScript event, như click hoặc đệ trình. Bạn theo dõi phần dưới để thấy danh sách đầy đủ các loại sự kiện.  eventData − tham số tùy ý là một map của dữ liệu mà sẽ được truyền tới Event Handler.  handler − Một hàm để thực thi mỗi khi sự kiện được kích hoạt. Gỡ bỏ Event Handler trong jQuery Một nét đặc trưng là, mỗi khi một Event Handler được thành lập, nó vẫn còn hiệu quả trong phần sống còn lại của trang web. Có một sự cần thiết khi bạn muốn gỡ bỏ Event Handler này. jQuery cung cấp lệnh unbind() để gỡ bỏ một Event Handler đang tồn tại. Cú pháp của unbind() trong jQuery như sau: selector.unbind(eventType, handler) or selector.unbind(eventType) Chi tiết về tham số:  eventType − Một chuỗi chứa một loại JavaScript Event, như click hoặc đệ trình. Bạn theo dõi phần dưới để thấy danh sách đầy đủ các loại sự kiện. Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 61  handler − Nếu được cung cấp, nó nhận diện Event Handler cụ thể cần gỡ bỏ. Các loại sự kiện trong jQuery Bạn có thể kết nối (bind) các sự kiện sau bởi sử dụng jQuery: STT Loại Event & Miêu tả 1 blur Xuất hiện khi phần tử mất trọng tâm 2 change Xuất hiện khi phần tử thay đổi 3 click Xuất hiện khi click chuột 4 dblclick Kích hoạt khi nhấp đúp chuột 5 error Xuất hiện khi có một lỗi trong quá trình tải 6 focus Xuất hiện khi phần tử nhận trọng tâm 7 keydown Xuất hiện khi phím được nhấn 8 keypress Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 62 Kích hoạt khi phím được nhấn và thả ra 9 keyup Kích hoạt khi phím được thả ra 10 load Xuất hiện khi tài liệu được tải 11 mousedown Xuất hiện khi nút chuột được nhấn 12 mouseenter Xuất hiện khi chuột di chuyển vào trong khu vực một phần tử 13 mouseleave Xuất hiện khi chuột di chuyển ra khỏi khu vực một phần tử 14 mousemove Kích hoạt khi con trỏ chuột di chuyển 15 mouseout Kích hoạt khi con trỏ chuột di chuyển ra khỏi một phần tử 16 mouseover Kích hoạt khi con trỏ chuột di chuyển qua một phần tử 17 mouseup Xuất hiện khi một nút chuột được nhả ra Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 63 18 resize Kích hoạt khi kích cỡ cửa sổ thay đổi 19 scroll Kích hoạt khi cửa sổ được cuốn 20 select Kích hoạt khi một text được chọn 21 submit Kích hoạt khi một form được đệ trình 22 unload Kích hoạt khi tài liệu không được tải Đối tượng Event trong jQuery Hàm callback nhận một tham số đơn; khi một Handler được gọi, đối tượng JavaScript Event sẽ được truyền qua nó. Đối tượng Event thường không cần thiết và tham số được bỏ qua, khi context là thường có sẵn khi Handler được kết nối để biết chính xác những gì cần được thực hiện khi Handler được kích hoạt; tuy nhiên có một số thuộc tính nào đó mà bạn cần truy xuất. Các thuộc tính của đối tượng Event trong jQuery Các thuộc tính của Event là có sẵn và an toàn để truy cập theo một phương thức độc lập: STT Thuộc tính & Miêu tả 1 altKey Thiết lập là true nếu phím Alt được nhấn khi sự kiện được kích hoạt, nếu không là Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 64 false. Phím Alt được gán nhãn là Option trên hầu hết bàn phím Mac 2 ctrlKey Thiết lập là true nếu phím Ctrl được nhấn khi sự kiện được kích hoạt, nếu không là false 3 data Giá trị, nếu bất kỳ, được truyền như là tham số thứ hai tới lệnh bind() khi Handler được thành lập. 4 keyCode Cho sự kiện các phím di chuyển lên, xuống, điều này trả về phím mà được nhấn 5 metaKey Thiết lập là true nếu phím Meta được nhấn khi sự kiện được kích hoạt, nếu không là false. Phím Meta là phím Ctrl trên các PC và phím Command trên Macs 6 pageX Cho các sự kiện liên quan tới chuột, xác định tọa độ ngang của sự kiện trong mỗi quan hệ với trang ban đầu. 7 pageY Cho các sự kiện liên quan tới chuột, xác định tọa độ dọc của sự kiện trong mỗi quan hệ với trang ban đầu 8 relatedTarget Với một số sự kiện liên quan đến chuột, nhận diện phần tử mà con trỏ chuột rời khỏi hoặc đi vào khi sự kiện được kích hoạt. 9 screenX Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 65 Với một số sự kiện liên quan đến chuột, xác định tọa độ ngang của sự kiện trong mối quan hệ với màn hình ban đầu 10 screenY Với một số sự kiện liên quan đến chuột, xác định tọa độ dọc của sự kiện trong mối quan hệ với màn hình ban đầu 11 shiftKey Thiết lập là true nếu phím Shift được nhấn khi sự kiện được kích hoạt, nếu không là false 12 target Nhận diện phần tử mà với nó sự kiện được kích hoạt 13 timeStamp timestamp (giá trị mili giây) khi sự kiện được tạo ra 14 type Với tất cả sự kiện, xác định loại sự kiện mà được kích hoạt 15 which Với các sự kiện liên quan tới bàn phím, xác định code giá trị số cho phím mà gây ra sự kiện, và với các sự kiện liên quan tới chuột, xác định nút nào được nhấn (1 cho nút trái, 2 cho ở giữa và 3 cho nút phải) Ví dụ The jQuery Example <script type="text/javascript" src=""> Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 66 $(document).ready(function() { $('div').bind('click', function( event ){ alert('Event type is ' + event.type); alert('pageX : ' + event.pageX); alert('pageY : ' + event.pageY); alert('Target : ' + event.target.innerHTML); }); }); .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;} Click on any square below to see the result: ONE TWO THREE Nó sẽ cho kết quả sau: Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 67 Các phương thức của đối tượng Event trong jQuery Dưới đây liệt kê các phương thức mà có thể được gọi trên một đối tượng Event trong jQuery: STT Phương thức & Miêu tả 1 preventDefault() Ngăn cản trình duyệt thực thi hành động mặc định 2 isDefaultPrevented() Trả về có hay không phương thức event.preventDefault() đã từng được gọi trên đối tượng Event này 3 stopPropagation() Dừng bubble một sự kiện tới các phần tử cha, ngăn cản bất cứ phần tử cha nào được thông báo về sự kiện này 4 isPropagationStopped() Trả về có hay không event.stopPropagation() đã từng gọi trên đối tượng Event này 5 stopImmediatePropagation() Dừng phần còn lại của các Handler từ việc được thực thi 6 isImmediatePropagationStopped() Trả về có hay không event.stopImmediatePropagation() đã từng được gọi trên đối tượng Event này Các phương thức thao tác đối tượng Event trong jQuery Bảng dưới liệt kê các phương thức quan trọng liên quan tới Event trong jQuery: Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 68 STT Phương thức & Miêu tả 1 bind( type, [data], fn ) Bind một Handler tới một hoặc nhiều sự kiện cho mỗi phần tử đã kết nối. Có thể cũng bind các sự kiện Custom 2 off( events [, selector ] [, handler(eventObject) ] ) Nó gỡ bỏ một sự kiện sống được bind 3 hover( over, out ) Bắt chước việc hover cho sự di chuyển ví dụ của chuột trên và rời khỏi một đối tượng 4 on( events [, selector ] [, data ], handler ) Bind một Handler tới một sự kiện cho tất cả phần tử hiện tại, tương lai, và đã kết nối. Có thể cũng bind các sự kiện custom. 5 one( type, [data], fn ) Bind một Handler tới một hoặc nhiều sự kiện để được thực thi một lần cho mỗi phần tử đã kết nối 6 ready( fn ) Bind một hàm để được thực thi bất cứ khi nào DOM sẵn sàng để được thao tác 7 trigger( event, [data] ) Kích hoạt một sự kiện trên mỗi phần tử đã kết nối 8 triggerHandler( event, [data] ) Kích hoạt tất cả Event Handler được bind trên một phần tử Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 69 9 unbind( [type], [fn] ) Thực hiện ngược lại với bind, nó gỡ bỏ các đối tượng được bind từ mỗi phần tử đã kết nối Các phương thức Event Helper trong jQuery jQuery cũng cung cấp một tập hợp các hàm Event Helper mà có thể được sử dụng hoặc để kích hoạt một sự kiện hoặc để bind bất kỳ loại sự kiện nào được đề cập ở phần trên. Các phương thức Trigger trong jQuery Dưới đây là ví dụ sẽ kích hoạt sự kiện blur trên tất cả đoạn văn: $("p").blur(); Phương thức Binding trong jQuery Ví dụ sau sẽ bind một sự kiện click trên tất cả phần tử − $("div").click( function () { // do something here }); Bảng dưới liệt kê đầy đủ tất cả phương thức được hỗ trợ bởi jQuery: STT Phương thức & Miêu tả 1 blur( ) Kích hoạt sự kiện blur của mỗi phần tử đã kết nối 2 blur( fn ) Bind một hàm tới sự kiện blur của mỗi phần tử đã kết nối 3 change( ) Kích hoạt sự kiện change của mỗi phần tử đã kết nối Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 70 4 change( fn ) Bind một hàm tới sự kiện change của mỗi phần tử đã kết nối 5 click( ) Kích hoạt sự kiện click của mỗi phần tử đã kết nối 6 click( fn ) Bind một hàm tới sự kiện click của mỗi phần tử đã kết nối 7 dblclick( ) Kích hoạt sự kiện dblclick của mỗi phần tử đã kết nối 8 dblclick( fn ) Bind một hàm tới sự kiện dblclick của mỗi phần tử đã kết nối 9 error( ) Kích hoạt sự kiện error của mỗi phần tử đã kết nối 10 error( fn ) Bind một hàm tới sự kiện error của mỗi phần tử đã kết nối 11 focus( ) Kích hoạt sự kiện focus của mỗi phần tử đã kết nối 12 focus( fn ) Bind một hàm tới sự kiện focus của mỗi phần tử đã kết nối 13 keydown( ) Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 71 Kích hoạt sự kiện keydown của mỗi phần tử đã kết nối 14 keydown( fn ) Bind một hàm tới sự kiện keydown của mỗi phần tử đã kết nối 15 keypress( ) Kích hoạt sự kiện keypress của mỗi phần tử đã kết nối 16 keypress( fn ) Bind một hàm tới sự kiện keypress của mỗi phần tử đã kết nối 17 keyup( ) Kích hoạt sự kiện keyup của mỗi phần tử đã kết nối 18 keyup( fn ) Bind một hàm tới sự kiện keyup của mỗi phần tử đã kết nối 20 load( fn ) Bind một hàm tới sự kiện load của mỗi phần tử đã kết nối 21 mousedown( fn ) Bind một hàm tới sự kiện mousedown của mỗi phần tử đã kết nối 22 mouseenter( fn ) Bind một hàm tới sự kiện mouseenter của mỗi phần tử đã kết nối 23 mouseleave( fn ) Bind một hàm tới sự kiện mouseleave của mỗi phần tử đã kết nối Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 72 24 mousemove( fn ) Bind một hàm tới sự kiện mouseover của mỗi phần tử đã kết nối 25 mouseout( fn ) Bind một hàm tới sự kiện mouseout của mỗi phần tử đã kết nối 26 mouseover( fn ) Bind một hàm tới sự kiện mouseover của mỗi phần tử đã kết nối 27 mouseup( fn ) Bind một hàm tới sự kiện mouseup của mỗi phần tử đã kết nối 28 resize( fn ) Bind một hàm tới sự kiện resize của mỗi phần tử đã kết nối 29 scroll( fn ) Bind một hàm tới sự kiện scroll của mỗi phần tử đã kết nối 30 select( ) Kích hoạt sự kiện select của mỗi phần tử đã kết nối 31 select( fn ) Bind một hàm tới sự kiện select của mỗi phần tử đã kết nối 32 submit( ) Kích hoạt sự kiện submit của mỗi phần tử đã kết nối 33 submit( fn ) Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 73 Bind một hàm tới sự kiện submit của mỗi phần tử đã kết nối 34 unload( fn ) Bind một hàm tới sự kiện unload của mỗi phần tử đã kết nối jQuery Ajax AJAX là từ viết tắt của Asynchronous JavaScript and XML và công nghệ này giúp chúng ta tải dữ liệu từ Server mà không cần Refresh trình duyệt. Nếu bạn cảm thấy mới mẻ với AJAX, mình đề nghị bạn nên truy cập trang: Ajax Tutorialtrước khi theo dõi những gì được đề cập trong chương này. jQuery là một công cụ tuyệt vời cung cấp một tập hợp các phương thức AJAX dồi dào để phát triển ứng dụng web. Tải dữ liệu một cách đơn giản với jQuery Nó là thực sự dễ dàng để tải bất kỳ dữ liệu tĩnh hoặc dữ liệu động bởi sử dụng jQuery AJAX. jQuery cung cấp phương thức load() để thực hiện công việc này: Cú pháp Sau đây là cú pháp đơn giản cho phương thức load() trong jQuery: [selector].load( URL, [data], [callback] ); Miêu tả chi tiết về các tham số:  URL − URL của ngồn Server-Side để Yêu cầu (Request) được gửi tới. Nó có thể là CGI, ASP, JSP, hoặc PHP script mà tạo dữ liệu động hoặc ra khỏi database  data − tham số tùy ý này biểu diễn một đối tượng mà các thuộc tính của nó được xếp theo thứ tự vào trong các tham số được mã hóa một cách thích hợp để được truyền tới Yêu cầu (Request). Nếu được xác định, Request được tạo bởi sử dụng phương thức POST. Nếu bị bỏ qua, phương thức GET được sử dụng. Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 74  callback − Một hàm callback được gọi sau dữ liệu phản hồi đã được tải vào trong các phần tử của tập hợp đã kết nối. tham số đầu tiên được truyền tới hàm này là văn bản phản hồi từ Server và tham số thứ hai là mã hóa trạng thái. Ví dụ Bạn xem xét HTML file sau với một đoạn jQuery code nhỏ: The jQuery Example <script type="text/javascript" src=""> $(document).ready(function() { $("#driver").click(function(event){ $('#stage').load('../result.html'); }); }); Click on the button to load result.html file − STAGE Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 75 Ở đây, load() khởi tạo một AJAX request tới URL file đã xác định là ../result.html. Sau khi tải file này, tất cả nội dung sẽ được đưa đến vào trong phần tử được tag với ID là stage. Giả sử, ../result.html file chỉ có một dòng HTML như sau: THIS IS RESULT... Khi bạn click vào nút đã cho, thì khi đó result.html được tải. Nhận dữ liệu JSON trong jQuery Có thể sẽ có một tình huống khi Server sẽ trả về chuỗi JSON cho yêu cầu của bạn. Hàm tiện ích jQuery getJSON() phân tích chuỗi JSON đã trả về và tạo chuỗi kết quả có sẵn cho hàm callback như là tham số đầu tiên để thực hiện các hành động khác xa hơn. Cú pháp Cú pháp của phương thức getJSON() trong jQuery là: [selector].getJSON( URL, [data], [callback] ); Dưới đây là miêu tả chi tiết về các tham số:  URL − URL của nguồn Server-Side được kết nối thông qua phương thức GET.  data − Một đối tượng mà các thuộc tính của nó cung cấp cặp name/value được sử dụng để xây dựng một chuỗi truy vấn để được nối kết với URL, hoặc một chuỗi truy vấn được định dạng và được mã hóa trước.  callback − Một hàm được gọi khi Request hoàn thành. Giá trị dữ liệu kết quả từ phân tích thân phải hồi như là một chuỗi jQuery được truyền như là tham số đầu tiên tới callback này, và trạng thái là thứ hai. Ví dụ Bạn xem xét HTML file sau với một đoạn jQuery code nhỏ: The jQuery Example Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 76 <script type="text/javascript" src=""> $(document).ready(function() { $("#driver").click(function(event){ $.getJSON('../result.json', function(jd) { $('#stage').html(' Name: ' + jd.name + ''); $('#stage').append('Age : ' + jd.age+ ''); $('#stage').append(' Sex: ' + jd.sex+ ''); }); }); }); Click on the button to load result.json file − STAGE Ở đây, phương thức tiện ích getJSON() trong jQuery khởi tạo một AJAX Request tới URL file đã xác định là result.json. Sau khi tải file này, tất cả nội dung sẽ được truyền tới hàm callback mà Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 77 cuối cùng sẽ được đưa đến bên trong phần tử được tag với ID là stage. Giả sử, result.json có nội dung json được định dạng là: { "name": "Zara Ali", "age" : "67", "sex": "female" } Khi bạn click vào nút đã cho, thì khi đó result.json được tải. Truyền dữ liệu tới Server trong jQuery Nhiều khi bạn thu thập input từ người sử dụng và bạn truyền những input này tới Server để tiến hành xử lý sâu hơn. jQuery AJAX làm nó đủ dễ dàng để truyền các dữ liệu đã thu thập tới Server bởi sử dụng tham số data của bất kỳ phương thức Ajax có sẵn nào. Ví dụ Ví dụ này minh họa cách truyền input từ người dùng tới một WebServer mà sẽ gửi kết quả trở lại và chúng ta sẽ in nó ra: The jQuery Example <script type="text/javascript" src=""> $(document).ready(function() { $("#driver").click(function(event){ var name = $("#name").val(); $("#stage").load('/jquery/result.php', {"name":name} ); }); }); Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 78 Enter your name and click on the button: STAGE Còn đây là code được viết trong result.php script:; <?php if( $_REQUEST["name"] ) { $name = $_REQUEST['name']; echo "Welcome ". $name; } ?> Bây giờ, bạn có thể nhập bất kỳ text nào vào trong hộp input đã cho và sau đó nhấn nút Show Result để xem những gì bạn đã nhập trong Input box. Các phương thức jQuery AJAX Bạn đã thấy khái niệm của AJAX sử dụng jQuery. Bảng sau liệt kê tất cả phương thức jQuery AJAX mà bạn có thể sử dụng tùy theo yêu cầu của bạn: STT Phương thức & Miêu tả Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 79 1 jQuery.ajax( options ) Tải một trang từ xa bởi sử dụng một HTTP Request 2 jQuery.ajaxSetup( options ) Setup các thiết lập global cho AJAX Request 3 jQuery.get( url, [data], [callback], [type] ) Tải một trang từ xa bởi sử dụng một HTTP GET Request 4 jQuery.getJSON( url, [data], [callback] ) Tải dữ liệu JSON bởi sử dụng một HTTP GET Request 5 jQuery.getScript( url, [callback] ) Tải và thực thi một JavaScript file bởi sử dụng một HTTP GET request. 6 jQuery.post( url, [data], [callback], [type] ) Tải một trang từ xa bởi sử dụng một HTTP POST request. 7 load( url, [data], [callback] ) Tải HTML từ một file từ xa và inject nó vào trong DOM. 8 serialize( ) Sắp xếp theo thứ tự một tập hợp các phần tử input vào trong một chuỗi dữ liệu 9 serializeArray( ) Xếp theo thứ tự tất cả Form và phần tử Form như phương thức .serialize() nhưng trả về một cấu trúc dữ liệu JSON để bạn làm việc với nó. Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 80 Các sự kiện jQuery AJAX Bạn có thể gọi nhiều phương thức jQuery đa dạng trong suốt vòng đời của tiến trình gọi AJAX. Dựa trên cơ sở các Event/Stage khác nhau, các phương thức sau là có sẵn: Bạn truy cập vào trang sau để xem tất cả AJAX Event trong jQuery. STT Phương thức & Miêu tả 1 ajaxComplete( callback ) Đính kèm một hàm để được thực thi bất cứ khi nào một AJAX Request hoàn thành 2 ajaxStart( callback ) Đính kèm một hàm để được thực thi bất cứ khi nào một AJAX Request bắt đầu và không có hoạt động nào sẵn sàng 3 ajaxError( callback ) Đính kèm một hàm để được thực thi bất cứ khi nào một AJAX Request thất bại 4 ajaxSend( callback ) Đính kèm một hàm để được thực thi trước khi một AJAX Request được gửi 5 ajaxStop( callback ) Đính kèm một hàm để được thực thi bất cứ khi nào tất cả AJAX Request đã kết thúc 6 ajaxSuccess( callback ) Đính kèm một hàm để được thực thi bất cứ khi nào một AJAX Request kết thúc thành công Hiệu ứng trong jQuery Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 81 jQuery cung cấp một giao diện đơn giản để thực hiện các loại hiệu ứng tuyệt vời đa dạng. Các phương thức jQuery cho phép chúng ta áp dụng nhanh chóng các hiệu ứng phổ biến với cấu hình tối thiểu. Chương này sẽ bàn luận tất cả phương thức jQuery quan trọng để tạo các Visual Effect. Hiển thị và ẩn các phần tử trong jQuery Các lệnh để hiển thị và ẩn các phần tử là khá gọn như những gì chúng ta mong muốn:show() để hiển thị các phần tử trong một tập hợp được wrap và hide() để ẩn chúng. Cú pháp Sau đây là cú pháp đơn giản cho phương thức show() trong jQuery: [selector].show( speed, [callback] ); Miêu tả chi tiết về các tham số:  speed − Một chuỗi biểu diễn một trong 3 tốc độ đã định trước ("slow", "normal", hoặc "fast") hoặc số mili giây để chạy hiệu ứng (ví dụ: 1000).  callback − tham số tùy ý này biểu diễn một hàm để được thực thi bất cứ khi nào hiệu ứng hoàn thành; thực thi một lần cho mỗi hiệu ứng. Còn đây là cú pháp đơn giản cho phương thức hide() trong jQuery: [selector].hide( speed, [callback] ); Miêu tả chi tiết về các tham số:  speed − Một chuỗi biểu diễn một trong 3 tốc độ đã định trước ("slow", "normal", hoặc "fast") hoặc số mili giây để chạy hiệu ứng (ví dụ: 1000).  callback − tham số tùy ý này biểu diễn một hàm để được thực thi bất cứ khi nào hiệu ứng hoàn thành; thực thi một lần cho mỗi hiệu ứng. Ví dụ Bạn xem xét HTML file sau với một jQuery code nhỏ: Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 82 The jQuery Example <script type="text/javascript" src=""> $(document).ready(function() { $("#show").click(function () { $(".mydiv").show( 1000 ); }); $("#hide").click(function () { $(".mydiv").hide( 1000 ); }); }); .mydiv{ margin:10px;padding:12px; border:2px solid #666; width:100px; height:100px;} This is a SQUARE Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 83 Nó sẽ cho kết quả sau: Toggle các phần tử trong jQuery jQuery cung cấp các phương thức để toggle trạng thái hiển thị của các phần tử giữa hiển thị và ẩn. Nếu phần tử khi khởi tạo là hiển thị, nó sẽ được ẩn; nếu là ẩn, nó sẽ được hiển thị. Cú pháp Cú pháp đơn giản cho một phương thức toggle() trong jQuery: [selector]..toggle([speed][, callback]); Dưới đây là miêu tả về các tham số:  speed − Một chuỗi biểu diễn một trong 3 tốc độ đã định trước ("slow", "normal", hoặc "fast") hoặc số mili giây để chạy hiệu ứng (ví dụ: 1000).  callback − tham số tùy ý này biểu diễn một hàm để được thực thi bất cứ khi nào hiệu ứng hoàn thành; thực thi một lần cho mỗi hiệu ứng. Ví dụ Chúng ta có thể tạo hiệu ứng cho bất kỳ phần tử nào, ví dụ như một phần tử div chứa một hình ảnh: The jQuery Example <script type="text/javascript" src=""> $(document).ready(function() { $(".clickme").click(function(event){ $(".target").toggle('slow', function(){ $(".log").text('Transition Complete'); Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 84 }); }); }); .clickme{ margin:10px;padding:12px; border:2px solid #666; width:100px; height:50px;} Click Me Nó sẽ cho kết quả sau: Các phương thức jQuery Effect Ở phần trên, bạn đã theo dõi các khái niệm cơ bản về jQuery Effect. Bảng dưới liệt kê tất cả phương thức cơ bản để tạo các kiểu hiệu ứng khác nhau: STT Phương thức & Miêu tả 1 animate( params, [duration, easing, callback] ) Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 85 Một hàm để tạo các hiệu ứng custom 2 fadeIn( speed, [callback] ) Fade in tất cả các phần tử đã kết nối bởi việc điều chỉnh opacity (độ chắn sáng) và kích hoạt một callback tùy ý sau khi hoàn thành. 3 fadeOut( speed, [callback] ) Fade out tất cả phần tử đã kết nối bởi điều chỉnh opacity về 0, sau đó thiết lập hiển thị về “none” và kích hoạt một callback tùy ý sau khi hoàn thành 4 fadeTo( speed, opacity, callback ) Fade độ chắn sáng của tất cả phần tử đã kết nối tới một opacity đã cho và kích hoạt một callback tùy ý sau khi hoàn thành. 5 hide( ) Ẩn mỗi phần tử trong tập hợp đã kết nối nếu chúng đã hiển thị 6 hide( speed, [callback] ) Ẩn tất cả phần tử đã kết nối bởi sử dụng một hiệu ứng đẹp và kích hoạt một callback tùy ý sau khi hoàn thành 7 show( ) Hiển thị mỗi phần tử trong tập hợp đã kết nối nếu chúng bị ẩn 8 show( speed, [callback] ) Hiển thị tất cả phần tử đã kết nối bởi sử dụng một hiệu ứng đẹp và kích hoạt một callback tùy ý sau khi hoàn thành 10 slideDown( speed, [callback] ) Bộc lộ tất cả phần tử đã kết nối bởi điều chỉnh chiều cao của chúng và kích hoạt một Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 86 callback tùy ý sau khi hoàn thành 11 slideToggle( speed, [callback] ) Toggle sự nhìn thấy của tất cả phần tử đã kết nối bởi điều chỉnh chiều cao và kích hoạt một callback tùy ý sau khi hoàn thành 12 slideUp( speed, [callback] ) Ẩn tất cả phần tử đã kết nối bởi điều chỉnh chiều cao của chúng và kích hoạt một callback tùy ý sau khi hoàn thành. 13 stop( [clearQueue, gotoEnd ]) Dừng tất cả các hiệu ứng đang chạy hiện tại trên tất cả phần tử đã xác định 14 toggle( ) Toggle sự hiển thị mỗi phần tử trong tập hợp các phần tử đã kết nối 15 toggle( speed, [callback] ) Toggle sự hiển thị mỗi phần tử trong tập hợp các phần tử đã kết nối bởi sử dụng một hiệu ứng đẹp và kích hoạt một callback tùy ý sau khi hoàn thành 16 toggle( switch ) Toggle sự hiển thị mỗi phần tử trong tập hợp đã kết nối dựa trên việc chuyển mạch giữa: true là hiển thị tất cả phần tử, false là ẩn tất cả phần tử 17 jQuery.fx.off Vô hiệu hóa toàn bộ tất cả hiệu ứng Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 87 Các hiệu ứng trên cơ sở UI Library trong jQuery Để sử dụng các hiệu ứng này, bạn có thể hoặc tải về jQuery UI Library mới nhất là jquery-ui- 1.11.4.custom.zip từ trang jQuery UI Library hoặc sử dụng Google CDN để sử dụng nó theo cách tương tự như chúng tôi đã thực hiện cho jQuery. Chúng tôi đã sử dụng Google CDN cho jQuery UI bởi sử dụng đoạn trích code sau trong trang HTML: <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery- ui.min.js"> STT Phương thức & Miêu tả 1 Blind Blind away phần tử hoặc hiển thị nó bằng blind in 2 Bounce Bounce phần tử theo chiều dọc hoặc chiều ngang n lần 3 Clip Clip on hoặc clip off phần tử, theo chiều dọc hoặc chiều ngang 4 Drop Drop away phần tử hoặc hiển thị nó bởi drop in 5 Explode Explode phần tử thành nhiều phần 6 Fold Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 88 Fold phần tử như một phần của tờ giấy 7 Highlight Highlight nền với màu đã cho 8 Puff Scale và fade out các hiệu ứng tạo ra hiệu ứng puff 9 Pulsate Pulsate độ chắn sáng của phần tử nhiều lần 10 Scale Shrink hoặc grow một phần tử bởi tỷ lệ phần trăm nào đó 11 Shake Shake phần tử theo chiều dọc hoặc chiều ngang n lần. 12 Size Đưa phần tử về chiều cao và rộng đã xác định 13 Slide Slide out phần tử ra khỏi cửa nhìn 14 Transfer Chuyển hình dáng của một phần tử cho phần tử khác Plugins trong jQuery Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 89 Plug-in là một phần của code được viết theo một JavaScript file chuẩn. Những file này cung cấp các phương thức jQuery hữu ích mà có thể được sử dụng cùng với các phương thức jQuery Library. Có rất nhiều jQuery plug-in có sẵn để bạn có thể tải về từ kho lưu tại: Cách sử dụng Plugins trong jQuery Để tạo các phương thức của một plugin có sẵn, chúng ta bao plugin file (tương tự như jQuery Library file) vào trong phần tử của tài liệu. Chúng tôi phải chắc chắn rằng nó xuất hiện sau jQuery file nguồn chính, và trước JavaScript code mà chúng ta custom. Ví dụ sau chỉ cách để bao jquery.plug-in.js plugin − The jQuery Example <script type="text/javascript" src=""> $(document).ready(function() { .......your custom code..... }); ............................. Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 90 Cách để phát triển một Plug-in trong jQuery Đó là đơn giản để viết một plug-in cho riêng bạn. Bạn theo cú pháp sau để tạo một phương thức: jQuery.fn.methodName = methodDefinition; Ở đây, methodNameM là tên của phương thức mới và methodDefinition là định nghĩa phương thức thực sự. jQuery team đề nghị một Guideline sau:  Bất kỳ phương thức hoặc hàm nào bạn đính kèm phải có một dấu chấm phảy (;) ở cuối cùng.  Phương thức của bạn phải trả về đối tượng jQuery, trừ khi có ghi chú khác.  Bạn nên sử dụng this.each để lặp lại tập hợp các phần tử đã kết nối hiện tại. Nó làm cho code rõ ràng và tương thích.  Đặt trước filename với jquery, theo sau là tên của plugin và kết thúc với .js  Luôn luôn đính kèm plugin tới jQuery một cách trực tiếp thay vì sử dụng $, vì thế người sử dụng có thể dùng một biệt hiệu custom thông qua phương thức noConflict(). Ví dụ, nếu chúng ta viết một plugin mà chúng ta muốn đặt tên là debug, thì tên JavaScript file cho plugin này là: jquery.debug.js Sự sử dụng của tiền tố jquery. loại bỏ bất cứ sự xung đột về tên với file dự định để sử dụng với thư viện khác. Ví dụ Sau đây là một plug-in nhỏ để có phương thức warning() cho mục đích debug. Bạn giữ code này trong jquery.debug.js file: jQuery.fn.warning = function() { Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 91 return this.each(function() { alert('Tag Name:"' + $(this).prop("tagName") + '".'); }); }; Ví dụ sau minh họa cách sử dụng phương thức warning(). Giả sử chúng ta đặtjquery.debug.js trong cùng một thư mục với trang HTML. The jQuery Example <script type="text/javascript" src=""> $(document).ready(function() { $("div").warning(); $("p").warning(); }); This is paragraph This is division Nó sẽ cảnh báo bạn như sau: Tag Name:"DIV" Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 92 Tag Name:"P" Tài liệu tham khảo về jQuery Dưới đây là các nguồn tài liệu hữu ích về jQuery, bạn nên sử dụng chúng để hiểu sâu hơn những chủ đề chúng tôi đã đề cập trong loạt bài này. Các đường link hữu ích về jQuery  Tutorialspoint − Loạt bài hướng dẫn của chúng tôi xây dựng dựa trên nguồn này.  jQuery Official Site - Nguồn chính của bạn về các phiên bản jQuery mới nhất, các plug-in, các hướng dẫn, tin tức và blog,  jQuery Documentation - Link này sẽ đưa bạn tới trang jQuery Documentation bao gồm văn kiện đầy đủ về jQuery.  jQuery User Interface - Tạo các UI (User Interface) cho trang web của bạn bởi sử dụng jQuery UI.  jQuery Plug-ins - Kho lưu jQuery Plug-ins  jQuery @ wiki - Trang jQuery tại Wikipedia.  ECMAScript - Trang web chính thức về ECMAScript. Các JavaScript Framework khác  Prototype - Trang này chứa văn kiện API, đầy đủ với các ví dụ và tham chiếu chéo. Bạn sẽ cũng tìm thấy các hướng dẫn đa dạng và làm quen với các thành viên Prototype Core.  script.aculo.us - Một tập hợp đầy đủ văn kiện API tham khảo, Installation Scripts  DoJo - Một tập hợp đầy đủ văn kiện API tham khảo, Installation Scripts  Ext JS - Một tập hợp đầy đủ văn kiện API tham khảo, Installation Scripts  Rico - Một tập hợp đầy đủ văn kiện API tham khảo, Installation Scripts  Qooxdoo - qooxdoo là một AJAX Application Framework toàn diện và mới mẻ. Copyright © vietjack.com Trang chia sẻ các bài học online miễn phí Trang 93