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动态创建DOM、表单元素的实现代码
Aug 09 Javascript
js实现文字在按钮上滚动的方法
Aug 20 Javascript
jquery实现的点击翻书效果代码
Nov 04 Javascript
web前端开发upload上传头像js示例代码
Oct 22 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
Feb 10 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
Aug 16 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
Sep 28 Javascript
Vue2.X 通过AJAX动态更新数据
Jul 17 Javascript
微信小程序网络封装(简单高效)
Aug 06 Javascript
ES6知识点整理之Proxy的应用实例详解
Apr 16 Javascript
解决Vue中 父子传值 数据丢失问题
Aug 27 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
Aug 03 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获取input输入框中的值去数据库比较显示出来
2016/11/16 PHP
php语法检查的方法总结
2019/01/21 PHP
Thinkphp 3.2框架使用Redis的方法详解
2019/10/24 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
javascript Firefox与IE 替换节点的方法
2010/02/24 Javascript
javascript event 事件解析
2011/01/31 Javascript
jquery操作select option 的代码小结
2011/06/21 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
2012/12/11 Javascript
js中用window.open()打开多个窗口的name问题
2014/03/13 Javascript
jQuery实用函数用法总结
2014/08/29 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
2016/08/10 Javascript
原生JS实现图片轮播切换效果
2016/12/15 Javascript
移动端点击态处理的三种实现方式
2017/01/12 Javascript
深入理解vue中slot与slot-scope的具体使用
2018/01/26 Javascript
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
2019/09/19 Javascript
Vue.js实现大屏数字滚动翻转效果
2019/11/29 Javascript
在微信小程序中使用mqtt服务的方法
2019/12/13 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
2020/05/09 Javascript
Python socket C/S结构的聊天室应用实现
2014/11/30 Python
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
Python设计模式之享元模式原理与用法实例分析
2019/01/11 Python
Python 使用 docopt 解析json参数文件过程讲解
2019/08/13 Python
Python中PyQt5/PySide2的按钮控件使用实例
2019/08/17 Python
django重新生成数据库中的某张表方法
2019/08/28 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
css3实现元素环绕中心点布局的方法示例
2019/01/15 HTML / CSS
CSS3解析抖音LOGO制作的方法步骤
2019/04/11 HTML / CSS
canvas环形倒计时组件的示例代码
2018/06/14 HTML / CSS
HTML5实现移动端弹幕动画效果
2019/08/01 HTML / CSS
资料员岗位职责
2013/11/17 职场文书
《盲人摸象》教学反思
2014/02/16 职场文书
聘用意向书范本
2014/04/01 职场文书
刑事附带民事上诉状
2015/05/23 职场文书
python 使用pandas读取csv文件的方法
2022/12/24 Python