| 标题 | jquery库文件略庞大用纯js替换jquery的方法 |
| 内容 | jquery库文件略庞大，在某些情况下，需要尽量减少加载的文件（文件大小），需要用纯js来编写效果 view sourceprint? 01 $('#layer') 02 document.getElementById('layer') 03 04 $('#layer span') 05 var layer = document.getElementById('layer'); 06 var span = layer.getElementsByTagName('span'); 07 08 $('#inner').parent() 09 document.getElementById("inner").parentNode 10 11 $(window).width(); 12 document.body.clientWidth 13 14 $('#layer').width(); 15 document.getElementById('layer').style.width 16 17 $('#wrap').append('<span>a</span>'); 18 var span=document.createElement("span"); 19 span.innerHTML='a'; 20 document.getElementById("wrap").appendChild(span); 21 22 $('#wrap span').remove(); 23 deleteSpan(); 24 function deleteSpan(){ 25 var content=document.getElementById("wrap"); 26 var childs=content.getElementsByTagName("span"); 27 if(childs.length > 0){ 28 content.removeChild(childs[childs.length-1]); 29 deleteSpan(); 30 } 31 } 32 33 $('#wrap').css({'left':'100px'}); 34 var wrap = document.getElementById('wrap'); 35 wrap.style.left = '100px'; 36 37 $('#banner').hide(); 38 document.getElementById('banner').style.display = 'none'; 39 40 $('#banner').show(); 41 document.getElementById('banner').style.display = 'block'; 42 43 $('#people').addClass('people_run2'); 44 document.getElementById("people").classList.add('people_run2'); 45 46 $('#people').removeClass('people_run1'); 47 document.getElementById("people").classList.remove('people_run1'); 48 49 $('#number').text(1); 50 document.getElementById('number').innerHTML = 1; view sourceprint? 01 $.ajax({ 02 type: "POST", 03 url: 'run.php', 04 data: 's='+last_step, 05 dataType:"JSON", 06 timeout: 2000, 07 success: function(data){ 08 //处理回调 09 } 10 }); 11 12 //1.创建XMLHTTPRequest对象 13 var xmlhttp; 14 if (window.XMLHttpRequest) { 15 //IE7+, Firefox, Chrome, Opera, Safari 16 xmlhttp = new XMLHttpRequest; 17 18 //针对某些特定版本的mozillar浏览器的bug进行修正 19 if (xmlhttp.overrideMimeType) { 20 xmlhttp.overrideMimeType('text/xml'); 21 }; 22 } else if (window.ActiveXObject){ 23 //IE6, IE5 24 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 25 }; 26 27 if(xmlhttp.upload){ 28 //2.回调函数 29 //onreadystatechange是每次 readyState 属性改变的时候调用的事件句柄函数 30 xmlhttp.onreadystatechange = function(e){ 31 if(xmlhttp.readyState==4){ 32 if(xmlhttp.status==200){ 33 var json = eval('(' + xmlhttp.responseText + ')'); 34 //处理回调 35 } 36 } 37 }; 38 39 //3.设置连接信息 40 //初始化HTTP请求参数，但是并不发送请求。 41 //第一个参数连接方式，第二是url地址,第三个true是异步连接，默认是异步 42 //使用post方式发送数据 43 xmlhttp.open("POST","/run.php",true); 44 45 //4.发送数据，开始和服务器进行交互 46 //发送 HTTP 请求，使用传递给 open() 方法的参数，以及传递给该方法的可选请求中如果true, send这句话会立即执行 47 //如果是false（同步），send会在服务器数据回来才执行 48 //get方法在send中不需要内容 49 var formdata = new FormData(); 50 formdata.append("s", last_step); 51 xmlhttp.send(formdata); 52 } view sourceprint? 1 $('btn').bind({ 2 'touchstart':function(){ 3 } 4 }); 5 document.getElementById("btn").ontouchstart = function(){ 6 }; |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。