Tiện ích của jQuery
- jQuery chọn và xử lý các phần tử trong trang HTML.
- jQuery ưu tiên cho việc thực thi nhất quán trên các trình duyệt khác nhau.
Properties (các thuộc tính), utilities (các hàm tiện ích), và methods (các phương thức)
Để truy cập các thuộc tính, phương thức, hàm trong thư viện jQuery, chúng ta dùng thuộc tính jQuery hay viết tắt của nó là $.
Các hàm tiện ích là các hàm phổ biến hay hay sử dụng nhất trong thư viện jQuery. Chúng ta có thể xem jQuery như một namespace để truy cập đến các hàm này. Ví dụ hàm trim dùng để xoá các khoảng trắng ở đầu và cuối của một chuỗi, gọi hàm này như sau:
var trimmed = $.trim(someString);
Các phương thức trong jQuery sẽ hợp lệ khi chúng ta gọi hàm jQuery().
Đối tượng jQuery
Để học jQuery, hàm đầu tiên chúng ta cần quan tâm là jQuery(). Hàm này chọn các phần tử (selector) trong trang HTML. Hàm này có hai đối số là selector và context (ngữ cảnh chứa selector) – dùng để hạn chế phạm vi tìm kiếm selector của jQuery. Ví dụ tìm tất cả các phần tử p trong trang sẽ như sau:
var paragraphs = jQuery('p');
với đoạn mã trên, jQuery sẽ tìm kiếm tất cả các phần tử p trong cây DOM, bắt đầu từ gốc. Nếu cây DOM lớn sẽ làm tốc độ xử lí chậm. Khắc phục điều này, chúng ta dùng context. Ở ví dụ trên, thay vì tìm tất cả p, chúng ta hạn chế việc tìm p trong phần tử div. Lệnh được viết lại:
var paragraphs = jQuery('p', 'div');
Các phương thức, hầu hết, trong jQuery đều tuân theo kĩ thuật dây chuyền – một kĩ thuật lập trình cho phép viết các phương thức trong một lệnh, ví dụ cách viết sau :
var obj = new Obj(); obj.method_1(); obj.method_2(); obj.method_3();
tương đương với
var obj = new Obj(); obj.method_1().method_2().method_3();
Hàm jQuery trả về một đối tượng JavaScript chứa một tập các phần tử DOM thoả mãn selector , theo thứ tự được định nghĩa trong trang. Chúng ta có thể dùng jQuery collection, jQuery set, jQuery object để tham chiếu đến đối tượng trả về của hàm jQuery (sẽ tìm hiểu kĩ ở các chương sau).
ready()
Khi áp dụng nguyên tắc unobtrusive JavaScript, chúng ta cần chờ trang tải đầy đủ cây DOM trước khi thực hiện các thao tác xử lý với các phần tử trong trang. Ban đầu, trình sự kiện onload của đối tượng window được sử dụng cho mục đích này, cú pháp:
window.onload = function() {
// viết code ở đây
};
Nhưng, với onload, trình duyệt không chỉ phải chờ toàn bộ cây DOM được tải đầy đủ, mà phải chờ những tài nguyên khác được nhúng vào trang web như hình ảnh, video, v.v… được tải đầy đủ. Điều này làm chậm tốc độ xử lí trang và những chức năng tương tác khác.
Để khắc phục hạn chế của onload, jQuery cung cấp một cách thức sẽ xử lý các phần tử trong trang ngay khi cây DOM được tải đầy đủ mà không cần chờ các tài nguyên khác. Đó là cách thức sử dụng trình sự kiện ready của đối tượng document theo cú pháp sau:
jQuery(document).ready(function() {
// viết code ở đây...
});
Tương đương
$(document).ready(function() {
// viết code ở đây...
});
Hay cũng có thể viết
jQuery(function() {
// viết code ở đây...
});
Cơ chế làm việc của trình duyệt có thể mô tả như hình sau:
Chúng ta sử dụng ready chỉ khi đặt script trong <head>; nếu đặt script ngay trước </body> thì không cần dùng ready. Xem hai ví dụ:
Đặt script trong <head>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
Đặt trước </body>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$("p").click(function(){
$(this).hide();
});
</script>
</body>
</html>
Trần Ngọc Minh Notes 
Ý kiến bài viết