以下是jQuery和JavaScript实现相同操作的等价代码。

 

选择元素
 Javascript代码

 

1.// jQuery   
2.var els = $('.el');   
3.  
4.// 原生方法   
5.var els = document.querySelectorAll('.el');   
6.  
7.// 函数法   
8.var $ = function (el) {   
9.  return document.querySelectorAll(el);   
10.}   
11.  
12.var els = $('.el');   
13.  
14.// 或者使用regex-based micro-selector库，地址：http://jsperf.com/micro-selector-libraries  
// jQuery
var els = $('.el');

// 原生方法
var els = document.querySelectorAll('.el');

// 函数法
var $ = function (el) {
  return document.querySelectorAll(el);
}

var els = $('.el');

// 或者使用regex-based micro-selector库，地址：http://jsperf.com/micro-selector-libraries

创建元素

Javascript代码

 

1.// jQuery   
2.var newEl = $('<div/>');   
3.  
4.// 原生方法   
5.var newEl = document.createElement('div');  
// jQuery
var newEl = $('<div/>');

// 原生方法
var newEl = document.createElement('div');

 

添加事件监听器

Javascript代码

 

1.// jQuery   
2.$('.el').on('event', function() {   
3.  
4.});   
5.  
6.// 原生方法   
7.[].forEach.call(document.querySelectorAll('.el'), function (el) {   
8.  el.addEventListener('event', function() {   
9.  
10.  }, false);   
11.});  

 

设置/获取属性

Javascript代码

 

1.// jQuery   
2.$('.el').filter(':first').attr('key', 'value');   
3.$('.el').filter(':first').attr('key');   
4.  
5.// 原生方法   
6.document.querySelector('.el').setAttribute('key', 'value');   
7.document.querySelector('.el').getAttribute('key');  

 

添加/移除/切换类

Javascript代码

1.// jQuery   
2.$('.el').addClass('class');   
3.$('.el').removeClass('class');   
4.$('.el').toggleClass('class');   
5.  
6.// 原生方法   
7.document.querySelector('.el').classList.add('class');   
8.document.querySelector('.el').classList.remove('class');   
9.document.querySelector('.el').classList.toggle('class');  

附加内容（Append）

1.// jQuery   
2.$('.el').append($('<div/>'));   
3.  
4.// 原生方法   
5.document.querySelector('.el').appendChild(document.createElement('div'));  

克隆元素

1.// jQuery   
2.var clonedEl = $('.el').clone();   
3.  
4.// 原生方法   
5.var clonedEl = document.querySelector('.el').cloneNode(true);  

移除元素

 

1.// jQuery   
2.$('.el').remove();   
3.  
4.// 原生方法   
5.remove('.el');   
6.  
7.function remove(el) {   
8.  var toRemove = document.querySelector(el);   
9.  
10.  toRemove.parentNode.removeChild(toRemove);   
11.}  

 

获取父元素

 

1.// jQuery   
2.$('.el').parent();   
3.  
4.// 原生方法   
5.document.querySelector('.el').parentNode;  

 

上一个/下一个元素

 

// jQuery   
2.$('.el').prev();   
3.$('.el').next();   
4.  
5.// 原生方法   
6.document.querySelector('.el').previousElementSibling;   
7.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 (data) {   
  
}   
xhr.send();   
  
// post   
var xhr = new XMLHttpRequest()   
  
xhr.open('POST', url);   
23.xhr.onreadystatechange = function (data) {   
  
}   
xhr.send({data: data});  
// jQuery
$.get('url', function (data) {

});
$.post('url', {data: data}, function (data) {

});

// 原生方法
// get
var xhr = new XMLHttpRequest();

xhr.open('GET', url);
xhr.onreadystatechange = function (data) {

}
xhr.send();

// post
var xhr = new XMLHttpRequest()

xhr.open('POST', url);
xhr.onreadystatechange = function (data) {

}
xhr.send({data: data});