Hầu hết các website đều sử dụng thư viện jquery với nhiều tiện ích nhanh gọn lẹ, tuy nhiện nếu một ngày chúng ta không được sử dụng jquery trên website thì sẽ phải code javascript thuần. Có một hàm thông dụng dưới hai cách viết của jquery và javascript mình giới thiệu sau đây.
-Jquery:
$( document ).ready(function() { console.log( "ready!" ); }); $(someElement).on('click', function() { // TODO event handler logic });
-JavaScript:
document.addEventListener('DOMContentLoaded', function () { console.log( "ready!" ); }); someElement.addEventListener('click', function() { // TODO event handler logic });
-Jquery:
$.getJSON('/my/url', function(data) { });
-Javascript:
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();
-Jquery:
$(el).fadeIn();
-Javascript:
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);
-Jquery:
$(el).hide();
-Javascript:
el.style.display = 'none';
-Jquery:
$(el).show();
-Javascript:
el.style.display = '';
-Jquery:
$(el).addClass(className);
-Javascript:
if (el.classList) el.classList.add(className); else el.className += ' ' + className;
-Jquery:
$(el).after(htmlString);
-Javascript:
el.insertAdjacentHTML('afterend', htmlString);
-Jquery:
$(parent).append(el);
-Javascript:
parent.appendChild(el);
-Jquery:
$(el).before(htmlString);
-Javascript:
el.insertAdjacentHTML('beforebegin', htmlString);
-Jquery:
$(el).children();
-Javascript:
el.children
-Jquery:
$(el).find(selector).length;
-Javascript:
el.querySelector(selector) !== null
-Jquery:
$(selector).each(function(i, el){ });
-Javascript:
var elements = document.querySelectorAll(selector); Array.prototype.forEach.call(elements, function(el, i){ });
-Jquery:
$(el).empty();
-Javascript:
el.innerHTML = '';
-Jquery:
$(el).find(selector);
-Javascript:
el.querySelectorAll(selector
-Jquery:
$('.my #awesome selector');
-Javascript:
document.querySelectorAll('.my #awesome selector');
-Jquery:
$(el).attr('tabindex');
-Javascript:
el.getAttribute('tabindex');
-Jquery:
$(el).html();
-Javascript:
el.innerHTML
-jquery:
$(el).css(ruleName);
-Javascript:
getComputedStyle(el)[ruleName];
-Jquery:
$(el).text();
-Javascript:
el.textContent
-Jquery:
$(el).hasClass(className);
-Javascript:
if (el.classList) el.classList.contains(className); else new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
-Jquery:
$(el).next();
-Javascript:
el.nextElementSibling
-Jquery:
$(el).offset();
-Javascript:
var rect = el.getBoundingClientRect(); { top: rect.top + document.body.scrollTop, left: rect.left + document.body.scrollLeft }
-Jquery:
$(el).remove();
-Javascript:
el.parentNode.removeChild(el);
-Jquery:
$(el).removeClass(className);
-Javascript:
if (el.classList) el.classList.remove(className); else el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
-Jquery:
$(el).attr('tabindex', 3);
-Javascript:
el.setAttribute('tabindex', 3);
-Jquery:
$(el).html(string);
-Javascript:
el.innerHTML = string;
-Jquery:
$(el).css('border-width', '20px');
-Javascript:
el.style.borderWidth = '20px';
-Jquery:
$(el).text(string);
-Javascript:
el.textContent = string;
-Jquery:
$(el).toggleClass(className);
-Javascript:
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(' '); }
-Jquery:
$.each(array, function(i, item){ });
-Javascript:
array.forEach(function(item, i){ });
-Jquery:
$.parseJSON(string);
-Javascript:
JSON.parse(string);
Đây chỉ là một số hàm mà khi sử dụng Jquery chúng ta hay dùng và cách viết javascript tương ứng với nó.
Print