Selector - Chọn phần tử trong jQuery

Selector - Chọn phần tử trong jQuery

Selector chọn phần tử là chức năng quan trong của jQuery, như bạn thấy Selector bắt đầu bằng ký tự $. Selector cho phép bạn chọn phần tử HTML và tương tác với phần tử, Selector tìm kiếm và lựa chọn phần tử dựa trên id, class, thẻ, thuộc tính phần tử, giá trị phần tử và cả nội dung trong phần tử.

Lựa chọn theo tên thẻ phần tử

Các phần tử HTML như đã biết thuộc một trong các thẻ như : <p> <h1> <span> ..., các tên thẻ này được jQuery dùng để lựa chọn phần tử.

Giả sử chọn tất cả các phần tử thẻ <p> trên trang thì viết như sau:

$("p")

Ví dụ: khi bấm vào một nút <button> tất cả các phần tử thẻ <p> bị ẩn đi

$(document).ready(
    function () {

        //Chọn các phần tử button và gán sự kiện click cho nó
        $("button").click(function () {

            //Chọn các phần tử p và thi hành ẩn các phần tử đó
            $("p").hide();

        });
    }
);

Lựa chọn theo id phần tử

Một phần tử HTML có id thì có thể chọn bằng bằng ký hiệu #id trong Selector. Ví dụ phần tử có id là 'test' thì chọn nó như sau

$("#test")

Ví dụ: khi bấm vào một nút <button> phần tử có id là test bị ẩn đi bị ẩn đi

$(document).ready(
    function () {

        //Chọn các phần tử button và gán sự kiện click cho nó
        $("button").click(function () {

            //Chọn phần tử có id là test và thi hành ẩn các phần tử đó
            $("#test").hide();

        });
    }
);

Lựa chọn theo class

Tương tự như chọn theo id, một phần tử có class là test thì chọn nó như sau

$(".test")

Bạn nhận thấy, cách chọn phần tử trong jQuery giống với cách chọn phần tử của CSS

Các Selector hữu ích hay dùng trong jQuery

Cơ bản thì Selector jQuery giống với Selector CSS, bảng dưới đây là các trường hợp có thể bạn dùng tới