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 //處理回調(diào)
    09 }
    10 });
    11
    12 //1.創(chuàng)建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.回調(diào)函數(shù)
    29 //onreadystatechange是每次 readyState 屬性改變的時候調(diào)用的事件句柄函數(shù)
    30 xmlhttp.onreadystatechange = function(e){
    31 if(xmlhttp.readyState==4){
    32 if(xmlhttp.status==200){
    33 var json = eval('(' + xmlhttp.responseText + ')');
    34 //處理回調(diào)
    35 }
    36 }
    37 };
    38
    39 //3.設(shè)置連接信息
    40 //初始化HTTP請求參數(shù)，但是并不發(fā)送請求。
    41 //第一個參數(shù)連接方式，第二是url地址,第三個true是異步連接，默認是異步
    42 //使用post方式發(fā)送數(shù)據(jù)
    43 xmlhttp.open("POST","/run.php",true);
    44
    45 //4.發(fā)送數(shù)據(jù)，開始和服務(wù)器進行交互
    46 //發(fā)送 HTTP 請求，使用傳遞給 open() 方法的參數(shù)，以及傳遞給該方法的可選請求中如果true, send這句話會立即執(zhí)行
    47 //如果是false（同步），send會在服務(wù)器數(shù)據(jù)回來才執(zhí)行
    48 //get方法在send中不需要內(nèi)容
    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 };