Những tính năng mới trong JQuery 3.0 và cách sử dụng
JQuery là thư viện Javascript phổ biến nhất trên thế giới. Kể từ khi ra đời vào năm 2006 cho đến nay, JQuery đã trở thành một thư viện không thể thiếu trong bất kỳ một ứng dụng web nào. Đồng thời sử dụng JQuery cũng là một kiến thức cơ bản đối với đa số web developer. Vào tháng 7 năm 2015, JQuery ...
JQuery là thư viện Javascript phổ biến nhất trên thế giới. Kể từ khi ra đời vào năm 2006 cho đến nay, JQuery đã trở thành một thư viện không thể thiếu trong bất kỳ một ứng dụng web nào. Đồng thời sử dụng JQuery cũng là một kiến thức cơ bản đối với đa số web developer.
Vào tháng 7 năm 2015, JQuery đã thông báo phát hành bản alpha đầu tiên cho JQuery 3.0 - một bản nâng cấp mới sau một thời gian dài. Trong bài viết này, chúng ta sẽ cùng tìm hiểu cách sử dụng một số tính năng mới của JQuery 3.0.
Trong bản JQuery hiện tại, khi ta gọi hàm hide() thì một style display: none sẽ được thêm vào thẻ muốn mà chúng ta muốn ẩn. Ngược lại, khi gọi hàm show() thì thuộc tính này sẽ được xóa đi. Tuy nhiên điều này dẫn đến một vài rắc rối. Ví dụ:
- Nếu chúng ta cài đặt ban đầu là display:inline trong stylesheet thì khi sử dụng hàm show() sẽ bị chuyển thành display:block. Điều này trong một số trường hợp có thể làm hỏng stylesheet của trang web.
- Đặc biệt khi ta sử dụng media queries cho responsive web design, chúng ta có thể thay đổi hiển thị của một thẻ thông qua display hoặc visibility. Điều đó có thẻ bị ảnh hưởng bởi hàm show() hide().
Để khắc phục những nhược điểm trên mà không ảnh hưởng đến hiệu năng thì trong phiên bản mới, nếu bạn đã set display:none trong stylesheet thì các hàm show(), slideDown(), fadeIn() sẽ không hoạt động. Thay vào đó nên sử dụng addClass() và removeClass(). Ví dụ:
<!DOCTYPE HTML> <html> <head> <style> .invisible{ display: none; } .visible{ background-color: deepskyblue; display:block; } </style> <script src="jquery-3.0.0-alpha1.js"></script> <script> $(document).ready(function(){ $("#div1").addClass("invisible"); $("#toggle").click(function(){ $("#div1").removeClass("visible"); $("#div1").addClass("invisible"); }); }); </script> <title>Control Visibility</title> </head> <body> <p>Hello!</p> <div id="div1">Can you see this?</div> <button id="toggle">Click me</button> </body> </html>
Trong bản JQuery 2.1.4, nếu trong thẻ HTML có thuộc tính data-* mà trong dấu * có chứa số và tên qua dài thì khi gọi hàm .data() sẽ lấy sai giá trị của thuộc tính đó. Ví dụ:
Tuy nhiên, vấn đề trên đã được khắc phục trong phiên bản mới này:
Hàm data() sẽ tự hiểu tên thuộc tính thành foo-42name thay vì foo-42-name
Giá trị của các hàm awidth() và hieght() sẽ trả về kiểu decimal Trong bản 3.0, JQuery đã hỗ trợ trả về kiểu decimal đối với các hàm awidth(), height(), .css("awidth"), và .css("height")
Các phương thức .load(), .unload(), và .error() đã bị xóa Trong JQuery 3.0, sẽ không còn các phương thức trên. Chúng ta chỉ nên dùng phương thức on(). Ví dụ:
<img src="space-needle.png" alt="Space Needle" id="spacen">
$( "#spacen" ).on( "load", function() { // Handler implementation });
node of là một phương thức hoàn toàm mới được cung cấp trong phiên bản mới này. Nó có tác dụng lấy ra một jquery objects có kiểu Iterable trong một tập hợp như mảng. Ví dụ:
for ( node of $( "<div id=spacen>" ) ) { console.log( node.id ); // Returns ‘spacen’ }
Đây là phương thức có tác dụng xóa bỏ thẻ cha của một selector
Ngoài ra, JQuery còn có các cải thiện hiệu năng cho việc sử dụng animation, phương thức :visible, :checked... và việc kiểm soát lỗi khi runtime
Với những cải tiến trong phiên bản mới, JQuery hứa hẹn sẽ tiếp tục phát triên và đem đến ngày càng nhiều tiện ích cho web developer.
Tham khảo: http://www.sitepoint.com/whats-new-jquery-use/
