Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
40 Cách Chuyển Jquery Sang Javascript

40 Cách Chuyển Jquery Sang Javascript


Ngày 25 Tháng 11 Năm 2021

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

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những cách chuyển đổi chức năng Jquery sang Javascript cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Tìm Kiếm Bài Viết

Ads Digital Ocean

Nhận Ngay $100 sử dụng dịch vụ khi đăng ký tài khoản trên DigitalOcean.

Ads azdigi

Sử dụng dịch vụ hosting của Azdigi chỉ với 50.000 đồng.

Ads HostGator

Nhận Ngay Tên Miền Và Chứng Chỉ SSL Miễn Phí Khi Sử Dụng Hosting Của HostGator.

Ads Name Cheap

Đăng Ký Tên Miền Chỉ Với $0.99/năm cùng với Name Cheap.