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版代码高亮
Jun 26 Javascript
jquery默认校验规则整理
Mar 24 Javascript
jQuery时间日期三级联动(推荐)
Nov 27 Javascript
原生js实现键盘控制div移动且解决停顿问题
Dec 05 Javascript
Vue.js学习之计算属性
Jan 22 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
Feb 10 Javascript
js基于myFocus实现轮播图效果
Feb 14 Javascript
vue 注册组件的使用详解
May 05 Javascript
node中modules.exports与exports导出的区别
Jun 08 Javascript
js实现橱窗展示效果
Jan 11 Javascript
javascript中的with语句学习笔记及用法
Feb 17 Javascript
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
用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/10/08 PHP
PHP在线调试执行的实现方法(附demo源码)
2016/04/28 PHP
php使用strip_tags()去除html标签仍有空白的解决方法
2016/07/28 PHP
Laravel框架创建路由的方法详解
2019/09/04 PHP
解决Laravel无法使用COOKIE和SESSION的问题
2019/10/16 PHP
IE8 兼容性问题(属性名区分大小写)
2009/06/04 Javascript
js 日期转换成中文格式的函数
2009/07/07 Javascript
支持ie与FireFox的剪切板操作代码
2009/09/28 Javascript
清空上传控件input file的值
2010/07/03 Javascript
Jquery easyUI 更新行示例
2014/03/06 Javascript
jQuery遍历json中多个map的方法
2015/02/12 Javascript
jQuery动态效果显示人物结构关系图的方法
2015/05/07 Javascript
jQuery实现简洁的导航菜单效果
2015/11/23 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
2016/05/15 Javascript
详解ES6中的let命令
2020/04/05 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
vue项目中api接口管理总结
2018/04/20 Javascript
微信小程序如何获取用户收货地址
2018/11/27 Javascript
JavaScript时间日期操作实例小结【5个示例】
2018/12/22 Javascript
JS实现网页时钟特效
2020/03/25 Javascript
Python实现base64编码的图片保存到本地功能示例
2018/06/22 Python
示例详解Python3 or Python2 两者之间的差异
2018/08/23 Python
Python实现的矩阵转置与矩阵相乘运算示例
2019/03/26 Python
python中Lambda表达式详解
2019/11/20 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
华为python面试题
2016/05/03 面试题
学生学习总结的自我评价
2013/10/22 职场文书
大四学生毕业自荐信
2013/11/07 职场文书
运动会100米解说词
2014/01/23 职场文书
就业推荐表导师评语
2014/12/31 职场文书
2016社区平安家庭事迹材料
2016/02/26 职场文书
教师实习自我鉴定总结
2019/08/20 职场文书
《围炉夜话》110句人生箴言,精辟有内涵,引人深思
2019/10/23 职场文书
导游词之海南天涯海角
2019/12/05 职场文书
Python面向对象编程之类的概念
2021/11/01 Python
Nginx中使用Lua脚本与图片的缩略图处理的实现
2022/03/18 Servers