Loadding..

Tìm hiểu về jquery và javascript

Tìm hiểu về jquery và javascript

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.

1. Ready

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

2.Ajax

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

3.Fade In

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

4.Hide

-Jquery:

$(el).hide();

-Javascript:

el.style.display = 'none';

5.Show

-Jquery:

$(el).show();

-Javascript:

el.style.display = '';

6.Add Class

-Jquery:

$(el).addClass(className);

-Javascript:

if (el.classList)
  el.classList.add(className);
else
  el.className += ' ' + className;

7.After

-Jquery:

$(el).after(htmlString);

-Javascript:

el.insertAdjacentHTML('afterend', htmlString);

8.Append

-Jquery:

$(parent).append(el);

-Javascript:

parent.appendChild(el);

9.Before

-Jquery:

$(el).before(htmlString);

-Javascript:

el.insertAdjacentHTML('beforebegin', htmlString);

10.Children

-Jquery:

$(el).children();

-Javascript:

el.children

11.Contains Selector

-Jquery:

$(el).find(selector).length;

-Javascript:

el.querySelector(selector) !== null

12.Each

-Jquery:

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

-Javascript:

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

13.Empty

-Jquery:

$(el).empty();

-Javascript:

el.innerHTML = '';

14.Find Children

-Jquery:

$(el).find(selector);

-Javascript:

el.querySelectorAll(selector

15.Find Elements

-Jquery:

$('.my #awesome selector');

-Javascript:

document.querySelectorAll('.my #awesome selector');

16.Get Attributes

-Jquery:

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

-Javascript:

el.getAttribute('tabindex');

17.Get Html

-Jquery:

$(el).html();

-Javascript:

el.innerHTML

18.Get Style

-jquery:

$(el).css(ruleName);

-Javascript:

getComputedStyle(el)[ruleName];

19.Get Text

-Jquery:

$(el).text();

-Javascript:

el.textContent

20.Has Class

-Jquery:

$(el).hasClass(className);

-Javascript:

if (el.classList)
  el.classList.contains(className);
else
  new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);

21.Next

-Jquery:

$(el).next();

-Javascript:

el.nextElementSibling

22.Offset

-Jquery:

$(el).offset();

-Javascript:

var rect = el.getBoundingClientRect();

{
  top: rect.top + document.body.scrollTop,
  left: rect.left + document.body.scrollLeft
}

23.Remove

-Jquery:

$(el).remove();

-Javascript:

el.parentNode.removeChild(el);

24.Remove Class

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

25.Set Attributes

-Jquery:

$(el).attr('tabindex', 3);

-Javascript:

el.setAttribute('tabindex', 3);

26.Set Html

-Jquery:

$(el).html(string);

-Javascript:

el.innerHTML = string;

27.Set Style

-Jquery:

$(el).css('border-width', '20px');

-Javascript:

el.style.borderWidth = '20px';

28.Set Text

-Jquery:

$(el).text(string);

-Javascript:

el.textContent = string;

29.Toggle Class

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

30.Array Each

-Jquery:

$.each(array, function(i, item){

});

-Javascript:

array.forEach(function(item, i){

});

31.Parse Json

-Jquery:

$.parseJSON(string);

-Javascript:

JSON.parse(string);

 

-Tổng kết:

Đâ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
Image

enqtran

I’m enqtran – A coder and blogger :)
[email protected]