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将DOM节点添加到文档的方法实例分析
Aug 04 Javascript
针对初学者的jQuery入门指南
Aug 15 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 Javascript
相册展示PhotoSwipe.js插件实现
Aug 25 Javascript
JS实现点击链接切换显示隐藏内容的方法
Oct 19 Javascript
帝国cms首页列表页实现点赞功能
Oct 30 Javascript
iView框架问题整理小结
Oct 16 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 Javascript
vue动态注册组件实例代码详解
May 30 Javascript
弱类型语言javascript中 a,b 的运算实例小结
Aug 07 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 Javascript
Vue利用Blob下载原生二进制数组文件
Sep 25 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
全国FM电台频率大全 - 23 四川省
2020/03/11 无线电
php写入数据到CSV文件的方法
2015/03/14 PHP
laravel创建类似ThinPHP中functions.php的全局函数
2016/11/26 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
2007/01/29 Javascript
css transform 3D幻灯片特效实现步骤解读
2013/03/27 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
2015/02/20 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
JS填写银行卡号每隔4位数字加一个空格
2016/12/19 Javascript
js Canvas绘制圆形时钟教程
2017/02/06 Javascript
js实现楼层导航功能
2017/02/23 Javascript
JavaScript实现购物车基本功能
2017/07/21 Javascript
JS实现滑动插件
2020/01/15 Javascript
Vue数字输入框组件示例代码详解
2020/01/15 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
2020/04/20 Javascript
pydev使用wxpython找不到路径的解决方法
2013/02/10 Python
基于python的Paxos算法实现
2019/07/03 Python
django实现支付宝支付实例讲解
2019/10/17 Python
Python全局锁中如何合理运用多线程(多进程)
2019/11/06 Python
Django表单提交后实现获取相同name的不同value值
2020/05/14 Python
Marc O’Polo俄罗斯官方在线商店:德国高端时尚品牌
2019/12/26 全球购物
采购主管工作职责
2013/12/12 职场文书
大学生职业生涯设计书
2014/01/02 职场文书
兰兰过桥教学反思
2014/02/08 职场文书
医院学雷锋活动策划方案
2014/02/15 职场文书
相亲活动方案
2014/08/26 职场文书
公安领导班子四风问题个人整改措施思想汇报
2014/10/09 职场文书
2015年大学班级工作总结
2015/04/28 职场文书
课程设计感想范文
2015/08/11 职场文书
教师个人工作总结范文2015
2015/10/14 职场文书
大学生奖学金获奖感言(范文)
2019/08/15 职场文书
Python selenium模拟网页点击爬虫交管12123违章数据
2021/05/26 Python
Python自动化测试PO模型封装过程详解
2021/06/22 Python
python中的getter与setter你了解吗
2022/03/24 Python
nginx容器方式反向代理实战
2022/04/18 Servers
Go gorilla securecookie库的安装使用详解
2022/08/14 Golang