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);