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


Posted in Javascript onAugust 12, 2014

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(){
};
Javascript 相关文章推荐
javascript数字格式化通用类 accounting.js使用
Aug 24 Javascript
js中将String转换为number以便比较
Jul 08 Javascript
使用javascript实现判断当前浏览器
Apr 14 Javascript
JS控制层作圆周运动的方法
Jun 20 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
Jan 13 Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 Javascript
利用JS判断客户端类型你应该知道的四种方法
Dec 22 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
Aug 28 Javascript
npm scripts 使用指南详解
Oct 08 Javascript
js常见遍历操作小结
Jun 06 Javascript
layui监听单元格编辑前后交互的例子
Sep 16 Javascript
用javascript读取xml文件读取节点数据
Aug 12 #Javascript
javascript获取checkbox复选框获取选中的选项
Aug 12 #Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
Aug 12 #Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
Aug 12 #Javascript
更快的异步执行(setTimeout多浏览器)
Aug 12 #Javascript
JavaScript Promise启示录
Aug 12 #Javascript
深入理解Javascript中this的作用域
Aug 12 #Javascript
You might like
PHP调试函数和日志记录函数分享
2015/01/31 PHP
JavaScript中的prototype使用说明
2010/04/13 Javascript
一个可拖拽列宽表格实例演示
2012/11/26 Javascript
JavaScript实现x秒后自动跳转到一个页面
2013/01/03 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
基于jQuery实现收缩展开功能
2016/03/18 Javascript
纯js实现手风琴效果
2020/04/17 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
ionic2打包android时gradle无法下载的解决方法
2017/04/05 Javascript
javascript深拷贝的原理与实现方法分析
2017/04/10 Javascript
原生JS实现Ajax跨域请求flask响应内容
2017/10/24 Javascript
spirngmvc js传递复杂json参数到controller的实例
2018/03/29 Javascript
单页面vue引入百度统计的使用方法示例详解
2018/10/13 Javascript
vue登录以及权限验证相关的实现
2019/10/25 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
2019/11/23 Javascript
jQuery实现tab栏切换效果
2020/12/22 jQuery
Python深入学习之特殊方法与多范式
2014/08/31 Python
python操作mysql代码总结
2018/06/01 Python
python查看模块安装位置的方法
2018/10/16 Python
python多进程控制学习小结
2018/10/31 Python
pandas DataFrame 行列索引及值的获取的方法
2019/07/02 Python
Python Selenium 之数据驱动测试的实现
2019/08/01 Python
Django Admin中增加导出CSV功能过程解析
2019/09/04 Python
python和php哪个更适合写爬虫
2020/06/22 Python
宝拉珍选澳大利亚官方购物网站:Paula’s Choice澳大利亚
2016/09/13 全球购物
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
自我鉴定范文
2013/11/10 职场文书
关于环保的建议书
2014/05/12 职场文书
工商管理专业毕业生求职信
2014/05/26 职场文书
领导干部学习“三严三实”思想汇报
2014/09/15 职场文书
2014党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
应聘教师自荐信
2015/03/26 职场文书
经费申请报告
2015/05/15 职场文书
起诉书范文
2015/05/20 职场文书
python实现A*寻路算法
2021/06/13 Python