最近对前端技术也比较感兴趣,看了一些js方面的书籍,点滴收获在此和大家讨论分享,不当之处还请赐教~~
1.十个jquery常用技巧:
废话不多说,直接上代码:
//1.返回顶部按钮 //back to top $('a.top').click(function(){ $(document.body).animate({scrollTop:0},800); return false; }); //create an anchor tag <a class="top" href="#">back to top</a> //2.预加载图片 $.preloadImages=function(){ for (var i = 0; i < arguments.length; i++) { //arguments[i] $('<img>').attr('src',arguments[i]); }; }; $.preloadImages('img/hover1.png','img/hover2.png'); //3.检查图片是否加载完成 $('img').load(function(){ console.log('image load successful'); }); //4.自动修改破损图像 $('img').on('error',function(){ $(this).prop('src','img/broken.png'); }); //5.鼠标悬停(hover)切换class属性 //(1) $('.btn').hover(function(){ $(this).addClass('hover'); },function(){ $(this).removeClass('hover'); }); //(2) $('.btn').hover(function(){ $(this).toggleClass('hover'); }); //6.禁用input字段 $('input[type=submit]').prop('disabled',true); $('input[type=submit]').removeAttr('disabled'); //7.阻止链接加载 $('a.no-link').click(function(e){ e.preventDefault(); }); //8.切换fade/slide //fade $('.btn').click(function(){ $('.element').fadeToggle('slow'); }); //toggle $('.btn').click(function(){ $('.element').slideToggle('slow'); }); //9.简单的手风琴效果 //close all panels $('#accordin').find('.content').hide(); //accordin $('#accordin').find('.accordin-header').click(function(){ var next=$(this).next(); next.slideToggle('fast'); $('.content').not(next).slideUp('fast'); return false; }); //10.让两个DIV高度相同 var $columns=$('.column'); var height=0; $columns.each(function(){ if ($(this).height()>height) { height=$(this).height(); }; }); $columns.height(height);
2.关于xhr对象的简单介绍:
//兼容各版本的xhr对象的创建 function createXHR(){ if(typeof XMLHttpRequest!="undefined"){ return new XMLHttpRequest(); }else if(typeof ActiveXObject!="undefined"){ if(typeof arguments.callee.activeXString!="string"){ var versions=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],i,len; for(i=0,len=versions.length;i<len;i++){ try{ new ActiveXObject(versions[i]); arguments.callee.activeXString=versions[i]; break; }catch(ex){ //跳过 } } } return new ActiveXObject(arguments.callee.activeXString); }else{ throw new error("no xhr object available."); } } //发送特定请求 var xhr=createXHR(); xhr.open("get","example.txt",false); xhr.send(null); if((xhr.status>=200&&xhr.status<300)||xhr.status==304){ alert(xhr.responseText); }else{ alert("request was unsuccessful:"+xhr.status); } //readyState的取值含义: //0:未初始化 //1:启动 //2.发送 //3.接收 //4.完成 //必须在调用open()之前指定onreadystatechange事件处理程序 xhr.onreadystatechange=function(){ if(xhr.readyState==4){ if((xhr.status>=200&&xhr.status<300)||xhr.status==304){ alert(xhr.responseText); }else{ alert("request was unsuccessful:"+xhr.status); } } } xhr.open("get","example.txt",true); //自定义请求头部信息 xhr.setRequestHeader("myheader","myvalue"); xhr.send(null); //接收到响应之前取消异步请求 xhr.abor(); //每个参数的名称和值都必须使用encodeURIComponent()进行编码 function addURLParam(url,name,value){ url+=(url.indexOf("?"))==-1?"?":"&"; url+=encodeURIComponent(name)+"="+encodeURIComponent(value); return url; }
推荐一本书:《javascript 高级程序设计》,感觉还不错哦。。