jQuery là một thư viện đình đám mà bất cứ lập trình viên web nào cũng phải biết đến nó. Đây là một thư viện giúp bạn thao tác với các phần tử HTML một cách nhanh chóng, nói chung là : viết ít làm nhiều ! Tuy nhiên, liệu website của bạn có thực sự cần thiết nhúng thêm jQuery vào không, hãy cùng tôi chia sẻ trải nghiệm qua bài viết này
jQuery and JS
Độ phổ biến của jQuery nhiều đến mức tôi hỏi vài người JS là gì thì họ trả lời ngay nó là jQuery 😄, kiểu như cứ mở script lên là cứ phải tương thằng $ vào rồi làm gì nữa thì làm. Nhưng thực chất không phải thế, jQuery chỉ là một thư viện được xây dựng lên từ những hàm có sẵn trong JavaScript nhằm giúp lập trình viên dễ dàng thao tác với các phần tử HTML hơn
Nói không ngoa ví dụ tôi có 1 thẻ div có id là foo, và 2 thẻ div có class là bar, giờ muốn set color cho cả 3 thằng thì với JS thuần (bạn có thể gọi là Pure JS hay Vanilla JS) sẽ phải viết như sau
document.getElementById("foo").style.color = "red";
var bar = document.getElementsByClassName("bar"); // do getElementsByClassName trả về một mảng các object
for (var i = 0; i < bar.length; i++) {
bar[i].style.color = "red";
}
Hoặc ngắn hơn
var bar = document.querySelectorAll(".bar,#foo");
for (var i = 0; i < bar.length; i++) {
bar[i].style.color = "red";
}
Với jQuery mọi thứ trở nên nhẹ nhàng hơn
$(".bar,#foo").css("color", "red")
Rõ ràng là ngắn hơn, ngon hơn thì anh nào mà chả thích, điểm mạnh của jQuery đó là nó rất linh hoạt trong việc trỏ tới selector, không loằng ngoằng dài dòng getid nọ get class kia
Đó là mặt tích cực, còn tiêu cực thì sao, quá mải miết với jQuery khiến bạn dần quên lãng những kiến thức cơ bản của javascript, ví dụ như ở trên để chọn được phần tử theo đúng id hoặc class và lặp qua chúng, thêm sự kiện, xử lý sự kiện bằng js thuần,... đầy người lại phải google tìm lại
Ajax là một tính năng được đánh giá nổi trội trong jQuery, liệu với JS thuần có anh nào cân được nó, bạn có thể tham khảo một số phương án sau reqwest, then-request, superagent.
Hoặc cây nhà lá vườn hơn đó là fetch API. Con hàng này mới ra hứa hẹn sẽ thay thế cho XMLHttpRequest, và đương nhiên mới thì chưa thể support 100% các trình duyệt máy tính cũng như điện thoại. Mặt bằng chung thì cũng khỏa lấp 96,69% trừ những ông thần trong làng trình duyệt như Edge & IE huyền thoại
Ví dụ với blogspot, tôi tạo 1 hàm ajax lấy và xử lý dữ liệu như sau
$.ajax({
type: 'GET',
url: '/feeds/comments/summary',
data: {
'alt': 'json',
'max-results': 10,
},
dataType: 'jsonp',
success: function(json) {
console.log(json)
// do something with data
},
error: function(error) {
console.log(error)
}
});
Với fetch chẳng có gì khó
fetch('/feeds/comments/summary?alt=json&max-results=10')
.then(response => response.json())
.then(data => {
console.log(data);
// do something with data
})
.catch(error => console.error(error))
Đây là 2 ví dụ cơ bản so sánh giữa giữa jQuery và Vanilla JS. Nói chung jQuery giúp bạn tối ưu về mặt thời gian, công sức, còn Vanilla JS mang đến cho bạn nền tảng kiến thức cơ bản, độ tương thích cao, sự chắc chắn thể hiện qua từng dòng lệnh
Nếu nói về độ quan trọng ta nên đặt mỗi thằng 50%
- Bỏ jQuery
- Không phụ thuộc vào jQuery, đồng thời người dùng không cần phải download thêm thư viện
- Được trình duyệt tối ưu, có khả năng tăng hiệu suất (1 chút thôi)
- Về mặt lâu dài, sử dụng phương thức mặc định của trình duyệt đảm bảo tính tương thích trong ứng dụng, đặc biệt hữu ích phải bảo trì những ứng dụng cũ.
- ...
- Thiếu jQuery
- Việc chọn elements dài hơn
- Một số sử lý sẽ khó, phức tạp, và code sẽ dài hơn
- Các plugin viết sẵn không có jQuery cũng sẽ trở thành vô hại => lại phải tự code hoặc tìm plugin khác thay thế => mệt
- ...
Vậy thì phân bổ như nào cho hợp lý ?
Với những dự án nhỏ (chẳng hạn như website blogspot, trang có quy mô nhỏ,.. ) thì ta không nên sử dụng jQuery, hãy cố gắng tận dụng tối đa các phương thức pure JS mang lại - ví dụ như trang của tôi nè, giờ không còn xuất hiện một dòng jQuery nào nữa đâu :v
Với dự án lớn, thời gian eo hẹp, cần sử dụng nhiều plugin hỗ trợ thì ta nên tích hợp jQuery để đạt hiệu suất cao và tiện lợi cho việc bảo trì
Chuyển đổi jQuery sang Pure JS
Sau đây tôi sẽ liệt kê cho bạn cách chuyển đổi qua lại giữa jQuery và Pure JS, một là cho bạn nào mới thì có tài liệu đọc thêm, hai là giúp bạn hiểu được sự tương quan, tương đồng, bù trừ nhau giữa JS và jQuery, còn ai biết rồi xem lại cho đỡ bận.
Mẫu code được lấy tại youmightnotneedjquery.com (nghe như 1 thanh niên anti jQuery vậy 😁) độ tương thích từ IE9+ (nói thật giờ còn ông nào mà dùng IE nữa thì nên cho vào sách đỏ đi)
* Ajax
1. Get JSON : Tải dữ liệu được mã hóa JSON từ máy chủ bằng cách sử dụng yêu cầu GET HTTP
// JQUERY
$.getJSON('/my/url', function(data) {
});
// IE9+
var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
// Success!
var data = JSON.parse(request.responseText);
} else {
// We reached our target server, but it returned an error
}
};
request.onerror = function() {
// There was a connection error of some sort
};
request.send();
2. Post : Tải dữ liệu từ máy chủ bằng cách sử dụng yêu cầu HTTP POST
// JQUERY
$.ajax({
type: 'POST',
url: '/my/url',
data: data
});
// IE8+
var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);;
3. Get : Tải dữ liệu từ máy chủ bằng cách sử dụng yêu cầu HTTP GET
// JQUERY
$.ajax({
type: 'GET',
url: '/my/url',
success: function(resp) {
},
error: function() {
}
});
// IE9+
var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
// Success!
var resp = request.responseText;
} else {
// We reached our target server, but it returned an error
}
};
request.onerror = function() {
// There was a connection error of some sort
};
request.send();
* Nhóm hiệu ứng
4. Fade In : Hiển thị các thành phần phù hợp với hiệu ứng rõ dần
// JQUERY
$(el).fadeIn();
// IE9+
function fadeIn(el) {
el.style.opacity = 0;
var last = +new Date();
var tick = function() {
el.style.opacity = +el.style.opacity + (new Date() - last) / 400;
last = +new Date();
if (+el.style.opacity < 1) {
(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
}
};
tick();
}
fadeIn(el);
5. Hide : Ẩn các phần tử phù hợp
// JQUERY
$(el).hide();
// IE9+
el.style.display = 'none';
6. Show : Hiện các phần tử phù hợp
// JQUERY
$(el).hide();
// IE8+
el.style.display = 'none';
* Làm việc với phần tử
7. Add Class : Thêm class cho phần tử
// JQUERY
$(el).addClass(className);
// IE8+
if (el.classList)
el.classList.add(className);
else
el.className += ' ' + className;
8. After : Chèn nội dung, được chỉ định bởi tham số, sau mỗi phần tử trong tập hợp các phần tử phù hợp
// JQUERY
$(el).after(htmlString);
// IE8+
el.insertAdjacentHTML('afterend', htmlString);
9. Append : Chèn nội dung, được chỉ định bởi tham số, vào cuối mỗi phần tử trong tập hợp các phần tử được so khớp.
// JQUERY
$(parent).append(el);
// IE8+
parent.appendChild(el);
10. Before : Chèn nội dung, được chỉ định bởi tham số, trước mỗi phần tử trong tập hợp các phần tử phù hợp
// JQUERY
$(el).before(htmlString);
// IE8+
el.insertAdjacentHTML('beforebegin', htmlString);
11. Children : Lấy con của từng phần tử trong tập hợp các phần tử đã so khớp, được chọn lọc theo tùy chọn
// JQUERY
$(el).children();
// IE9+
el.children
12. Contains : Kiểm tra xem phần tử DOM có phải là phần tử con của phần tử DOM khác không.
// JQUERY
$.contains(el, child);
// IE8+
el !== child && el.contains(child);
13. Contains Selector : Lấy con cháu của từng phần tử trong tập hợp các phần tử phù hợp hiện tại, được lọc bởi bộ chọn, đối tượng jQuery hoặc phần tử.
// JQUERY
$(el).find(selector).length;
// IE8+
el.querySelector(selector) !== null
14. Each : Lặp lại đối tượng jQuery, thực hiện một hàm cho mỗi phần tử được so khớp.
// JQUERY
$(selector).each(function(i, el){
});
// IE9+
var elements = document.querySelectorAll(selector);
Array.prototype.forEach.call(elements, function(el, i){
});
15. Empty : Xóa tất cả các nút con của tập hợp các phần tử được so khớp khỏi DOM
// JQUERY
$(el).empty();
// IE9+
el.innerHTML = '';
16. Filter : Giảm tập hợp các phần tử được so khớp thành các phần tử phù hợp với công cụ chọn hoặc vượt qua kiểm tra của hàm
// JQUERY
$(selector).filter(filterFn);
// IE9+
Array.prototype.filter.call(document.querySelectorAll(selector), filterFn);
16. Find Children : Lấy con cháu của từng phần tử trong tập hợp các phần tử phù hợp hiện tại, được lọc bởi bộ chọn, đối tượng jQuery hoặc phần tử.
// JQUERY
$(el).find(selector);
// IE8+
el.querySelectorAll(selector);
17. Find Elements : Lấy tất cả các phần tử thỏa mãn bộ chọn
// JQUERY
$('.my #awesome selector');
// IE8+
document.querySelectorAll('.my #awesome selector');
18. Get Attributes : Lấy một thuộc tính được chỉ định của phần tử HTML
// JQUERY
$(el).attr('tabindex');
// IE8+
el.getAttribute('tabindex');
18. Get Html : Lấy nội dung HTML của phần tử đầu tiên trong tập hợp các phần tử phù hợp
// JQUERY
$(el).html();
// IE8+
el.innerHTML
19. Get Outer Html : Trả về mã HTML của phần tử hiện tại
// JQUERY
$('<div>').append($(el).clone()).html();
// IE8+
el.outerHTML
20. Get Style : Lấy thuộc tính css của phần tử được chọn
// JQUERY
$(el).css(ruleName);
// IE9+
getComputedStyle(el)[ruleName];
21. Get Text : Lấy nội dung văn bản kết hợp của từng phần tử trong tập hợp các phần tử phù hợp, bao gồm cả các phần tử con của chúng.
// JQUERY
$(el).text();
// IE9+
el.textContent
22. Has Class : Kiểm tra xem phần tử có class được chỉ định không
// JQUERY
$(el).hasClass(className);
// IE8+
if (el.classList)
el.classList.contains(className);
else
new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
23. Matches : Kiểm tra tập hợp các phần tử phù hợp hiện tại với một bộ chọn, phần tử hoặc đối tượng jQuery và trả về true nếu ít nhất một trong các phần tử này khớp với các đối số đã cho
// JQUERY
$(el).is($(otherEl));
// IE8+
el === otherEl
24. Matches Selector
// JQUERY
$(el).is('.my-class');
// IE9+
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');
25. Next : xác định thành phần cùng cấp ngay kế tiếp thành phần được chỉ định
// JQUERY
$(el).next();
// IE9+
el.nextElementSibling
26. Offset : Lấy tọa độ hiện tại của thành phần đầu tiên, hoặc thiết lập các tọa độ của từng thành phần trong tập hợp các thành phần phù hợp liên quan đến văn bản
// JQUERY
$(el).offset();
// IE8+
var rect = el.getBoundingClientRect();
{
top: rect.top + document.body.scrollTop,
left: rect.left + document.body.scrollLeft
}
27. Offset Parent : Lấy một thành phần "tổ tiên" gần nhất có sử dụng thuộc tính position, những thành phần được lấy không phân biệt position: relative, absolute hay fixed
// JQUERY
$(el).offsetParent();
// IE8+
el.offsetParent || el
28. Outer Height : Lấy giá trị chiều cao của thành phần phù hợp, chiều cao này bao gồm border, padding
// JQUERY
$(el).outerHeight();
// IE8+
el.offsetHeight
29. Outer Height With Margin: Lấy giá trị chiều cao của thành phần phù hợp, chiều cao này bao gồm border, padding, margin
// JQUERY
$(el).outerHeight(true);
// IE9+
function outerHeight(el) {
var height = el.offsetHeight;
var style = getComputedStyle(el);
height += parseInt(style.marginTop) + parseInt(style.marginBottom);
return height;
}
outerHeight(el);
30. Outer Width : Lấy giá trị chiều rộng của thành phần phù hợp, chiều rộng này bao gồm border, padding.
// JQUERY
$(el).outerWidth();
// IE8+
el.offsetWidth
31. Outer Width With Margin : Lấy giá trị chiều rộng của thành phần phù hợp, chiều rộng này bao gồm border, padding, margin
// JQUERY
$(el).outerWidth(true);
// IE9+
function outerWidth(el) {
var width = el.offsetWidth;
var style = getComputedStyle(el);
width += parseInt(style.marginLeft) + parseInt(style.marginRight);
return width;
}
outerWidth(el);
32. Parent : Lấy cha của từng phần tử trong tập hợp các phần tử phù hợp hiện tại, được chọn lọc theo bộ chọn.
// JQUERY
$(el).parent();
// IE8+
el.parentNode
33. Position : Nhận tọa độ hiện tại của phần tử đầu tiên trong tập hợp các phần tử đã so khớp, liên quan đến phần tử gốc.
// JQUERY
$(el).position();
// IE8+
{left: el.offsetLeft, top: el.offsetTop}
34. Position Relative To Viewport
// JQUERY
var offset = el.offset();
{
top: offset.top - document.body.scrollTop,
left: offset.left - document.body.scrollLeft
}
// IE8+
el.getBoundingClientRect()
35. Prepend
// JQUERY
$(parent).prepend(el);
{
top: offset.top - document.body.scrollTop,
left: offset.left - document.body.scrollLeft
}
// IE8+
parent.insertBefore(el, parent.firstChild);
36. Prev
// JQUERY
$(el).prev();
// IE9+
el.previousElementSibling
37. Remove
// JQUERY
$(el).remove();
// IE8+
el.parentNode.removeChild(el);
38. Remove Class
// JQUERY
$(el).removeClass(className);
// IE8+
if (el.classList)
el.classList.remove(className);
else
el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
39. Replace From Html
// JQUERY
$(el).replaceWith(string);
// IE8+
el.outerHTML = string;
40. Set Attributes
// JQUERY
$(el).attr('tabindex', 3);
// IE8+
el.setAttribute('tabindex', 3);
41. Set Html
// JQUERY
$(el).html(string);
// IE8+
el.innerHTML = string;
42. Set Style
// JQUERY
$(el).css('border-width', '20px');
// IE8+
// Use a class if possible
el.style.borderWidth = '20px';
43. Set Text
// JQUERY
$(el).text(string);
// IE8+
el.textContent = string;
44. Siblings
// JQUERY
$(el).siblings();
// IE9+
Array.prototype.filter.call(el.parentNode.children, function(child){
return child !== el;
});
45. Toggle Class
// JQUERY
$(el).toggleClass(className);
// IE9+
if (el.classList) {
el.classList.toggle(className);
} else {
var classes = el.className.split(' ');
var existingIndex = classes.indexOf(className);
if (existingIndex >= 0)
classes.splice(existingIndex, 1);
else
classes.push(className);
el.className = classes.join(' ');
}
*Nhóm xử lý sự kiện
46. Off
// JQUERY
$(el).off(eventName, eventHandler);
// IE9+
el.removeEventListener(eventName, eventHandler);
47. On
// JQUERY
$(el).on(eventName, eventHandler);
// IE9+
el.addEventListener(eventName, eventHandler);
48. Ready
// JQUERY
$(document).ready(function(){
});
// IE9+
function ready(fn) {
if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
49. Trigger Custom
// JQUERY
$(el).trigger('my-event', {some: 'data'});
// IE9+
if (window.CustomEvent) {
var event = new CustomEvent('my-event', {detail: {some: 'data'}});
} else {
var event = document.createEvent('CustomEvent');
event.initCustomEvent('my-event', true, true, {some: 'data'});
}
el.dispatchEvent(event);
50. Trigger Native
// JQUERY
$(el).trigger('change');
// IE9+
// For a full list of event types: https://developer.mozilla.org/en-US/docs/Web/API/document.createEvent
var event = document.createEvent('HTMLEvents');
event.initEvent('change', true, false);
el.dispatchEvent(event);
51. Bind
// JQUERY
$.proxy(fn, context);
// IE9+
fn.bind(context);
52. Array Each
// JQUERY
$.each(array, function(i, item){
});
// IE9+
array.forEach(function(item, i){
});
53. Deep Extend
// JQUERY
$.extend(true, {}, objA, objB);
// IE8+
var deepExtend = function(out) {
out = out || {};
for (var i = 1; i < arguments.length; i++) {
var obj = arguments[i];
if (!obj)
continue;
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
if (typeof obj[key] === 'object')
out[key] = deepExtend(out[key], obj[key]);
else
out[key] = obj[key];
}
}
}
return out;
};
deepExtend({}, objA, objB);
54. Extend
// JQUERY
$.extend({}, objA, objB);
// IE8+
var extend = function(out) {
out = out || {};
for (var i = 1; i < arguments.length; i++) {
if (!arguments[i])
continue;
for (var key in arguments[i]) {
if (arguments[i].hasOwnProperty(key))
out[key] = arguments[i][key];
}
}
return out;
};
extend({}, objA, objB);
55. Index Of
// JQUERY
$.inArray(item, array);
// IE9+
array.indexOf(item);
56. Is Array
// JQUERY
$.isArray(arr);
// IE9+
Array.isArray(arr);
57. Map
// JQUERY
$.map(array, function(value, index){
});
// IE9+
array.map(function(value, index){
});
58. Now
// JQUERY
$.now();
// IE9+
Date.now();
59. Parse Html
// JQUERY
$.parseHTML(htmlString);
// IE9+
var parseHTML = function(str) {
var tmp = document.implementation.createHTMLDocument();
tmp.body.innerHTML = str;
return tmp.body.children;
};
parseHTML(htmlString);
60. Parse Json
// JQUERY
$.parseJSON(string);
// IE8+
JSON.parse(string);
61. Trim
// JQUERY
$.trim(string);
// IE9+
string.trim();
62. Type
// JQUERY
$.type(obj);
// IE9+
Object.prototype.toString.call(obj).replace(/^\[object (.+)\]$/, '$1').toLowerCase();
63. Clone
// JQUERY
$(el).clone();
// IE8+
el.cloneNode(true);
Happy Coding !
1. Không vi phạm luật pháp nước CHXHCN Việt Nam
2. Không vi phạm thuần phong mỹ tục Việt Nam
3. Không bàn luận vấn đề liên quan đến tôn giáo, chính trị
4. Không đả kích, chửi bới hay đưa ra những lời nói không phù hợp với mục tiêu của website
5. Không bình luận với mục đích quảng cáo, trao đổi, mua bán
6. Khuyến khích sử dụng Tiếng Việt có dấu, hạn chế sử dụng tiếng lóng, viết tắt
7. Khi cần sự trợ giúp, vui lòng miêu tả chi tiết lỗi và để lại link đính kèm, tránh nói chung chung gây mất thời gian cho đôi bên