jquery库文件略庞大用纯js替换jquery的方法

前端技术 2023/09/05 JavaScript

jquery库文件略庞大,在某些情况下,需要尽量减少加载的文件(文件大小),需要用纯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){ 
//处理回调 
} 
}); 

//1.创建XMLHTTPRequest对象 
var xmlhttp; 
if (window.XMLHttpRequest) { 
//IE7+, Firefox, Chrome, Opera, Safari 
xmlhttp = new XMLHttpRequest; 

//针对某些特定版本的mozillar浏览器的bug进行修正 
if (xmlhttp.overrideMimeType) { 
xmlhttp.overrideMimeType(\'text/xml\'); 
}; 
} else if (window.ActiveXObject){ 
//IE6, IE5 
xmlhttp = new ActiveXObject(\"Microsoft.XMLHTTP\"); 
}; 

if(xmlhttp.upload){ 
//2.回调函数 
//onreadystatechange是每次 readyState 属性改变的时候调用的事件句柄函数 
xmlhttp.onreadystatechange = function(e){ 
if(xmlhttp.readyState==4){ 
if(xmlhttp.status==200){ 
var json = eval(\'(\' + xmlhttp.responseText + \')\'); 
//处理回调 
} 
} 
}; 

//3.设置连接信息 
//初始化HTTP请求参数,但是并不发送请求。 
//第一个参数连接方式,第二是url地址,第三个true是异步连接,默认是异步 
//使用post方式发送数据 
xmlhttp.open(\"POST\",\"/run.php\",true); 

//4.发送数据,开始和服务器进行交互 
//发送 HTTP 请求,使用传递给 open() 方法的参数,以及传递给该方法的可选请求中如果true, send这句话会立即执行 
//如果是false(同步),send会在服务器数据回来才执行 
//get方法在send中不需要内容 
var formdata = new FormData(); 
formdata.append(\"s\", last_step); 
xmlhttp.send(formdata); 
}
$(\'btn\').bind({
\'touchstart\':function(){
}
});
document.getElementById(\"btn\").ontouchstart = function(){
};

本文地址:https://www.stayed.cn/item/11860

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。