jquery库文件略庞大用纯js替换jquery的方法

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(){
};
(0)

相关推荐

  • Jquery+asp.net后台数据传到前台js进行解析的方法

    所以在解析后台数据的时候,我们需要根据后台的数据情况,特殊处理和对待. 我这里后台用的是asp.net提供的wcf服务,也有ashx一般处理程序.大致原理差不多. C#中我们经常用的对象,有实体对象比如:User:有List集合,一般为返回列表. 复杂点的还有对象嵌套对象或者list集合的.不过没什么差别,只要看你的数据多少来决定是由js处理数据, 还是后台处理了直接返回最终结果. 1.实体对象:返回是对象的话,在js中,直接就是和你后台代码类中的对象数据是一样的. 比如下面代码,就是获取到一个

  • 原生js实现复制对象、扩展对象 类似jquery中的extend()方法

    jq的extend()方法能很方便的实现扩展对象方法,语法如下:$.extend(obj1,boj2,obj3); 现在要实现的是:原生js实现复制对象,扩展对象,类似jq中的extend()方法,具体实例如下: 现有3个对象字面量: var o1={hello:1,old:555}, o2 = { abc: 55555555, hello: 2, fun: function() { alert(111); } }, o3={third:9999}; 实现目标: 复制o1对象,把 o2,o3的对

  • jquery mobile页面跳转后样式丢失js失效的解决方法

    用ajax跳转的时候,从a.html跳转到b.html后,b.html的css以及js都失效了. 方法: 将当前页面b.html需要用到的css以及js放在<page>div内. 原理: 由于jqm的ajax跳转的时候,只会把b.html中<page>内的内容加载进dom,而<page>外的代码都不会加载,所以导致在<page>外的js和css都失效了.

  • jQuery异步获取json数据方法汇总

    jQuery异步获取json数据有2种方式,一个是$.getJSON方法,一个是$.ajax方法.本篇体验使用这2种方式异步获取json数据,然后追加到页面. 在根目录下创建data.json文件: 复制代码 代码如下: {     "one" : "Hello",     "two" : "World" } ■ 通过$.getJSON方法获取json数据 复制代码 代码如下: <script src="Scr

  • js/jquery判断浏览器的方法小结

    JS获取浏览器信息 浏览器代码名称:navigator.appCodeName 浏览器名称:navigator.appName 浏览器版本号:navigator.appVersion 对Java的支持:navigator.javaEnabled() MIME类型(数组):navigator.mimeTypes 系统平台:navigator.platform 插件(数组):navigator.plugins 用户代理:navigator.userAgent js判断IE浏览器的四种方法: 方法一:

  • jquery动态加载js/css文件方法(自写小函数)

    先来看jquery自带的getSrcript文件 方法 $.getScript(url,callback) 实例 复制代码 代码如下: var testVar = 'New JS loaded!'; alert(testVar); function newFun(dynParam) { alert('You just passed '+dynParam+ ' as parameter.'); } 动态调用方法 复制代码 代码如下: <script type="text/javascript

  • jquery和js实现对div的隐藏和显示方法

    jQuery对div的显示和隐藏: 显示: 复制代码 代码如下: $("#id").show() 隐藏: 复制代码 代码如下: $("#id").show() js对div的显示和隐藏: div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白 复制代码 代码如下: style="visibility: none;" document.getElementById("typediv1").style.vi

  • JQuery遍历json数组的3种方法

    一.使用each遍历 复制代码 代码如下: $(function () { var tbody = "";            //------------遍历对象 .each的使用-------------            //对象语法JSON数据格式(当服务器端回调回来的对象数据格式是json数据格式,必须保证JSON的格式要求,回调的对象必须使用eval函数进行转化(否则将得不到Object).本文不作详细介绍服务器端回调的数据问题,我们将直接自定义对象)        

  • 使用jquery动态加载js文件的方法

    方法很简单,这里就不多废话了,直接奉上代码: 复制代码 代码如下: $.extend({      includePath: '',      include: function(file) {         var files = typeof file == "string" ? [file]:file;         for (var i = 0; i < files.length; i++) {             var name = files[i].repl

  • js实现jquery的offset()方法实例

    本文实例讲述了js实现jquery的offset()方法.分享给大家供大家参考.具体分析如下: 用过jQuery的offset()的同学都知道offset().top或offset().left很方便地取得元素相对于整个页面的偏移. 而在js里,没有这样直接的方法,节点的属性offsetTop可以获得该节点相对于父节点的相对偏移,但不能直接获得其绝对偏移,我们可用节点逐层递归向上来相加offsetTop来获得绝对偏移. 复制代码 代码如下: function getOffset(Node, of

随机推荐