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动态创建div
Sep 25 Javascript
一个JavaScript递归实现反转数组字符串的实例
Oct 14 Javascript
js实现圆盘记速表
Aug 03 Javascript
全屏js头像上传插件源码高清版
Mar 29 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
Jun 07 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
Jul 07 Javascript
Bootstrap布局之栅格系统学习笔记
May 04 Javascript
JScript实现地址选择功能
Aug 15 Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
Oct 08 Javascript
vue-cli脚手架的.babelrc文件用法说明
Sep 11 Javascript
React Native项目框架搭建的一些心得体会
May 28 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
[FAQ]PHP中的一些常识:类篇
2006/10/09 PHP
Yii统计不同类型邮箱数量的方法
2016/10/18 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
学习ExtJS table布局
2009/10/08 Javascript
ext 列表页面关于多行查询的办法
2010/03/25 Javascript
Jquery 获得服务器控件值的方法小结
2010/05/11 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
2012/02/27 Javascript
图片动画横条广告带上下滚动的JS代码
2013/10/25 Javascript
js处理自己不能定义二维数组的方法详解
2014/03/03 Javascript
JavaScript中实现异步编程模式的4种方法
2014/09/24 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
2014/10/14 Javascript
JS实现的手机端精简幻灯片效果
2016/09/05 Javascript
jquery实现全选、不选、反选的两种方法
2016/09/06 Javascript
微信小程序 自己制作小组件实例详解
2016/12/22 Javascript
vue2.0父子组件及非父子组件之间的通信方法
2017/01/21 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
2017/03/17 Javascript
JS自定义函数实现时间戳转换成date的方法示例
2017/08/27 Javascript
基于vue cli 通过命令行传参实现多环境配置
2018/07/12 Javascript
玩转vue的slot内容分发
2018/09/22 Javascript
微信小程序实现录音功能
2019/11/22 Javascript
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
[03:39]2015国际邀请赛主赛事首日精彩回顾
2015/08/05 DOTA
[30:51]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第一局
2016/03/04 DOTA
python使用urllib模块和pyquery实现阿里巴巴排名查询
2014/01/16 Python
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
Python字符串切片操作知识详解
2016/03/28 Python
对python 矩阵转置transpose的实例讲解
2018/04/17 Python
Python解决线性代数问题之矩阵的初等变换方法
2018/12/12 Python
Python识别快递条形码及Tesseract-OCR使用详解
2019/07/15 Python
python tornado修改log输出方式
2019/11/18 Python
scrapy与selenium结合爬取数据(爬取动态网站)的示例代码
2020/09/28 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
2015年领导班子工作总结
2015/05/23 职场文书
2015年英语教研组工作总结
2015/05/23 职场文书
《索溪峪的野》教学反思
2016/02/19 职场文书
2016年庆祝六一儿童节活动总结
2016/04/06 职场文书