JQ与JS等价代码

选择器

• jQuery

  var els = $(".el");
  

• 原生方法

  var els = document.querySelectorAll(".el");
  

• 函数法

  var $ = function (el) {  
    return document.querySelectorAll(el);  
  }  
  var els = $('.el');
  

创建元素

• jQuery

  var newEl = $('<div/>');
  

• 原生方法

  var newEl = document.createElement('div');
  

添加事件监听器

• jQuery

  $('.el').on('event', function() {  
    // 事件处理逻辑
  });  
  

• 原生方法

  [].forEach.call(document.querySelectorAll('.el'), function (el) {  
    el.addEventListener('event', function() {  
      // 事件处理逻辑
    }, false);  
  });
  

设置/获取属性

• jQuery

  $('.el').filter(':first').attr('key', 'value');  
  $('.el').filter(':first').attr('key');  
  

• 原生方法

  document.querySelector('.el').setAttribute('key', 'value');  
  document.querySelector('.el').getAttribute('key');
  

添加/移除/切换类

• jQuery

  $('.el').addClass('class');  
  $('.el').removeClass('class');  
  $('.el').toggleClass('class');  
  

• 原生方法

  document.querySelector('.el').classList.add('class');  
  document.querySelector('.el').classList.remove('class');  
  document.querySelector('.el').classList.toggle('class');
  

插入节点

• jQuery

  $('.el').append($('<div/>'));
  

• 原生方法

  document.querySelector('.el').appendChild(document.createElement('div'));
  

克隆节点

• jQuery

  var clonedEl = $('.el').clone();
  

• 原生方法

  var clonedEl = document.querySelector('.el').cloneNode(true);
  

移除节点

• jQuery

  $('.el').remove();
  

• 原生方法

  function remove(el) {  
    var toRemove = document.querySelector(el);  
    toRemove.parentNode.removeChild(toRemove);  
  }
  remove('.el');
  

获取父元素

• jQuery

  $('.el').parent();
  

• 原生方法

  document.querySelector('.el').parentNode;
  

上一个/下一个元素

• jQuery

  $('.el').prev();  
  $('.el').next();
  

• 原生方法

  document.querySelector('.el').previousElementSibling;  
  document.querySelector('.el').nextElementSibling;
  

XHR 或 AJAX

• jQuery

  $.get('url', function (data) {  
    // 处理响应数据
  });  
  $.post('url', {data: data}, function (data) {  
    // 处理响应数据
  });
  

• 原生方法
  GET 请求

  var xhr = new XMLHttpRequest();  
  xhr.open('GET', url);  
  xhr.onreadystatechange = function () {  
    if (xhr.readyState === 4 && xhr.status === 200) {  
      // 处理响应数据
    }  
  }  
  xhr.send();
  

  POST 请求

  var xhr = new XMLHttpRequest();  
  xhr.open('POST', url);  
  xhr.setRequestHeader('Content-Type', 'application/json');  
  xhr.onreadystatechange = function () {  
    if (xhr.readyState === 4 && xhr.status === 200) {  
      // 处理响应数据
    }  
  }  
  xhr.send(JSON.stringify({data: data}));