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 相关文章推荐
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
Jun 27 Javascript
js中this的用法实例分析
Jan 10 Javascript
JavaScript使用yield模拟多线程的方法
Mar 19 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 Javascript
js实现带缓动动画的导航栏效果
Jan 16 Javascript
vue如何使用 Slot 分发内容实例详解
Sep 05 Javascript
基于wordpress的ajax写法详解
Jan 02 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
Sep 02 Javascript
Vue使用NProgress的操作过程解析
Oct 10 Javascript
优化Vue中date format的性能详解
Jan 13 Javascript
JS继承最简单的理解方式
Mar 31 Javascript
gojs实现蚂蚁线动画效果
Feb 18 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小技巧之JS和CSS优化工具Minify的使用方法
2014/05/19 PHP
php实现中文字符截取防乱码方法汇总
2015/04/29 PHP
php线性表的入栈与出栈实例分析
2015/06/12 PHP
PHP命名空间namespace用法实例分析
2016/09/27 PHP
PHP strripos函数用法总结
2019/02/11 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
js类后台管理菜单类-MenuSwitch
2007/09/12 Javascript
菜鸟javascript基础整理1
2010/12/06 Javascript
一个可拖拽列宽表格实例演示
2012/11/26 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
JavaScript中的Math.LN2属性用法详解
2015/06/12 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
2016/09/14 Javascript
vue 利用路由守卫判断是否登录的方法
2018/09/29 Javascript
原生js实现针对Dom节点的CRUD操作示例
2019/08/26 Javascript
Vue实现简单计算器案例
2020/02/25 Javascript
vue实现瀑布流组件滑动加载更多
2020/03/10 Javascript
[03:14]DOTA2斧王 英雄基础教程
2013/11/26 DOTA
Python ZipFile模块详解
2013/11/01 Python
使用Python脚本将Bing的每日图片作为桌面的教程
2015/05/04 Python
python读取与写入csv格式文件的示例代码
2017/12/16 Python
Python3 pip3 list 出现 DEPRECATION 警告的解决方法
2019/02/16 Python
Django urls.py重构及参数传递详解
2019/07/23 Python
python pycharm的安装及其使用
2019/10/11 Python
Python爬虫如何应对Cloudflare邮箱加密
2020/06/24 Python
css3的transform造成z-index无效解决方案
2014/12/04 HTML / CSS
StudentUniverse英国:学生航班、酒店和旅游
2019/08/25 全球购物
文秘自荐信
2013/10/20 职场文书
工程建设实施方案
2014/03/14 职场文书
汉语专业毕业生自荐信
2014/07/06 职场文书
党员干部形式主义个人整改措施
2014/09/17 职场文书
文艺节目主持词
2015/07/06 职场文书
python爬虫--selenium模块
2021/03/31 Python
Python实战之实现康威生命游戏
2021/04/26 Python
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android