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参数的小问题
Mar 02 Javascript
基于jquery实现图片广告轮换效果代码
Jul 07 Javascript
JSON+HTML实现国家省市联动选择效果
May 18 Javascript
JavaScript获取DOM元素的11种方法总结
Apr 25 Javascript
JavaScript中的some()方法使用详解
Jun 09 Javascript
javascript最基本的函数汇总
Jun 25 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
Sep 14 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
Mar 03 Javascript
angularjs中回车键触发某一事件的方法
Apr 24 Javascript
Javascript ES6中数据类型Symbol的使用详解
May 02 Javascript
vue-lazyload图片延迟加载插件的实例讲解
Feb 09 Javascript
vue项目中实现的微信分享功能示例
Jan 21 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 heredoc和phpwind的模板技术使用方法小结
2008/03/28 PHP
php将数据库中的电话号码读取出来并生成图片
2008/08/31 PHP
2014过年倒计时示例
2014/01/31 PHP
通过php添加xml文档内容的方法
2015/01/23 PHP
php使用post数组的键值创建同名变量并赋值的方法
2015/04/03 PHP
php遍历类中包含的所有元素的方法
2015/05/12 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
jquery获取多个checkbox的值异步提交给php的方法
2015/06/24 PHP
laravel实现批量更新多条记录的方法示例
2017/10/22 PHP
PHP获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
php中青蛙跳台阶的问题解决方法
2018/10/14 PHP
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
JavaScript delete操作符应用实例
2009/01/13 Javascript
JS 自定义函数缺省值的设置方法
2010/05/05 Javascript
artDialog+plupload实现多文件上传
2016/07/19 Javascript
js实现统计字符串中特定字符出现个数的方法
2016/08/02 Javascript
Javascript 链式作用域详细介绍
2017/02/23 Javascript
Javascript中this关键字指向问题的测试与详解
2017/08/11 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
2018/05/06 Javascript
vue中axios的封装问题(简易版拦截,get,post)
2018/06/15 Javascript
在vue中实现给每个页面顶部设置title
2020/07/29 Javascript
Python linecache.getline()读取文件中特定一行的脚本
2008/09/06 Python
Python中的模块导入和读取键盘输入的方法
2015/10/16 Python
Python实现获取本地及远程图片大小的方法示例
2018/07/21 Python
python滑块验证码的破解实现
2019/11/10 Python
pandas和spark dataframe互相转换实例详解
2020/02/18 Python
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
介绍一下sql server的安全性
2014/08/10 面试题
西式结婚主持词
2014/03/14 职场文书
闭幕式主持词
2014/04/02 职场文书
2014年国庆标语
2014/06/30 职场文书
2014幼儿园教师师德师风演讲稿
2014/09/10 职场文书
个人自查自纠材料
2014/10/14 职场文书
2014年高三班主任工作总结
2014/12/05 职场文书
初级职称评定工作总结
2015/08/13 职场文书
Python 把两层列表展开平铺成一层(5种实现方式)
2021/04/07 Python