jQuery là một thư viện Javascript tuyệt vời. jQuery xuất hiện khi trình duyệt IE6 là trình duyệt tốt nhất lúc bấy giờ. Sau này, mọi thứ ngày càng trở nên khác biệt hơn. Với sự xuất hiện của các trình duyệt như Chrome, Firefox, Safari và gần đây là thế hệ HTML5 với hỗ trợ đắc lực thì jQuery vẫn giữ vững được vị trí và vai trò quan trọng đối với các dự án.
jQuery vẫn là một thư viện tuyệt vời cho các trình duyệt cũ và mới mặc dù vậy vẫn còn những hạn chế về hiệu ứng trên các trình duyệt cũ và thiết bị mobile. Sau đây là 5 mẹo nhỏ để viết Javascript khi không có jQuery bên cạnh.
1. Lắng nghe sự kiện ‘document ready’
Để lắng nghe sự kiện ‘document ready’ thì trong jQuery sẽ viết là: $(document).ready(function(){….});còn trong trường hợp không có jQuery thì sẽ được thay thế bằng đoạn mã js sau:
- document.addEventListener('DOMContentLoaded',function(){
- alert ('Document ready!');
- });
2. Chọn đối tượng trong html
Đối việc chọn chọn lựa đối tượng trong HTML thì trong jQuery ta sẽ xử lý với querySelectorAll() còn đối với javascript thì ta có đoạn mã sau:
- var social = document.querySelector(".social-icon");
3. Thêm và xóa sự kiện cho một đối tượng
Để thực hiện thiết lập sự kiện cho một đối tượng với javascript ta dùng phương thức addEventListener. Đoạn mã như sau, ta thiết lập cho một link với class là “popup” và xử lý khi người dùng click vào thì hiện thị alert “Hello popup!”. Đoạn mã xử lý như sau:
- // Chọn đối tượng
- var _linkPopup = document.querySelector(".popup");
- // Thiết lập sự kiện cho đối tượng thứ đầu tiên
- _linkPopup[0].addEventListener("click",function(){
- alert ("Hello popup!");
- }
4. Thiết lập nội dung cho đối tượng
Để thực hiện thiết lập nội dung cho một đối tượng HTML thì ta có thể dùng các phương thức sau:
- var myHTML = document.querySelector("body");
- myHTML.innerHTML ="Hello World!";
- // Or
- myHTML.textContent ="Text Content";
5. Tạo và xóa thành phần trong HTML
Để tạo một thành phần trong HTML như các thẻ DIV, A, H thì ta sử dụng đoạn code sau:
- // Chọn thành phần
- var _body = document.querySelector("body");
- // Tạo thành phần
- var fruit = document.createElement("div");
- fruit.innerHTML ="<p>Apple</p>";
- // Thêm đối tượng vào body
- _body.appendChild(fruit);
- // Để remove các đối tượng con trong body thì ta sử dụng câu lệnh
- _body.removeChild();
Vậy ta có 5 mẹo nhỏ hữu ích để sử dụng Javascript căn bản khi không có thư viện jQuery. Chúc các bạn vui và học tốt. Đừng quên share và follow nếu bạn thấy bài này hữu ích
.
jQuery vẫn là một thư viện tuyệt vời cho các trình duyệt cũ và mới mặc dù vậy vẫn còn những hạn chế về hiệu ứng trên các trình duyệt cũ và thiết bị mobile. Sau đây là 5 mẹo nhỏ để viết Javascript khi không có jQuery bên cạnh.
1. Lắng nghe sự kiện ‘document ready’
Để lắng nghe sự kiện ‘document ready’ thì trong jQuery sẽ viết là: $(document).ready(function(){….});còn trong trường hợp không có jQuery thì sẽ được thay thế bằng đoạn mã js sau:
- document.addEventListener('DOMContentLoaded',function(){
- alert ('Document ready!');
- });
2. Chọn đối tượng trong html
Đối việc chọn chọn lựa đối tượng trong HTML thì trong jQuery ta sẽ xử lý với querySelectorAll() còn đối với javascript thì ta có đoạn mã sau:
- var social = document.querySelector(".social-icon");
3. Thêm và xóa sự kiện cho một đối tượng
Để thực hiện thiết lập sự kiện cho một đối tượng với javascript ta dùng phương thức addEventListener. Đoạn mã như sau, ta thiết lập cho một link với class là “popup” và xử lý khi người dùng click vào thì hiện thị alert “Hello popup!”. Đoạn mã xử lý như sau:
- // Chọn đối tượng
- var _linkPopup = document.querySelector(".popup");
- // Thiết lập sự kiện cho đối tượng thứ đầu tiên
- _linkPopup[0].addEventListener("click",function(){
- alert ("Hello popup!");
- }
4. Thiết lập nội dung cho đối tượng
Để thực hiện thiết lập nội dung cho một đối tượng HTML thì ta có thể dùng các phương thức sau:
- var myHTML = document.querySelector("body");
- myHTML.innerHTML ="Hello World!";
- // Or
- myHTML.textContent ="Text Content";
5. Tạo và xóa thành phần trong HTML
Để tạo một thành phần trong HTML như các thẻ DIV, A, H thì ta sử dụng đoạn code sau:
- // Chọn thành phần
- var _body = document.querySelector("body");
- // Tạo thành phần
- var fruit = document.createElement("div");
- fruit.innerHTML ="<p>Apple</p>";
- // Thêm đối tượng vào body
- _body.appendChild(fruit);
- // Để remove các đối tượng con trong body thì ta sử dụng câu lệnh
- _body.removeChild();
Vậy ta có 5 mẹo nhỏ hữu ích để sử dụng Javascript căn bản khi không có thư viện jQuery. Chúc các bạn vui và học tốt. Đừng quên share và follow nếu bạn thấy bài này hữu ích