Phần tử bao gồm thẻ đóng, thẻ mở và toàn bộ nội nằm bên trong 2 thẻ này. Đối với các thẻ tự đóng phần tử HTML được gọi là phần tử trống.

Các thẻ đề mục (còn gọi là thẻ heading) dùng để đánh dấu các đề mục của trang web. Trong HTML chúng ta có các thẻ đề mục từ <h1> cho tới <h6>.

Trong phần này chúng ta sẽ tìm hiểu cách tạo ra một số hiệu ứng phổ biến sử dụng thư viện jQuery.

hide()

Phương thức hide() được sử dụng để ẩn phần tử bằng cách gán giá trị cho thuộc tính CSS display: none; cho phần tử.

$("button").click(function(){
    $("p").hide();
});

Mở editor

Bạn cũng có thể quy định việc ẩn phần tử diễn ra trong bao lâu bằng việc thêm một đối số khi gọi phương thức. Ở ví dụ dưới việc ẩn phần tử sẽ được diễn ra trong vòng 1.5 giây (1500 minisecond = 1.5 giây).

$("button").click...

Sử dụng jQuery cho phép bạn lựa chọn phần tử HTML một cách dễ dàng thông qua Bộ Chọn (tên tiếng Anh là selector). Có rất nhiều bộ chọn khác nhau trong jQuery như bộ chọn phần tử, bộ chọn id, bộ chọn class...

Bộ Chọn Phần Tử

Bộ chọn phần tử lựa chọn phần tử HTML dựa theo tên của phần tử trong trang HTML mà bạn muốn lựa chọn. Ở ví dụ dưới đây dùng để lựa chọn phần tử button và phần tử p:

$("button").click(function () {
    $("p").css("color", "#4CAF50");
});

Mở editor

Bộ Chọn ID

Sử dụng bộ chọn ID dùng...

Để nhúng thư viện jQuery vào trong trang HTML bạn có thể sử dụng một trong hai cách sau:

Sử Dụng CDN

Với cách nhúng này chúng ta sẽ không phải tải file jQuery về máy mà sẽ sử dụng file jQuery có sẵn trên một máy chủ CDN. Máy chủ CDN (viết tắt của Content Delivery Network) dùng để phục vụ việc chia sẻ các file trên internet và thường được tài trợ bởi các công ty công nghệ nổi tiếng như Google, Microsoft...

Trong đoạn mã dưới đây đây chúng ta sẽ sử dụng CDN của Google:

<script src="http://ajax.goo...

Phương Thức .each()

Khi sử dụng bộ chọn lớp hoặc phần tử thông thường bạn sẽ nhận được nhiều hơn một phần tử trả về. Thư viện jQuery cho phép bạn lặp giữa các phần tử này một cách dễ dàng nhờ sử dụng phương thức each().

Ở ví dụ dưới đây chúng ta sử dụng bộ chọn phần tử $("p") và sau đó lặp qua từng phần tử trả về sử dụng phương thức each(). và cập nhật nội dung văn bản bên trong mỗi phần tử dựa trên vị trí của chúng trong mảng trả về:

var para= $("p");
para.each(function (index) {
    var text =...

Trong HTML hình ảnh được đánh dấu nhờ sử dụng thẻ <img>. Thẻ này có 1 thuộc tính bắt buộc là src, ngoài ra còn có các thuộc tính khác như alt hoặc title.