Thực ra bạn không cần jQuery

2510

Không cần jQuery, bạn có thể dùng javascript thuần để thực hiện những thao tác trước đây bạn nghĩ phải có jQuery cơ.

Hiện giờ chúng ta đã làm việc nhiều với các framework hại điện hơn nhiều so với jQuery, nên rất ít chi đụng tới DOM thật, không còn ngày tháng xào trộn HTML bằng jQuery, chúng ta chỉ định nghĩa khi nào render, render cái gì. Tuy nhiên, kỹ năng sờ mó vào DOM là cần thiết cho mọi lập trình viên FE. Bây giờ muốn sờ vào DOM chúng ta cần nắm cách dùng javascript thuần.

Chọn element

document.querySelector(‘.vuilaptrinh’)

Nó trả về một HTMLElement object đầu tiên thỏa điều kiện CSS Selector, cái .vuilaptrinh này gọi là CSS Selector.

Nói là đầu tiên vì nếu có dăm ba cái .vuilaptrinh nó cũng chỉ trả về thằng đầu tiên

document.querySelectorAll(‘.vuilaptrinh’)

Nó sẽ trả về một danh sách các element thỏa điều kiện CSS selector, ví dụ 3 thằng .vuilaptrinh ở trên đều được chọn.

Chạy function trên các element đã chọn

“Sờ” được các element này rồi, thì chúng ta sẽ muốn làm tiếp cái gì đó, chứ không chỉ sờ cho vui, chúng ta phải loop qua toàn bộ element đã sờ được bằng vòng lặp .forEach

Tìm element con bên trong element cha đã chọn

Chúng ta gọi lại .querySelector trên element cha thôi

Di chuyển qua các element kề cận

Hồi nhỏ học tiếng anh, cô dạy “brother”, “sister” là anh chị em, lớn lên xem Youtube mới biết, tụi nước ngoài nó dùng từ sibling để nói anh chị em, chứ ít khi dùng brother, sister. Javascript bê luôn nguyên chữ này vào để xài

Gắn sự kiện

addEventListener


Dispatch event

Nếu cần bún ra một sự kiện bằng javascript một cách chủ động, ko đợi sự kiện tự xảy ra

dispatchEvent


Styling cho element

Cái này cần tra cứu và học một số thuộc tính hay xài, nguyên tắc chung là viết thuộc tính css theo kiểu camelCase

Ẩn hiện element

style.display

Trỏ đến thuộc tính style, thay đổi giá trị display thành none hoặc block

Document ready

Một trong những tình huống hay gặp là chúng ta cần chạy một đoạn javascript sau khi HTML đã render xong

DOMContentLoaded

Làm việc với class

classList

Thông qua classList chúng ta có thể thêm-xóa-toggle một class

Để kiểm tra element có class nào đó không

classList.contains

Ví dụ, kiểm tra xem element là .box có chứa class là active không

Network request

fetch

Mình có bài chi tiết về API này rồi, các bạn đọc lại Giới thiệu fetch() của javascript

Tạo element

Tạo thẻ <div /> với nội dung là <div>text</div>, rồi chèn nó vào <div class='box' />

TopDev via Vuilaptrinh

SHARE