Jquery library files are a little bit too large to replace jquery with pure js

The jquery library files are a bit large, and in some cases, you need to minimize the amount of files (file size) loaded, and you need to write in pure js

$('#layer')
document.getElementById('layer')

$('#layer span')
var layer = document.getElementById('layer');
var span = layer.getElementsByTagName('span');

$('#inner').parent()
document.getElementById("inner").parentNode

$(window).width();
document.body.clientWidth

$('#layer').width();
document.getElementById('layer').style.width

$('#wrap').append('<span>a</span>');
var span=document.createElement("span");
span.innerHTML='a';
document.getElementById("wrap").appendChild(span);

$('#wrap span').remove();
deleteSpan();
function deleteSpan(){
var content=document.getElementById("wrap");
var childs=content.getElementsByTagName("span");
if(childs.length > 0){
content.removeChild(childs[childs.length-1]);
deleteSpan();
}
}

$('#wrap').css({'left':'100px'});
var wrap = document.getElementById('wrap');
wrap.style.left = '100px';

$('#banner').hide();
document.getElementById('banner').style.display = 'none';

$('#banner').show();
document.getElementById('banner').style.display = 'block';

$('#people').addClass('people_run2');
document.getElementById("people").classList.add('people_run2');

$('#people').removeClass('people_run1');
document.getElementById("people").classList.remove('people_run1');

$('#number').text(1);
document.getElementById('number').innerHTML = 1;

$.ajax({ 
type: "POST", 
url: 'run.php', 
data: 's='+last_step, 
dataType:"JSON", 
timeout: 2000, 
success: function(data){ 
//To deal with the callback
} 
}); 

//1. Create an XMLHTTPRequest object
var xmlhttp; 
if (window.XMLHttpRequest) { 
//IE7+, Firefox, Chrome, Opera, Safari 
xmlhttp = new XMLHttpRequest; 

//Bug fixes for certain versions of the mozillar browser
if (xmlhttp.overrideMimeType) { 
xmlhttp.overrideMimeType('text/xml'); 
}; 
} else if (window.ActiveXObject){ 
//IE6, IE5 
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
}; 

if(xmlhttp.upload){ 
//2. Callback function
//Onreadystatechange is the event handle function called each time the readyState property changes
xmlhttp.onreadystatechange = function(e){ 
if(xmlhttp.readyState==4){ 
if(xmlhttp.status==200){ 
var json = eval('(' + xmlhttp.responseText + ')'); 
//To deal with the callback
} 
} 
}; 

//3. Set the connection information
//Initializes the HTTP request parameter, but does not send the request.
//The first parameter is the connection mode, the second is the url address, the third true is the asynchronous connection, and the default is asynchronous
//Use post to send data
xmlhttp.open("POST","/run.php",true); 

//4. Send the data and start interacting with the server
//Send the HTTP request, using the arguments passed to the open() method, and if true in the optional request passed to the method, the send sentence executes immediately
//If false (synchronous), send does not execute until the server data is returned
//The get method does not require content in send
var formdata = new FormData(); 
formdata.append("s", last_step); 
xmlhttp.send(formdata); 
}

$('btn').bind({
'touchstart':function(){
}
});
document.getElementById("btn").ontouchstart = function(){
};