40 Cách Chuyển Jquery Sang Javascript

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.

Đầ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é.

Chèn nội dung chỉ định vào cuối các phần tử đã chọn.

$(parent).append(el);

parent.appendChild(el);

Thêm một hay nhiều class vào phần tử trong trang web.

$(el).addClass(className);

el.classList.add(className);

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.

$(el).clone();

el.cloneNode(true);

Thêm các thuộc tính CSS vào phần tử trong HTML.

el.style.backgroundColor = 'white';

$(el).css('background-color', 'white');

Chọn các phần tử được chỉ định.

$.contains(el, child);

el !== child && el.contains(child);

Chèn nội dung vào sau phần tử được chọn.

$(el).after(htmlString);

el.insertAdjacentHTML('afterend', htmlString);

Lấy văn bản của phần tử.

$(el).text();

el.textContent

Kiểm tra phần tử có chứa tên class nào đó hay không.

$(el).hasClass(className);

el.classList.contains(className);

Lấy thuộc tính của phần tử HTML.

$(el).attr('autocomplete');

el.getAttribute('autocomplete');

Xoá tất cả các nhánh con và văn bản của phần tử.

$(el).empty();

while(el.firstChild)
 el.removeChild(el.firstChild);

Lặp các phần tử trong object được chỉ định.

$(selector).each(function(i, el){
   
 });

var elements = document.querySelectorAll(selector);
 Array.prototype.forEach.call(elements, function(el, i){
 
});

Lấy chiều cao của một element xác định.

$(el).height();

parseFloat(getComputedStyle(el, null).height.replace("px", ""))

Thiết lập giá trị hay trả về văn bản của phần tử được chọn.

$(el).html();

el.innerHTML

Trả về phần tử con của element xác định.

$(el).find(selector);

el.querySelectorAll(selector);

Thiết lập hay trả về các thuộc tính của phần tử.

$(el).prop('outerHTML');

el.outerHTML

Lấy chiều rộng của phần tử.

$(el).width();

parseFloat(getComputedStyle(el, null).width.replace("px", ""))

Kiểm ta một phần tử có giống với phần tử dược chọn hay không.

$(el).is($(otherElement));

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:

$(el).is('.my-class');

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');

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.

$(el).offset();

var rect = el.getBoundingClientRect(); {
 top: rect.top + document.body.scrollTop,
left: rect.left + document.body.scrollLeft
}

Trả về vị trí của phần tử trong HTML.

$(el).position();

{left: el.offsetLeft, top: el.offsetTop}

Xoá các phần tử được chọn.

$(el).remove();

if (el.parentNode !== null) {
  el.parentNode.removeChild(el);
}

Xoá class cho phần tử được chọn.

$(el).removeClass(className);

el.classList.remove(className);

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.

$(el).toggleClass(className);

el.classList.toggle(className);

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.

$(el).siblings();

var siblings = function (el) {
  if (el.parentNode === null) return [];
  return Array.prototype.filter.call(el.parentNode.children, 
function (child) {
    return child !== el;
  });
};
siblings(el);

Thêm nội dung trước phần tử được chọn.

$(target).before(element);

target.insertAdjacentElement('beforebegin', element);

Chức năng lọc hay tìm phần tử cụ thể.

$(selector).filter(filterFunction);

Array.prototype.filter.call(document.querySelectorAll(selector), filterFunction);

Trả về element con của một phần tử xác định.

$(el).children();

el.children

Thay đổi nội dung cho phần tử dược chọn.

$(el).replaceWith(string);

el.outerHTML = string;

Lấy giá trị chiều rộng của phần tử bao gồm padding và border.

$(el).outerWidth()

el.offsetWidth

Lấy giá trị chiều rộng của phần tử bao gồm padding, border và margin.

$(el).outerWidth(true)

function outerWidth(el) {
  var width = el.offsetWidth;
  var style = getComputedStyle(el);
  width += parseInt(style.marginLeft) + parseInt(style.marginRight);
  return width;
}
outerWidth(el);

Lấy giá trị chiều cao của phần tử bao gồm padding, border.

$(el).outerHeight();

el.offsetHeight

Lấy giá trị chiều cao của phần tử bao gồm padding, border và margin.

$(el).outerHeight(true);

function outerHeight(el) {
  var height = el.offsetHeight;
  var style = getComputedStyle(el);
  height += parseInt(style.marginTop) + parseInt(style.marginBottom);
  return height;
} outerHeight(el);

Lắng nghe sự kiện click hay thực hiện hàm nào đó khi xảy ra sự kiện click.

$(el).click(function () {});

el.addEventListener('click', function () {}, false);

Loại bỏ sự kiện của đối tuọng khi sử dụng phương thức on.

$(el).off(eventName, eventHandler);

el.removeEventListener(eventName, eventHandler);

Là các sự kiện sẽ được thực hiện khi DOM đã được load.

$(document).ready(function(){
 });

function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

Thực hiện một hay nhiều sự kiện cho các phần tử đã chọn.

$(document).on(eventName, elementSelector, handler);

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);

Cho phép tải dữ liệu mà không cần phải load lại trang web.

$.ajax({
  type: 'POST',
  url: 'địa chỉ URL',
  data: data
});

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);

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.

$.getJSON('Địa chỉ URL', function(data) { 
 });

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();

Phương thức chuyển đổi chuỗi thành DOM nodes.

$.parseHTML(htmlString);

var parseHTML = function (str) {
  var ele = document.implementation.createHTMLDocument("");
  ele.body.innerHTML = str;
  return ele.body.children;
};
parseHTML(htmlString);

Phương thức chuyển đổi chuyển đổi dữ liệu JSON thành đối tượng trong Javascript.

$.parseJSON(string);

JSON.parse(string);

Trả về giá trị ngày hiện tại.

$.now();

Date.now();