FPT-APTECH - thương hiệu duy nhất trong hệ thống APTECH trực thuộc ĐẠI HỌC FPT và TẬP ĐOÀN FPT
17/07/2019, 09:05 Hôm qua: 6517 Hôm nay: 1805 khách  
 
  Bạn sẽ không cần đến JQuery nữa sau khi đọc bài viết này!  
 

Không phải ngẫu nhiên mà Github đã bỏ hoàn toàn JQuery ra khỏi trang web của họ. JQuery – theo như Github – “là một như viện khổng lồ”, vì vậy sẽ tốn nhiều thời gian để load. Đối với trang web thì chỉ chệnh lệch vài mili giây thôi là cũng đã quyết định người dùng có ở lại trang web hay không rồi. Bài viết này mình xin phép được giới thiệu một số selector mà Vanilla JS (hay JS thuần) hỗ trợ.

FPT-Aptech-Jquery

Một số methods

1. Dùng để select các elements

getElementById()

Method này hoạt động y hệt như $(‘#id-gì-đó’) của jquery.

var el = document.getElementsById('a-random-id');

getElementsByClassName()

Method này hoạt động giống với $(‘.class-gì-đó’) của jquery

var el = document.getElementsByClassName('a-random-class')

Vì class có thể tái sử dụng đựoc nên method này sẽ trả về một tập hợp các element thỏa mãn

getElementsByTagName()

var buttons = document.getElementsByTagName('button');

Method này hoạt động giống với $(‘tagname’) của jquery

querySelector()

Method này trả về phần tử đầu tiên thoả mãn, và selector phải theo cú pháp CSS, tức là bạn có thể sử dụng các selector tương ứng như sau:

  • class: document.querySelector('.a-class');
  • id: document.querySelector('#an-id');
  • tag: document.querySelector('button');

querySelectorAll()

Method này gần giống với querySelector() nhưng nó sẽ trả về toàn bộ phần tử thỏa mãn

var contents = document.querySelectorAll('.content-data'); trả về toàn bộ phần tử chứa class content-data

getAttribute()

Method này sẽ trả về giá trị của attribute tuơng ứng được chỉ định

el.getAttribute('data-content') sẽ trả về giá trị của data-content của phần tử

addEventListener()

Method này thực hiện một hành động khi có một sự kiện được thực thi trên một phần tử, giống với .on của jquery.

Giả sử ta có element el, ta muốn thực hiện hàm khi click:

FPT-Aptech-Jquery

Ngoài ra còn có nhiều event khác như select, kéo thả,…

2. Dùng để duyệt các phần tử trong DOM

.childNodes

Thuộc tính này sẽ trả về toàn bộ các phần tử con của một phần tử. Nó gần như trả về mọi thứ và mọi kiểu dữ liệu, nên hãy cẩn thận khi dùng

FPT-Aptech-Jquery

sẽ trả về toàn bộ phần tử con của của phần tử được chọn

.firstChild

Sẽ trả về phần tử con đầu tiên của phần tử được cho

FPT-Aptech-jquery

.nodeName

Sẽ trả về tên của phần tử được cho, giả sử ta chọn 1 div, thì nó sẽ trả về… “div”

FPT-Aptech-jquery

.parentNode

Sẽ trả về phần tử cha của phần tử được chọn

FPT-Aptech-jquery

.firstElementChild

Sẽ trả về phần tử con đầu tiên của phần tử được chọn

FPT-Aptech-jquery

.lastElementChild

Sẽ trả về phần tử con cuối cùng của phần tử được chọn

FPT-Aptech-jquery

.previousElementSibling

Sẽ trả về phần tử cùng cấp nhưng ở trước phần tử được chỉ định (tương tự có nextElementSibling)

FPT-Aptech-jquery

Hy vọng sau bài viết này mọi người đã đựoc biết thêm về một số method có sẵn của JS, từ đó (phần nào) bớt lệ thuộc hơn vào JQuery.

FPT APTECH mở ra cho các bạn đam mê học tin học, học công nghệ thông tin chuyên sâu về học lập trình cơ hội được đào tạo Công Nghệ Thông Tin trong môi trường tiêu chuẩn chất lượng quốc tế ISO 9001

Học CNTT - Học Aptech - Học tại FPT

(Techtalk via Viblo)

Tổ Chức Giáo Dục FPT – fpt.edu.vn

Trường Đào Tạo Lập Trình Viên Quốc Tếaptech.fpt.edu.vn


 
  Chia sẻ với bạn bè qua
Chia sẻ với bạn bè qua:


 
     
 
Công nghệ khác:


Google ra mắt website mới dành riêng cho web developerWi-Fi đã quá lỗi thời, các nhà máy sản xuất 4.0 dự định chuyển sang dùng mạng 5G nội bộ
10 Lý do để học ngôn ngữ lập trình Java và tại sao Java là tốtMất đi bạn thân vì tai nạn, hai anh chàng này quyết lập một con chatbot để giúp trò chuyện với người chết
Sôi máu vì bị Apple "đá xéo", Mark Zuckerberg cấm tiệt nhân viên dùng iPhone cho hả giậnCEO Apple Tim Cook bất ngờ khen Google là công cụ tìm kiếm tốt nhất thế giới
  Xem tiếp    
 
 
Lịch khai giảng toàn hệ thống
 
Ngày
Giờ
Khóa
T.Tâm
TP Hồ Chí Minh
Hà Nội
 
   
Thông Tin Khuyến Học
New ADSE - Nhấn vào để xem chi tiết
Mừng Sinh Nhật Lần Thứ 20 FPT-APTECH
Nhấn vào để xem chi tiết
Bảng Vàng Thành Tích Sinh Viên FPT APTECH - Nhấn vào để xem chi tiết
THÔNG TIN KHÁC
Cập nhật công nghệ miễn phí cho tất cả cựu sinh viên APTECH toàn quốc
Tiết Thực Vì Cộng Đồng
Hội Thảo CNTT
Những khoảnh khắc không phai của Thầy Trò FPT-APTECH Ngày 20-11
 
 
         


Tổng Lượt Truy Cập: 27401738 khách đã xem
Copyright © FPT APTECH 2009 All Rights Reserved
Xem tốt nhất ở độ phân giải 1024 x 768 với IE6.0 trở lên
Học Aptech, Học lập trình, Học tin học hay muốn theo nghề lập trình hãy chọn FPT APTECH
Học lập trình web miễn phí học lập trình java học lập trình game miễn phí học lập trình .Net miễn phí đào tạo Công Nghệ Thông Tin chất lượng đảm bảo việc làm