Chào các bạn,
Người ta thường bảo “Hãy yêu lập trình viên bởi họ rất chung tình”, nhưng đấy là trong cuộc sống tình trường mà thôi!
Đối với mình, một lập trình viên phải mang tiếng “gã trai tồi đào hoa” trong chính công việc của mình. Ta không thể cứ yêu mãi một cách code, một framework, một thư viện, một design pattern… và ở đâu cũng muốn gắn bản thân với chúng được. Thậm chí đôi khi, ta cần phải có một cái đầu lạnh để thay đổi liên tục cách ta thực hiện công việc của mình nhằm có thể đạt được sự “viên mãn” và đưa mọi thứ “lên đỉnh” theo cách tinh tế, thông minh nhất…
Quay lại với tựa đề bài viết, mình tin Jquery vẫn là một thư viện tốt và hữu dụng trong thực tế. Song, với sự phát triển nhanh chóng của các trình duyệt hiện đại đang dần hỗ trợ mạnh mẽ ES6, cùng với đó là tốc độ phát triển vô cùng nhanh của Javascript, Jquery dần để lộ ra nhiều yếu điểm của chính nó: xa rời với các frameworks React – Vue – Angular, đi sau so với tốc độ phát triển của Javascript, mất công cài đặt thêm trong các dự án, xuất hiện nhiều lỗi,… Mình cá là sẽ có nhiều bạn đồng tình với mình về vụ này, bạn có thể tìm kiếm thử trên Stackoverflow, kết quả ta nhận được về các vấn đề liên quan tới Jquery lên tới trên con số 1 triệu.
Liệu mình đã lay động được trái tim của các bạn để bỏ Jquery và tiến tới Javascript thuần chưa nhỉ? Nếu bạn vẫn e ngại không biết nên “chia tay” Jquery, và “tán đổ” cô nàng Javascipt như nào thật nhanh – Fuckboi chính hiệu – thì hãy cùng mình xem qua các tình huống dưới đây nhé.
1. Lựa chọn các thành phần
Đây chắc hẳn là công việc cơ bản và quan trọng nhất trong Jquery khi ta cần thao tác với DOM. Tương đương với $()
hay jQuery()
chính là 2 hàm querySelector()
và querySelectorAll()
. Ta có thể dễ dàng code như sau nha:
1 2 3 4 5 6 7 8 9 | <span class="token comment">// jQuery, chọn toàn bộ dối tượng '.box'</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".box"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Thay vào đó, chọn đối tượng '.box' đầu tiên</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".box"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ... hoặc chọn toàn bộ đối tượng '.box'</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">".box"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
2. Thực hiện chức năng trên toàn bộ thành phần được chọn
querySelectorAll()
trả cho chúng ta một mảng các NodeList. Khác với jQuery ta chỉ cần đơn giản gọi hàm qua đối tượng jQuery, với Javascript ta sẽ cần phải duyệt qua toàn bộ mảng NodeList được lấy ra với NodeList.foreach(). Thôi không sao, “tán gái” cũng có lúc khó mà
1 2 3 4 5 6 7 8 | <span class="token comment">// Với jQuery</span> <span class="token comment">// Ẩn toàn bộ đối tượng '.box'</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".box"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Với Javascript</span> <span class="token comment">// Duyệt qua từng thằng '.box' và gán thuộc tính cho nó để ẩn nó đi</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">".box"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">box</span> <span class="token operator">=></span> <span class="token punctuation">{</span> box<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">"none"</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> |
3. Tìm một thành phần bên trong thành phần khác
jQuery cung cấp cho chúng ta hàm find()
để có thể tìm kiếm thành phần nào đó bên trong 1 thằng khác. Cá nhân mình với tình huống này thì mình thích Javascript hơn, vì đơn giản là ta vẫn sử dụng lại hàm querySelector()
và querySelectorAll()
để thực hiện lấy ra thành phần ta muốn.
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token comment">// Với jQuery</span> <span class="token comment">// Lấy ra thằng '.box' đầu tiên trong '.container'</span> <span class="token keyword">var</span> container <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".container"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ...ta sẽ cần làm như này tiếp</span> container<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">".box"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Với Javascript</span> <span class="token comment">// Lấy ra thằng '.box' đầu tiên trong '.container'</span> <span class="token keyword">var</span> container <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".container"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ...ta cũng sẽ cần làm như này tiếp</span> container<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".box"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
4. Duyệt cây DOM với một số tình huống thông dụng
Sẽ có nhiều khi bạn cần nhanh chóng duyệt được thành phần trước, kế tiếp hoặc cha của một thành phần có sẵn. jQuery có các hàm quen thuộc là parent()
, next()
và prev()
. Chẳng hề kém cạnh, Javascript cũng cho chúng ta trực tiếp 3 thuộc tính của 1 thành phần, đó là parentElement
, nextElementSibling
và previousElementSibling
. Xời, tưởng gì
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token comment">// Với jQuery</span> <span class="token comment">// Trả về thành phần kế tiếp, trước đó và cha của '.box'</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".box"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".box"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">prev</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".box"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">parent</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Với Javascript</span> <span class="token comment">// Trả về thành phần kế tiếp, trước đó và cha của '.box'</span> <span class="token keyword">var</span> box <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".box"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> box<span class="token punctuation">.</span>nextElementSibling<span class="token punctuation">;</span> box<span class="token punctuation">.</span>previousElementSibling<span class="token punctuation">;</span> box<span class="token punctuation">.</span>parentElement<span class="token punctuation">;</span> |
5. Làm việc với các sự kiện
jQuery có cả tá các hàm để đính một sự kiện cụ thể vào thành phần của chúng ta. Còn với JS, hãy xem sức mạnh của hàm addEventListener()
nhé:
1 2 3 4 5 6 7 8 9 10 | <span class="token comment">// Với jQuery</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".button"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">/* xử lý sự kiện 'click' */</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".button"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">mouseenter</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">/* xử lý sự kiện 'mouseenter' */</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">keyup</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">/* xử lý sự kiện 'keyup' */</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Với Javascript</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".button"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">/* ... */</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".button"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"mouseenter"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">/* ... */</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"keyup"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">/* ... */</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
6. Thêm sự kiện cần lắng nghe vào thành phần
Hàm on()
trong jQuery là cách ta thêm các sự kiện động vào thành phần của mình, một lần với tình huống này, ta sẽ lại gặp hàm addEventListener()
quen thuộc của “cô nàng” Javascript.
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token comment">// Với jQuery</span> <span class="token comment">// Xử lý sự kiện 'click' của '.search-result elements', </span> <span class="token comment">// ngay cả khi chúng được thêm động vào cây DOM</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".search-container"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token string">".search-result"</span><span class="token punctuation">,</span> handleClick<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Với Javascript</span> <span class="token comment">// Tạo một thành phần mới và thêm vào cây DOM</span> <span class="token keyword">var</span> searchElement <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"div"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".search-container"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>searchElement<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Thêm sự kiện vào trong thành phần mới đó</span> searchElement<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> handleClick<span class="token punctuation">)</span><span class="token punctuation">;</span> |
7. Kích hoạt hoặc khởi chạy sự kiện
Tương đương với hàm trigger
của jQuery và hàm dispatchEvent()
từ phía JS, hàm này có thể được gọi ở bất cứ thành phần nào và sẽ nhận đầu vào là một đối tượng Event
. Vụ này có vẻ hơi “căng” à nha
1 2 3 4 5 6 7 8 9 10 | <span class="token comment">// Với jQuery</span> <span class="token comment">// Khởi chạy 'myEvent' cho đối tượng document và '.box'</span> <span class="token function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">trigger</span><span class="token punctuation">(</span><span class="token string">"myEvent"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".box"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">trigger</span><span class="token punctuation">(</span><span class="token string">"myEvent"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Với Javascript</span> <span class="token comment">// Tạo và kích hoạt sự kiện 'myEvent'</span> document<span class="token punctuation">.</span><span class="token function">dispatchEvent</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Event</span><span class="token punctuation">(</span><span class="token string">"myEvent"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".box"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">dispatchEvent</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Event</span><span class="token punctuation">(</span><span class="token string">"myEvent"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
8. Styling cho thành phần
Mình đã thử tìm từ “styling” trong tiếng Việt và thấy nó thật củ chuối…
Để style thành phần, tương tự với hàm css
trong jQuery là thuộc tính .style
trong JS
1 2 3 4 5 6 7 8 | <span class="token comment">// Với jQuery</span> <span class="token comment">// Chọn tất cả '.box' và chuyển màu chữ sang #000</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".box"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">"color"</span><span class="token punctuation">,</span> <span class="token string">"#000"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Với Javascript</span> <span class="token comment">// Chọn '.box' đầu tiên và chuyển màu chữ sang #000</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".box"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>color <span class="token operator">=</span> <span class="token string">"#000"</span><span class="token punctuation">;</span> |
Ngoài ra, đối với hàm css()
ta có thể truyền một đối tượng chứa các thuộc tính cần style. Trong khi đó để thực hiện style nhiều thuộc tính trong Javascript, ta cần thay đổi từng thuộc tính còn của .style
trong thành phần đó.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token comment">// Với jQuery</span> <span class="token comment">// Truyền nhiều styles</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".box"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token string">"color"</span><span class="token operator">:</span> <span class="token string">"#000"</span><span class="token punctuation">,</span> <span class="token string">"background-color"</span><span class="token operator">:</span> <span class="token string">"red"</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// với Javascript</span> <span class="token comment">// Đổi màu chữ sang #000 và màu nền thành đỏ</span> <span class="token keyword">var</span> box <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".box"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> box<span class="token punctuation">.</span>style<span class="token punctuation">.</span>color <span class="token operator">=</span> <span class="token string">"#000"</span><span class="token punctuation">;</span> box<span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> <span class="token string">"red"</span><span class="token punctuation">;</span> <span class="token comment">// Hoặc ta cũng có thể style nhiều thuộc tính bằng cách sau</span> box<span class="token punctuation">.</span>style<span class="token punctuation">.</span>cssText <span class="token operator">=</span> <span class="token string">"color: #000; background-color: red"</span><span class="token punctuation">;</span> |
9. Sự kiện Document ready
Có rất nhiều khi ta cần thực thi sự kiện khi toàn bộ trang/DOM đã được tải xong, đối với jQuery ta đơn giản sử dụng hàm $(document).ready()
hoặc ta có thể ngắn gọn hơn với đối tượng $()
. Đối với Javascript, ta sẽ cần một chút công sức để viết ra một hàm thực thi việc này, cơ mà không sao, chỉ là một chút khó khăn nữa khi “tán gái” thui đúng không anh em
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token comment">// Với jQuery</span> <span class="token function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">ready</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">/* Làm gì đó khi DOM đã được tải hết */</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Với Javascript</span> <span class="token comment">// Định nghĩa một phương thức tiện ích để thực hiện</span> <span class="token keyword">var</span> <span class="token function-variable function">ready</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">callback</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span>readyState <span class="token operator">!=</span> <span class="token string">"loading"</span><span class="token punctuation">)</span> <span class="token function">callback</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">else</span> document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"DOMContentLoaded"</span><span class="token punctuation">,</span> callback<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">ready</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">/* Làm gì đó khi DOM đã được tải hết */</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
10. Làm việc với CSS Classes
Để thao tác với CSS Classes trong Javascript, ta sẽ cần thông qua thuộc tính classList
của thành phần
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token comment">// Với jQuery</span> <span class="token comment">// Thêm, xóa, hoặc bật tắt class 'focus' cho thành phần '.box'</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".box"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token string">"focus"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".box"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">removeClass</span><span class="token punctuation">(</span><span class="token string">"focus"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".box"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toggleClass</span><span class="token punctuation">(</span><span class="token string">"focus"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Với Javascript</span> <span class="token comment">// Thêm, xóa, hoặc bật tắt class 'focus' cho thành phần '.box'</span> <span class="token keyword">var</span> box <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".box"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> box<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">"focus"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> box<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">"focus"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> box<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">toggle</span><span class="token punctuation">(</span><span class="token string">"focus"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Ta cũng có thể thực thi với hàng loạt classes như sau
1 2 3 4 5 | <span class="token comment">// Thêm class "focus" và "highlighted", rồi xóa chúng đi</span> <span class="token keyword">var</span> box <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".box"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> box<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">"focus"</span><span class="token punctuation">,</span> <span class="token string">"highlighted"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> box<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">"focus"</span><span class="token punctuation">,</span> <span class="token string">"highlighted"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Hay thậm chí thay đổi class, Javascript quả thực chẳng thiếu gì đâu nhé!
1 2 3 | // Xóa class "focus" và thay bằng class "blurred" document.querySelector(".box").classList.replace("focus", "blurred"); |
11. Kiểm tra thành phần có class hay không?
Chà, theo mình thấy thì quả thực jQuery đúng là ngắn gọn hơn JS nhiều, bảo sao nhiều người ưa thích nó. Nhưng mà mất khoản này thì ta được nhiều khoản khác thôi nha.
jQuery thì có sẵn hàm hasClass()
trong khi với Javascript, ta sẽ cần mất công hơn một chút:
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token comment">// Với jQuery</span> <span class="token comment">// Kiểm tra nếu thành phần '.box' có chứa class 'focus'</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".box"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">hasClass</span><span class="token punctuation">(</span><span class="token string">"focus"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Làm gì đóoooooo...</span> <span class="token punctuation">}</span> <span class="token comment">// Without jQuery</span> <span class="token comment">// Kiểm tra nếu thành phần '.box' có chứa class 'focus'</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".box"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">contains</span><span class="token punctuation">(</span><span class="token string">"focus"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Cũng làm gì đóoooooo...</span> <span class="token punctuation">}</span> |
12. Gọi các HTTP Requests
Đây chắc chắn là một chức năng vô cùng quan trọng trong bất cứ dự án Front-end nào. Có thể các bạn đã quá thân quen với jQuery AJAX, nhưng đừng lo, với Javascript chúng ta đã có Fetch API vô cùng mạnh mẽ và dễ dàng sử dụng. Fetch sẽ trả cho chúng ta 1 Promise để ta có thể xử lý kết quả thật nhanh gọn. Đừng lo nữa nha những anh em, đồng chí của tôi…
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <span class="token comment">// Với jQuery</span> $<span class="token punctuation">.</span><span class="token function">ajax</span><span class="token punctuation">(</span><span class="token punctuation">{</span> url<span class="token operator">:</span> <span class="token string">"data.json"</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">done</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// ...</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">fail</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Xử lý lỗi</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Với Javascript</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">"data.json"</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">data</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// Xử lý dữ liệu</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// Xử lý lỗi</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
13. Cập nhật DOM
Đơn giản nhất là thay đổi nội dung chữ bên trong thành phần, nhưng các bạn cẩn thận khi thực hiện việc này nhé, vì Hacker có thể lợi dụng nó để thực hiện tấn công XSS đó. Nhưng yên tâm, nếu bạn muốn giải quyết vấn đề này, hãy thử đọc thêm tại đây nhé!
Ta có thể dễ dàng cập nhật nội dung trong DOM với cô nàng JS bằng cách sử dụng thuộc tính .textContent
.
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token comment">// Với jQuery</span> <span class="token comment">// Cập nhật nội dung văn bản bên trong '.button'</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".button"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string">"New text"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Đọc nội dung văn bản trong '.button'</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".button"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Trả về "New text"</span> <span class="token comment">// Với Javascript</span> <span class="token comment">// Cập nhật nội dung văn bản bên trong '.button'</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".button"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>textContent <span class="token operator">=</span> <span class="token string">"New text"</span><span class="token punctuation">;</span> <span class="token comment">// Đọc nội dung văn bản trong '.button'</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".button"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>textContent<span class="token punctuation">;</span> <span class="token comment">// Trả về "New text"</span> |
Nâng cao hơn, đó chính là việc thay đổi các thành phần bên trong thành phần đã có. Ta sẽ thực hiện như sau:
1 2 3 4 5 6 7 | <span class="token comment">// Tạo thành phần 'div' và thêm nó vào trong '.container'</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".container"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"<div/>"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Tạo thành phần 'div' và thêm nó vào trong '.container'</span> <span class="token keyword">var</span> element <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"div"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".container"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>element<span class="token punctuation">)</span><span class="token punctuation">;</span> |
Gộp lại thì ta sẽ có một cái ví dụ “full topping” như sau ạ:
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token comment">// Tạo thẻ 'div'</span> <span class="token keyword">var</span> element <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"div"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Cập nhật class cho nó</span> element<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">"box"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Đặt nội dung văn bản bên trong</span> element<span class="token punctuation">.</span>textContent <span class="token operator">=</span> <span class="token string">"Text inside box"</span><span class="token punctuation">;</span> <span class="token comment">// Thêm nó vào trong '.container'</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".container"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>element<span class="token punctuation">)</span><span class="token punctuation">;</span> |
Vẫn là chào các bạn, nhưng chào tạm biệt
Thế là mình đã chỉ cho các bạn 13 bí kíp “tán đổ cô nàng” Javascript… Còn giờ mình sẽ cho bạn thời gian suy ngẫm xem bạn có dám mạnh mẽ nói lời “chia tay” với jQuery hay không nhé!
Mình rất mong mình đã mang cho các bạn những kiến thức hay, cảm ơn các bạn đã đọc tới dòng cuối cùng của bài viết này, mình rất trân trọng tình cảm của mọi người dành cho mình. Chào tạm biệt các bạn và hẹn gặp lại trong những bài viết sau nhé! Peaceeeee…