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截取固定长度的中英文字符的简单实例
Nov 22 Javascript
js判断ie版本号的简单实现代码
Mar 05 Javascript
推荐一个封装好的getElementsByClassName方法
Dec 02 Javascript
JavaScript中使用Object.create()创建对象介绍
Dec 30 Javascript
全面解析Bootstrap排版使用方法(文字样式)
Nov 30 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
Nov 22 Javascript
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
layui框架table 数据表格的方法级渲染详解
Aug 19 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
Oct 12 Javascript
JS变量提升原理与用法实例浅析
May 22 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
Jul 14 Javascript
Vue OpenLayer 为地图绘制风场效果
Apr 24 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
Codeigniter控制器controller继承问题实例分析
2016/01/19 PHP
PHP编程实现多维数组按照某个键值排序的方法小结【2种方法】
2017/04/27 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
JS 页面自动加载函数(兼容多浏览器)
2009/05/18 Javascript
jQuery中val()方法用法实例
2014/12/25 Javascript
JavaScript返回网页中锚点数目的方法
2015/04/03 Javascript
jQuery实现hover合成事件的方法
2015/08/06 Javascript
javascript实现拖放效果
2015/12/16 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
2016/09/14 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
2017/02/20 Javascript
详解ECMAScript6入门--Class对象
2017/04/27 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
2017/07/13 Javascript
jquery中有哪些api jQuery主要API
2017/11/20 jQuery
Vue-路由导航菜单栏的高亮设置方法
2018/03/17 Javascript
Vue数据监听方法watch的使用
2018/03/28 Javascript
vue内置指令详解
2018/04/03 Javascript
JS中移除非数字最多保留一位小数
2018/05/09 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
2019/02/19 jQuery
详解vue项目打包步骤
2019/03/29 Javascript
一文快速详解前端框架 Vue 最强大的功能
2019/05/21 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
[51:06]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS Liquid
2018/03/30 DOTA
python单线程实现多个定时器示例
2014/03/30 Python
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
python实现飞机大战
2018/09/11 Python
python 获取域名到期时间的方法步骤
2021/02/10 Python
CSS3 实现弹跳的小球动画
2020/10/26 HTML / CSS
KOHLER科勒美国官网:国际著名卫浴橱柜领先品牌
2020/06/27 全球购物
PHP面试题大全
2015/10/16 面试题
请问软件开发中的设计模式你会使用哪些
2015/05/13 面试题
物流专业大学生的自我鉴定
2013/11/13 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
交通事故调解协议书
2015/05/20 职场文书
2016年中学端午节主题活动总结
2016/04/01 职场文书
Element-ui Layout布局(Row和Col组件)的实现
2021/12/06 Vue.js