jquery库文件略庞大,在某些情况下,需要尽量减少加载的文件(文件大小),需要用纯js来编写效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
$( '#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;
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
$.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);
}
|
1
2
3
4
5
6
|
$( 'btn' ).bind({
'touchstart' : function (){
}
});
document.getElementById( "btn" ).ontouchstart = function (){
};
|