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 相关文章推荐
JS 文件本身编码转换 图文教程
Oct 12 Javascript
为jQuery.Treeview添加右键菜单的实现代码
Oct 22 Javascript
jQuery.Validate验证库的使用介绍
Apr 26 Javascript
js实现交换运动效果的方法
Apr 10 Javascript
详解javascript的变量与标识符
Jan 04 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
Nov 11 Javascript
vue.js实现价格格式化的方法
May 23 Javascript
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
React注册倒计时功能的实现
Sep 06 Javascript
three.js搭建室内场景教程
Dec 30 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
JavaScript实现PC端横向轮播图
Feb 07 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
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
PHP采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
PHP实现数据四舍五入的方法小结【4种方法】
2019/03/27 PHP
javascript 节点遍历函数
2010/03/28 Javascript
jquery 回车事件实现代码
2011/08/23 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
2013/06/06 Javascript
Seajs的学习笔记
2014/03/04 Javascript
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
JavaScript改变CSS样式的方法汇总
2015/05/07 Javascript
js精准的倒计时函数分享
2016/06/29 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
详解如何较好的使用js
2016/12/16 Javascript
基于jQuery实现选项卡效果
2017/01/04 Javascript
Webpack的dll功能使用
2018/06/28 Javascript
NodeJS模块与ES6模块系统语法及注意点详解
2019/01/04 NodeJs
Vue实现拖放排序功能的实例代码
2019/07/08 Javascript
详解基于原生JS验证表单组件xy-form
2019/08/20 Javascript
vue制作抓娃娃机的示例代码
2020/04/17 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
python 转换 Javascript %u 字符串为python unicode的代码
2016/09/06 Python
python实现excel读写数据
2021/03/02 Python
python使用Matplotlib绘制分段函数
2018/09/25 Python
使用python爬取抖音视频列表信息
2019/07/15 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
Python3 main函数使用sys.argv传入多个参数的实现
2019/12/25 Python
python从内存地址上加载python对象过程详解
2020/01/08 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
如何将json数据转换为python数据
2020/09/04 Python
python rsa-oaep加密的示例代码
2020/09/23 Python
基于canvas的骨骼动画的示例代码
2018/06/12 HTML / CSS
全球最大的网上自行车商店:Chain Reaction Cycles
2016/12/02 全球购物
校园网站的创业计划书范文
2013/12/30 职场文书
岗位职责风险防控
2014/02/18 职场文书
2015年入党决心书
2015/02/05 职场文书
公积金贷款承诺书
2015/04/30 职场文书
如何制作自己的原生JavaScript路由
2021/05/05 Javascript