jquery常用的12个小功能
jquery12个常用功能极好的，快来围观！
返回顶部
使用JQuery的animate和scrollTop方法可以创建简单地返回顶部的动画：
//Backtotop
$('a.top').click(function(e){
e.preventDefault();
$(document.body).animate({scrollTop:0},800);
});
HTML中得有一个按钮：
<!--Createananchortag--> <aclass="top"href="#">Backtotop</a>
可以改变scrollTop的值来定位滚动条的位置。
图片预加载
如果页面使用了很多不是最初加载便可见的图片，有必要进行预加载：
$.preloadImages=function(){
for(vari=0;i<arguments.length;i++){
$('img').attr('src',arguments[i]);
}
};
$.preloadImages('img/hover-on.png','img/hover-off.png');
判断图片是否完全加载
有时需要图片完全加载才能进行后面的操作，下面的这段脚本可以实现：
$('img').load(function(){
console.log('imageloadsuccessful');
});
你也可以通过带id或者class的img标签来判断某张特定的图片是否完全加载
自动修复损坏图片
如果图片损坏，可以用另外一张进行替换：
$('img').on('error',function(){
$(this).prop('src','img/broken.png');
});
Hover状态的类切换
当用户的鼠标指针悬浮在一个可以点击的元素上时，你可以通过添加一个class改变它的视觉效果，鼠标指针离开该元素时，就移开刚刚添加的class：
$('.btn').hover(function(){
$(this).addClass('hover');
},function(){
$(this).removeClass('hover');
});
一个更简单的方式是使用toggleClass：
$('.btn').hover(function(){
$(this).toggleClass('hover');
});
Note:CSSmaybeafastersolutioninthiscasebutit'sstillworthwhiletoknowthis.输入框的不可编辑
有时，你想要表单的提交按钮或者文本框变的不可编辑，直到用户完成某个特定的动作，通过修改input元素的disabled属性来实现：
$('input[type="submit"]').prop('disabled',true);
再次调用prop方法将disabled值改为false，就可以更改元素状态：
$('input[type="submit"]').prop('disabled',false);
停止链接加载
若你不想点击链接跳转到另一个页面或者重新加载页面，仅仅只想让它做点别的事情，如触发其它脚本，则需要阻止链接的默认行为:
$('a.no-link').click(function(e){
e.preventDefault();
});
Fade/Slide切换
Slideing和fading是很常用的JQuery动画。如果你想要在用户产生点击事件时显示一个元素，可以用fadeIn或者slideDown，若要实现第一次点击显示元素而第二次点击隐藏元素的效果，可以参考下面的脚本：
//Fade
$('.btn').click(function(){
$('.element').fadeToggle('slow');
});
//Toggle
$('.btn').click(function(){
$('.element').slideToggle('slow');
});
简单地手风琴
下面的这段脚本可以简单实现手风琴效果：
//Closeallpanels
$('#accordion').find('.content').hide();
//Accordion
$('#accordion').find('.accordion-header').click(function(){
varnext=$(this).next();
next.slideToggle('fast');
$('.content').not(next).slideUp('fast');
returnfalse;
});
让两个Div等高
有时，需要让两个Div保持等高，而不管两个Div的内容如何：
$('.div').css('min-height',$(.main-div).height());
var$columns=$('.column');
varheight=0;
$columns.each(function(){
if($(this).height()>height){
height=$(this).height();
}
});
$columns.height(height);
在上述的示例中，会循环一个元素集合，并将元素的高度设置成元素集合中高度最高的。若要所有column保持同样地高度，则可以这样：
var$rows=$('.same-height-columns');
$rows.each(function(){
$(this).find('.column').height($(this).height());
});
在新的Tab/Window打开外链
在浏览器的新Tab/Window打开外链，并且在同一个Tab/Window打开同源的链接：
$('a[href^="http"]').attr('target','_blank');
$('a[href^="//"]').attr('target','_blank');
$('a[href^="'+window.location.origin+'"]').attr('target','_self');
Note:window.location.origindoesn'tworkinIE10.Thisfixtakescareoftheissue.
通过文本查找元素
利用JQuery的contains()选择器可以查找一个包含特定文本的元素，如果文本不存在，元素则隐藏：
varsearch=$('#search').val();
$('div:not(:contains("'+search+'"))').hide();
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。