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 相关文章推荐
Jquery 例外被抛出且未被接住原因介绍
Sep 04 Javascript
node.js中的socket.io的广播消息
Dec 15 Javascript
js实现带有介绍的Select列表菜单实例
Aug 18 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
jquery中实现时间戳与日期相互转换
Apr 12 Javascript
Bootstrap每天必学之标签页(Tab)插件
Aug 09 Javascript
使用JS组件实现带ToolTip验证框的实例代码
Aug 23 Javascript
vue中倒计时组件的实例代码
Jul 06 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 Javascript
layer弹出子iframe层父子页面传值的实现方法
Nov 22 Javascript
axios异步提交表单数据的几种方法
Aug 11 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
Aug 13 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中的array_filter()函数去掉多维空值的代码分享
2012/09/07 PHP
PHP实现过滤各种HTML标签
2015/05/17 PHP
PHP使用缓存即时输出内容(output buffering)的方法
2015/08/03 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
JXTree对象,读取外部xml文件数据,生成树的函数
2007/04/02 Javascript
JQuery 表格操作(交替显示、拖动表格行、选择行等)
2009/07/29 Javascript
jQuery版仿Path菜单效果
2011/12/15 Javascript
JS中的public和private对象,即static修饰符
2012/01/18 Javascript
Javascript访问器属性实例分析
2014/12/30 Javascript
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
javascript设计模式之对象工厂函数与构造函数详解
2015/07/30 Javascript
jquery采用oop模式class类的使用示例
2016/01/22 Javascript
jQuery.uploadify文件上传组件实例讲解
2016/09/23 Javascript
基于AngularJS实现表单验证功能
2017/07/28 Javascript
vue教程之toast弹框全局调用示例详解
2020/08/24 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
Vue与Node.js通过socket.io通信的示例代码
2018/07/25 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
[50:20]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第四局
2016/03/06 DOTA
Python简单实现enum功能的方法
2016/04/25 Python
python实现手机通讯录搜索功能
2018/02/22 Python
浅析PHP与Python进行数据交互
2018/05/15 Python
Django中如何使用sass的方法步骤
2019/07/09 Python
python 字典的打印实现
2019/09/26 Python
python tkinter之 复选、文本、下拉的实现
2020/03/04 Python
如何基于线程池提升request模块效率
2020/04/18 Python
CSS书写规范、顺序和命名规则
2014/03/06 HTML / CSS
amaze ui 的使用详细教程
2020/08/19 HTML / CSS
NBA欧洲商店(英国):NBA Europe Store UK
2018/07/27 全球购物
餐饮营销方案
2014/02/23 职场文书
老公保证书怎么写
2015/02/26 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书
实习报告范文
2019/07/30 职场文书
创业计划书之暑假培训班
2019/11/09 职场文书
《思路决定出路》读后感3篇
2019/12/11 职场文书
万能密码的SQL注入漏洞其PHP环境搭建及防御手段
2021/09/04 SQL Server