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 相关文章推荐
juqery 学习之三 选择器 简单 内容
Nov 25 Javascript
jquery验证表单中的单选与多选实例
Aug 18 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
Nov 17 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
Nov 19 Javascript
BooStrap对导航条的改造实践小结
Sep 21 Javascript
关于js原型的面试题讲解
Sep 25 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
Feb 19 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
Jun 03 Javascript
Vue2.0 v-for filter列表过滤功能的实现
Sep 07 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
Sep 14 Javascript
React组件设计模式之组合组件应用实例分析
Apr 29 Javascript
JavaScript实现复选框全选功能
Apr 11 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执行速度全攻略
2006/10/09 PHP
一个用于网络的工具函数库
2006/10/09 PHP
用PHP实现多服务器共享SESSION数据的方法
2007/03/16 PHP
免费手机号码归属地API查询接口和PHP使用实例分享
2014/04/10 PHP
PHP面向对象程序设计之对象生成方法详解
2016/12/02 PHP
用Javascript实现UTF8编码转换成gb2312编码
2006/12/22 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
2013/03/19 Javascript
A标签中通过href和onclick传递的this对象实现思路
2013/04/19 Javascript
jQuery中children()方法用法实例
2015/01/07 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
基于jQuery实现动态数字展示效果
2015/08/12 Javascript
使用jQuery加载html页面到指定的div实现方法
2016/07/13 Javascript
AngularJS通过$sce输出html的方法
2016/09/22 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
2017/01/26 Javascript
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
js实现二级联动简单实例
2020/01/11 Javascript
javascript 易错知识点实例小结
2020/04/25 Javascript
js+cavans实现图片滑块验证
2020/09/29 Javascript
Python、Javascript中的闭包比较
2015/02/04 Python
Python2.x版本中maketrans()方法的使用介绍
2015/05/19 Python
Python django使用多进程连接mysql错误的解决方法
2018/10/08 Python
python实现把两个二维array叠加成三维array示例
2019/11/29 Python
python解包用法详解
2021/02/17 Python
医院护士专业个人的求职信
2013/12/09 职场文书
村捐赠仪式答谢词
2014/01/21 职场文书
护士毕业实习感言
2014/03/05 职场文书
计算机专业毕业生自荐信范文
2014/03/06 职场文书
租房合同协议书
2014/04/09 职场文书
旅游文化节策划方案
2014/06/06 职场文书
12.4法制宣传日活动总结
2014/08/26 职场文书
副乡长群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
群众路线个人整改措施
2014/10/24 职场文书
2014年教育工作总结
2014/11/26 职场文书
新生入学欢迎词
2015/01/26 职场文书
监护人证明
2015/06/19 职场文书
小学英语新课改心得体会
2016/01/22 职场文书