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

 更新时间:2014年08月12日 17:03:41   投稿:whsnow  
jquery库文件略庞大,因此在某些情况下就需要用纯js替换jquery,需要的朋友可以参考下

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(){
};

相关文章

  • 详解可以用在VS Code中的正则表达式小技巧

    详解可以用在VS Code中的正则表达式小技巧

    这篇文章主要介绍了详解可以用在VS Code中的正则表达式小技巧,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • javascript事件委托的方式绑定详解

    javascript事件委托的方式绑定详解

    我们在学习JavaScript中,难免都会去网上查一些资料,也许偶尔就会遇到“事件委托”,但是,大多数时说的是“事件绑定”,对于“事件委托”,或是不提,或是浅尝辄止,对于我这个比较好奇的人来说,实在很头疼,尤其是想更多的了解“事件委托”的时候
    2015-06-06
  • JavaScript中停止执行setInterval和setTimeout事件的方法

    JavaScript中停止执行setInterval和setTimeout事件的方法

    这篇文章主要介绍了JavaScript中停止执行setInterval和setTimeout事件的方法,本文给出操作实例代码和语法介绍,需要的朋友可以参考下
    2015-05-05
  • TypeScript中的混合(Mixin)示例详解

    TypeScript中的混合(Mixin)示例详解

    由于TypeScrip中的类不支持多继承,所以引入了混合(Mixin)的特性,可以间接实现多继承的效果,这篇文章主要介绍了一文弄懂TypeScript中的混合(Mixin),需要的朋友可以参考下
    2023-09-09
  • JavaScript实现解析INI文件内容的方法

    JavaScript实现解析INI文件内容的方法

    这篇文章主要介绍了JavaScript实现解析INI文件内容的方法,结合实例形式分析了javascript通过自定义函数实现针对ini文件解析操作的相关处理技巧,需要的朋友可以参考下
    2016-11-11
  • 微信小程序实现modal弹出框遮罩层组件(可带文本框)

    微信小程序实现modal弹出框遮罩层组件(可带文本框)

    这篇文章主要给大家介绍了关于微信小程序实现modal弹出框遮罩层组件(可带文本框)的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • js中hash和ico的关联分析

    js中hash和ico的关联分析

    这篇文章主要介绍了js中hash和ico的关联分析,以实例形式分析了location.hash与ico的加载顺序关系,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • js实现的Easy Tabs选项卡用法实例

    js实现的Easy Tabs选项卡用法实例

    这篇文章主要介绍了js实现的Easy Tabs选项卡用法,以完整实例形式较为详细的分析了JavaScript鼠标事件动态操作页面元素样式的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • 微信小程序canvas绘制圆角base64图片的实现

    微信小程序canvas绘制圆角base64图片的实现

    这篇文章主要介绍了微信小程序canvas绘制圆角base64图片的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • 详解Javascript 基于长连接的服务框架问题

    详解Javascript 基于长连接的服务框架问题

    本文针对经常使用长连接进行消息收发的应答场景,采用 Websocket 长连接作为服务监听的对象,模拟了一套类 http 服务框架,通过实例代码介绍了Javascript 基于长连接的服务框架,需要的朋友可以参考下
    2022-07-07

最新评论