10个Jquery常用技巧+原生xhr对象的简单介绍

最近对前端技术也比较感兴趣，看了一些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 高级程序设计》，感觉还不错哦。。