首页 > Web开发 > 详细

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

时间:2015-12-04 00:50:35      阅读:386      评论:0      收藏:0      [点我收藏+]

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

 

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

原文:http://www.cnblogs.com/lumeiling/p/5017928.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!