Trong bài viết hôm nay mình sẽ giới thiệu đến bạn một số cách để chuyển đổi Jquery sang Javascript cho thiết kế và phát triển website.
Cách Chuyển Jquery sang Javascript
Đầu tiên mình xin giới thiệu sơ qua về Jquery. Nó là một thư viện JavaScript mã nguồn mở miễn phí được thiết kế để đơn giản hóa các thao tác làm việc với HTML DOM, xử lý sự kiện, tạo animation CSS và Ajax. Nó là một thư viện có thể nói là không thể thiếu cho các lập trình viên front end. Tuy nhiên từ ngày ra mắt các framework frontend và các developer chú trọng hơn về mặt hiệu suất hơn thì số lượng website sử dụng Jquery đã giảm rất nhiều.
Việc sử dụng Jquery giúp bạn giảm rất nhiều thời gian phải viết mã (website của mình cũng đang sử dụng nó). Tuy nhiên các trình duyệt hiện nay đã hỗ trợ rất nhiều API để phát triển website mà không cần phải dùng Jquery. Do đó trong bài viết hôm nay mình sẽ giới thiệu dến bạn một số cách để dùng các chức năng hũu ích của Jquey bằng Javascript thuần nhé.
1) Append
Chèn nội dung chỉ định vào cuối các phần tử đã chọn.
Jquery
$(parent).append(el);
Javascript
parent.appendChild(el);
2) addClass
Thêm một hay nhiều class vào phần tử trong trang web.
Jquery
$(el).addClass(className);
Javascript
el.classList.add(className);
3) clone
Sao chép và tạo phần tử mới từ element được chọn bao gồm child nodes, thuộc tính và văn bản.
Jquery
$(el).clone();
Javascript
el.cloneNode(true);
4) .css
Thêm các thuộc tính CSS vào phần tử trong HTML.
Jquery
el.style.backgroundColor = 'white';
Javascript
$(el).css('background-color', 'white');
5) .contains()
Chọn các phần tử được chỉ định.
Jquery
$.contains(el, child);
Javascript
el !== child && el.contains(child);
6) .after()
Chèn nội dung vào sau phần tử được chọn.
Jquery
$(el).after(htmlString);
Javascript
el.insertAdjacentHTML('afterend', htmlString);
7) .text()
Lấy văn bản của phần tử.
Jquery
$(el).text();
Javascript
el.textContent
8) .hasClass()
Kiểm tra phần tử có chứa tên class nào đó hay không.
Jquery
$(el).hasClass(className);
Javascript
el.classList.contains(className);
9) .attr()
Lấy thuộc tính của phần tử HTML.
Jquery
$(el).attr('autocomplete');
Javascript
el.getAttribute('autocomplete');
10) .empty()
Xoá tất cả các nhánh con và văn bản của phần tử.
Jquery
$(el).empty();
Javascript
while(el.firstChild)
el.removeChild(el.firstChild);
11) .each()
Lặp các phần tử trong object được chỉ định.
Jquery
$(selector).each(function(i, el){
});
Javascript
var elements = document.querySelectorAll(selector);
Array.prototype.forEach.call(elements, function(el, i){
});
12) .height()
Lấy chiều cao của một element xác định.
Jquery
$(el).height();
Javascript
parseFloat(getComputedStyle(el, null).height.replace("px", ""))
13) .html()
Thiết lập giá trị hay trả về văn bản của phần tử được chọn.
Jquery
$(el).html();
Javascript
el.innerHTML
14) .find()
Trả về phần tử con của element xác định.
Jquery
$(el).find(selector);
Javascript
el.querySelectorAll(selector);
15) .prop()
Thiết lập hay trả về các thuộc tính của phần tử.
Jquery
$(el).prop('outerHTML');
Javascript
el.outerHTML
16) .width()
Lấy chiều rộng của phần tử.
Jquery
$(el).width();
Javascript
parseFloat(getComputedStyle(el, null).width.replace("px", ""))
17) .is()
Kiểm ta một phần tử có giống với phần tử dược chọn hay không.
Jquery
$(el).is($(otherElement));
Javascript
el === otherElement
Ví dụ bạn có thể sử dụng hàm is()
để xem các phần tử có chung class với nhau hay không như doạn mã dưới đây:
Jquery
$(el).is('.my-class');
Javascript
var matches = function(el, selector) {
return (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector).call(el, selector);
};
matches(el, '.my-class');
18) .offset()
Lấy tọa độ hiện tại của phần tử đầu tiên hoặc đặt tọa độ của mọi phần tử được tính theo document.
Jquery
$(el).offset();
Javascript
var rect = el.getBoundingClientRect(); {
top: rect.top + document.body.scrollTop,
left: rect.left + document.body.scrollLeft
}
19) .position()
Trả về vị trí của phần tử trong HTML.
Jquery
$(el).position();
Javascript
{left: el.offsetLeft, top: el.offsetTop}
20) .remove()
Xoá các phần tử được chọn.
Jquery
$(el).remove();
Javascript
if (el.parentNode !== null) {
el.parentNode.removeChild(el);
}
21) .removeClass()
Xoá class cho phần tử được chọn.
Jquery
$(el).removeClass(className);
Javascript
el.classList.remove(className);
22) .toggleClass()
chuyển đổi giữa thêm hay xóa một hoặc nhiều class khỏi các phần tử được chọn.
Jquery
$(el).toggleClass(className);
Javascript
el.classList.toggle(className);
23) .siblings()
Trả về tất cả các phần tử Sibling (phần tử có chung cha mẹ) liên quan đến phần tử đã chọn.
Jquery
$(el).siblings();
Javascript
var siblings = function (el) {
if (el.parentNode === null) return [];
return Array.prototype.filter.call(el.parentNode.children,
function (child) {
return child !== el;
});
};
siblings(el);
24) .before()
Thêm nội dung trước phần tử được chọn.
Jquery
$(target).before(element);
Javascript
target.insertAdjacentElement('beforebegin', element);
25) .filter()
Chức năng lọc hay tìm phần tử cụ thể.
Jquery
$(selector).filter(filterFunction);
Javascript
Array.prototype.filter.call(document.querySelectorAll(selector), filterFunction);
26) .children()
Trả về element con của một phần tử xác định.
Jquery
$(el).children();
Javascript
el.children
27) .replaceWith()
Thay đổi nội dung cho phần tử dược chọn.
Jquery
$(el).replaceWith(string);
Javascript
el.outerHTML = string;
28) .outerWidth()
Lấy giá trị chiều rộng của phần tử bao gồm padding và border.
Jquery
$(el).outerWidth()
Javascript
el.offsetWidth
29) .outerWidth(true)
Lấy giá trị chiều rộng của phần tử bao gồm padding, border và margin.
Jquery
$(el).outerWidth(true)
Javascript
function outerWidth(el) {
var width = el.offsetWidth;
var style = getComputedStyle(el);
width += parseInt(style.marginLeft) + parseInt(style.marginRight);
return width;
}
outerWidth(el);
30) .outerHeight()
Lấy giá trị chiều cao của phần tử bao gồm padding, border.
Jquery
$(el).outerHeight();
Javascript
el.offsetHeight
31) .outerHeight(true)
Lấy giá trị chiều cao của phần tử bao gồm padding, border và margin.
Jquery
$(el).outerHeight(true);
Javascript
function outerHeight(el) {
var height = el.offsetHeight;
var style = getComputedStyle(el);
height += parseInt(style.marginTop) + parseInt(style.marginBottom);
return height;
} outerHeight(el);
32) .click
Lắng nghe sự kiện click hay thực hiện hàm nào đó khi xảy ra sự kiện click.
Jquery
$(el).click(function () {});
Javascript
el.addEventListener('click', function () {}, false);
33) .off
Loại bỏ sự kiện của đối tuọng khi sử dụng phương thức on.
Jquery
$(el).off(eventName, eventHandler);
Javascript
el.removeEventListener(eventName, eventHandler);
34) .ready
Là các sự kiện sẽ được thực hiện khi DOM đã được load.
Jquery
$(document).ready(function(){
});
Javascript
function ready(fn) {
if (document.readyState != 'loading'){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
35) .on
Thực hiện một hay nhiều sự kiện cho các phần tử đã chọn.
Jquery
$(document).on(eventName, elementSelector, handler);
Javascript
document.addEventListener(eventName, function(e) {
for (var target = e.target; target && target != this; target = target.parentNode) {
if (target.matches(elementSelector)) {
handler.call(target, e);
break;
}
}
}, false);
36) .ajax
Cho phép tải dữ liệu mà không cần phải load lại trang web.
Jquery
$.ajax({
type: 'POST',
url: 'địa chỉ URL',
data: data
});
Javascript
var request = new XMLHttpRequest();
request.open('POST', 'địa chỉ URL', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);
37) .getJSON
Phương thức này được sử dụng để lấy dữ liệu JSON bằng cách yêu cầu AJAX HTTP GET.
Jquery
$.getJSON('Địa chỉ URL', function(data) {
});
Javascript
var request = new XMLHttpRequest();
request.open('GET', 'Địa chỉ URL', true);
request.onload = function() {
if (this.status >= 200 && this.status < 400) {
var data = JSON.parse(this.response);
} else {
}
};
request.onerror = function() {
};
request.send();
38) .parseHTML
Phương thức chuyển đổi chuỗi thành DOM nodes.
Jquery
$.parseHTML(htmlString);
Javascript
var parseHTML = function (str) {
var ele = document.implementation.createHTMLDocument("");
ele.body.innerHTML = str;
return ele.body.children;
};
parseHTML(htmlString);
39) .parseJSON
Phương thức chuyển đổi chuyển đổi dữ liệu JSON thành đối tượng trong Javascript.
Jquery
$.parseJSON(string);
Javascript
JSON.parse(string);
40) .now
Trả về giá trị ngày hiện tại.
Jquery
$.now();
Javascript
Date.now();