Các phương thức lọc và điều hướng (Traversing)

jQuery cung cấp bộ công cụ mạnh mẽ để tìm kiếm và di chuyển giữa các phần tử trong cây DOM dựa trên mối quan hệ giữa chúng.

1. Tìm kiếm các phần tử lân cận

// Di chuyển đến phần tử kế tiếp
$(".item-start").next(); 
$(".item-start").nextAll();
$(".item-start").nextUntil(".item-end");

// Di chuyển ngược lại phần tử phía trước
$(".item-start").prev();
$(".item-start").prevAll();
$(".item-start").prevUntil(".item-end");

2. Tìm kiếm phần tử cha và con

// Truy xuất phần tử cha
$("#child-node").parent(); 
$("#child-node").parents(); // Tìm tất cả tổ tiên
$("#child-node").parentsUntil("#wrapper"); // Tìm tổ tiên đến một điểm dừng nhất định

// Truy xuất phần tử con và anh em
$("#container").children(); // Chỉ các con trực tiếp
$("#container").siblings(); // Các phần tử cùng cấp

3. Tìm kiếm và Lọc (Find & Filter)

// .find(): Tìm kiếm hậu duệ bên trong
$(".wrapper").find("span"); // Tương đương: $(".wrapper span")

// .filter(): Lọc lại từ danh sách hiện tại
$("div").filter(".active"); // Chọn các div có class 'active'. Tương đương: $("div.active")

// Các phương thức bổ trợ
$("li").first(); // Phần tử đầu tiên
$("li").last();  // Phần tử cuối cùng
$("li").not(".disabled"); // Loại bỏ các phần tử có class 'disabled'
$("li").has("a"); // Chỉ giữ lại các li có chứa thẻ a bên trong
$("li").eq(2); // Chọn phần tử tại chỉ mục (index) số 2

Thao tác thuộc tính và nội dung thẻ

1. Quản lý Class và Style

// Thao tác Class
$element.addClass("new-style");
$element.removeClass("old-style");
if ($element.hasClass("active")) { /* ... */ }
$element.toggleClass("highlight");

// Thao tác CSS trực tiếp
$("#header").css("background-color", "#f0f0f0");
$("#header").css({"color": "red", "font-size": "18px"});

2. Xử lý kích thước và vị trí

// Lấy tọa độ so với tài liệu và phần tử cha
const offsetPos = $(".box").offset(); // {top, left}
const parentPos = $(".box").position();

// Xử lý thanh cuộn
$(window).scroll(function () {
    if ($(this).scrollTop() > 500) {
        console.log("Đã cuộn quá 500px");
    }
});

3. Thao tác nội dung và giá trị

// Lấy và gán HTML/Text
let content = $("#main").html();
$("#main").text("Nội dung mới");

// Thao tác với Form (Input, Select, Checkbox)
let username = $("#user-input").val();
$("#user-input").val("Admin");

// Thiết lập giá trị cho nhiều checkbox/select
$("#multi-select").val(["value1", "value2"]);

4. Thuộc tính (Attribute) và Đặc tính (Property)

Cần phân biệt rõ giữa attr() (xử lý thuộc tính trên HTML tag) và prop() (xử lý trạng thái của DOM object).

// Sử dụng attr cho các thuộc tính tùy chỉnh hoặc tĩnh
$("img").attr("src", "logo.png");

// Sử dụng prop cho các trạng thái như checked, disabled, selected
let isChecked = $("input[type='checkbox']").prop("checked");
$("input[type='checkbox']").prop("checked", true);

Xử lý sự kiện (Events)

1. Đăng ký sự kiện

// Cách 1: Sử dụng phương thức viết tắt
$(".btn-submit").click(function() {
    alert("Clicked!");
});

// Cách 2: Sử dụng .on() (Khuyên dùng)
$(".btn-submit").on("click", function() {
    console.log("Action performed");
});

2. Ngăn chặn hành vi mặc định và nổi bọt sự kiện

// Ngăn chặn form submit hoặc link chuyển trang
$("#form-test").on("submit", function(e) {
    e.preventDefault(); // Cách chính thống
    // Hoặc return false; (Ngăn cả nổi bọt và hành vi mặc định)
});

// Ngăn chặn sự kiện nổi bọt lên phần tử cha
$(".child").on("click", function(e) {
    e.stopPropagation();
    alert("Chỉ kích hoạt tại con");
});

3. Ủy thác sự kiện (Event Delegation)

Dùng để gắn sự kiện cho các phần tử được tạo ra động sau khi trang đã tải xong.

// Gắn sự kiện vào cha để quản lý các con (li) sinh sau
$(".dynamic-list").on("click", "li", function() {
    $(this).css("color", "blue");
});

Hiệu ứng Animation cơ bản

$el.show(300); $el.hide(300); $el.toggle(); // Hiện/Ẩn
$el.fadeIn(); $el.fadeOut(); $el.fadeToggle(); // Mờ dần
$el.slideDown(); $el.slideUp(); $el.slideToggle(); // Trượt

Framework Bootstrap

Bootstrap là một framework CSS giúp xây dựng giao diện nhanh chóng dựa trên hệ thống Grid và các thành phần dựng sẵn.

1. Hệ thống Grid (Layout)

Bootstrap chia chiều rộng màn hình thành 12 cột. Sử dụng các class .container hoặc .container-fluid để bao bọc.

<div class="container">
    <div class="row">
        <div class="col-md-8 col-sm-12">Nội dung chính (8 cột trên Desktop, 12 cột trên Tablet)</div>
        <div class="col-md-4 col-sm-12">Sidebar (4 cột)</div>
    </div>
</div>

2. Các thành phần thông dụng

• Bảng (Tables): Sử dụng class="table table-striped table-hover".
• Form: Thêm class .form-control cho các thẻ input để có giao diện đồng nhất.
• Nút (Buttons): Các lớp màu sắc .btn-primary, .btn-success, .btn-danger, .btn-warning.
• Tiện ích: .pull-left (trôi trái), .pull-right (trôi phải), .center-block (căn giữa).

3. Biểu tượng (Icons)

Bootstrap 3 tích hợp Glyphicons. Với các phiên bản mới hơn, thường kết hợp với FontAwesome để đa dạng biểu tượng.

<span class="glyphicon glyphicon-search"></span> Tìm kiếm