简单技巧集合，提升jQuery技能

1.回到顶部按钮：

   通过使用jQuery中的animate和scrollTop方法，你无须插件便可简单的回到顶部动画。

下面是简单的代码：

   //首先创建一个人a标签

     <a class="top" href="#">Back to  top </a>

   //jquery代码

   $('a.top').click(function(e){

   e.preventDefault();

   $(document.body).animate({scrollTop:0},800);

});

//将scrollTop的值改为你想要的scrollbar停止的地方，然后设置在800毫秒内回到顶部。

 

2.Hover上的Class切换：

 // 如果用户的鼠标悬停在页面上的某个可点击元素上时，你想要改变这个元素的视觉表现。

// 可以使用下面这段代码，当用户悬停时，为该元素增加一个class，当用户鼠标移开后移除这个代码。

 

$('.btn').hover(function(){

$(this).addclass('hover');

},function(){

$(this).removeClass('hover');

});

 

//你仅需要增加必须的CSS。如果需要更简单的方式，还可以使用toggleClass方法；

$('.btn').hover(function(){

$(this).toggleClass('hover');

});

//注意：css或许是这个例子更快速的解决方法。

 

 

3.简单的手风琴效果

//代码如下：

$('#accordion').find('.content').hide();

$('#accordion').find('.accordion-header').click(function(){

var next=$(this).next();

next.slideToggle('fast');

$('.content').not(next).slideUp('fast');

return false;

});

 

4.Ajax调用的错误处理

//当某次Ajax调用返回404或500错误，就会执行错误处理，但如果没用定义该处理，其他iquery代码或许会停止工作。可以通过下面

//这段代码定义一个全局Ajax错误处理：

$(document).ajaxError(function(e,xhr,setting,error){

console.log(error);

});

 

5.禁用input字段

//有时想要让表单的提交按钮或其文本输入框变得不可用，直到用户执行了一个特定的行为（例如:"我已阅读该条款"的复选框）；

//增加disabled attribute到你的input，就可以实现自己想要的效果了；

$('input[type="submit"]').prop('disabled',true);

//当你想把disabled的值改为false时，仅需在该input上在运行一次prop方法。

$('input[type="submit"]').prop('disabled',false);