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作用域和作用域链
Oct 21 Javascript
jQuery中 noConflict() 方法使用
Apr 25 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
May 08 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
Jun 17 Javascript
对javascript继承的理解
Oct 11 Javascript
深入理解选择框脚本[推荐]
Dec 13 Javascript
详解javascript中对数据格式化的思考
Jan 23 Javascript
Bootstrap入门教程一Hello Bootstrap初识
Mar 02 Javascript
浅析前端路由简介以及vue-router实现原理
Jun 01 Javascript
浅谈React之状态(State)
Sep 19 Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 Javascript
JavaScript的Set数据结构详解
Feb 18 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中将汉字转换成拼音的函数代码
2012/09/08 PHP
详解PHP编码转换函数应用技巧
2016/10/22 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
php适配器模式简单应用示例
2019/10/23 PHP
JQuery为页面Dom元素绑定事件及解除绑定方法
2014/04/23 Javascript
ie 7/8不支持trim的属性的解决方案
2014/05/23 Javascript
jQuery中dom元素上绑定的事件详解
2015/04/24 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
JavaScript中闭包的写法和作用详解
2016/06/29 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
2016/08/05 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
2016/08/15 Javascript
深入理解jQuery.data() 的实现方式
2016/11/30 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
2017/05/27 Javascript
jQuery ajax动态生成table功能示例
2017/06/14 jQuery
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
vue无限轮播插件代码实例
2019/05/10 Javascript
JS中async/await实现异步调用的方法
2019/08/28 Javascript
vue实现购物车功能(商品分类)
2020/04/20 Javascript
JS常见内存泄漏及解决方案解析
2020/05/30 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
老生常谈python之鸭子类和多态
2017/06/13 Python
Python实现发送QQ邮件的封装
2017/07/14 Python
Python三种遍历文件目录的方法实例代码
2018/01/19 Python
使用python画个小猪佩奇的示例代码
2018/06/06 Python
简单了解python高阶函数map/reduce
2019/06/28 Python
Django密码系统实现过程详解
2019/07/19 Python
python speech模块的使用方法
2020/09/09 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
如何使用Pytorch搭建模型
2020/10/26 Python
linux面试题参考答案(6)
2014/08/29 面试题
讲解员培训方案
2014/05/04 职场文书
公共场所禁烟标语
2014/06/25 职场文书
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
2014年村官工作总结
2014/11/24 职场文书
2014年信息技术工作总结
2014/12/16 职场文书