jquery库文件略庞大，在某些情况下，需要尽量减少加载的文件（文件大小），需要用纯js来编写效果

view source

print?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 source

print?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 source

print?1 $('btn').bind({

2 'touchstart':function(){

3 }

4 });

5 document.getElementById("btn").ontouchstart = function(){

6 };

更多信息请查看IT技术专栏