Cú Pháp Cơ Bản

Đối Tượng jQuery

Thư viện jQuery cung cấp cho chúng ta đối tượng jQuery và chúng ta sẽ làm việc chủ yếu với đối tượng này. Trong phần lớn các trường hợp bạn sẽ sử dụng đối tượng jQuery để lựa chọn phần tử HTML và sau đó thêm hành động cho chúng:

$(selector).action()

Ở ví dụ trên:

• $: Chính là đối tượng jQuery, bạn cũng có thể sử dụng jQuery thay cho $.
• $(selector): Dùng để lựa chọn phần tử HTML. Selector (hay bộ chọn) có thể là giá trị id hoặc giá trị lớp (class) CSS của phần tử HTML. Bạn sẽ tìm hiểu về bộ chọn ở các bài học tiếp theo.
• action: Tên phương thức của đối tượng jQuery, ví dụ như hide() dùng để ẩn phần tử.

Dưới đây là một ví dụ sử dụng Object này để lựa chọn phần tử h1 trên trang:

setTimeout(function () {
   $("p").text("Changed!");
}, 2000);

Sự Kiện $(document).ready()

Khi sử dụng thư viện jQuery chúng ta nên đặt mã lệnh trong $(document).ready() để đảm bảo mã lệnh được thực thi sau khi trình duyệt đã hoàn tất việc tải về toàn bộ nội dung trang HTML (mã lệnh HTML). Điều này giúp tránh được trường hợp mã lệnh jQuery tương tác với phần tử của trang HTML trước khi phần tử này tồn tại.

$( document ).ready(function() {
    // mã lệnh cần thực thi sau khi trang HTML được tải xong
});

Ở ví dụ dưới đây chúng ta sẽ thay đổi chiều dài của ảnh ngay khi trình duyệt kết thúc việt tải mã HTML của trang:

$( document ).ready(function() {
    $("img").height("100px");
});

Bạn cũng có thể sử dụng cú pháp ngắn gọn hơn như sau:

$(function () {
    // mã lệnh cần thực thi
});

Phân biệt $(document).ready() và window.onload()

Trong JavaScript chúng ta sử dụng window.onload() khi muốn thực hiện mã lệnh sau khi toàn bộ trang (bao gồm mã lệnh HTML, các tệp hình ảnh, CSS, JavaScript đính kèm trong trang) đã được tải xong.

window.onload = function() {
 // mã lệnh cần thực thi
};

Nếu sử dụng thư viện jQuery thì đoạn câu lệnh trên có thể được viết lại cú pháp sau:

$(window).on("load", function() {
 // mã lệnh cần thực thi
});

Khác với window.onload(), sử dụng $(document).ready() chỉ đảm bảo mã lệnh JavaScript được thực thi sau khi trình duyệt tải xong mã HTML (mặc dù có thể các tệp hình ảnh hay tệp CSS và JavaScript đính kèm khác vẫn chưa được tải xong).

Bây giờ vẫn ví dụ trước nhưng chúng ta sử dụng $(window).on("load") thay vì $docuement.ready().

Trước tiên chúng ta đặt chiều cao của ảnh là 50px sử dụng $document.ready().

$(document).ready(function () {
    $("img").height("50px");
});

Và tiếp theo có đoạn mã jQuery để tăng chiều cao ảnh lên 100px như sau:

$(window).on("load", function() {
    $("img").height("100px");
});

Khi chạy đoạn mã trên bạn sẽ thấy lúc đầu ảnh có chiều cao là 50px nhưng sau khi ảnh được tải xong chiều cao của nó sẽ được tăng lên là 100px.