web前端有用的十个JQuery代码片段

1.返回顶部

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

$(‘a.top’).click(function(){

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

return false;

});

如上所示，使用jQuery 的animate和scrollTop 可以十分方便的制作一个返回顶部的特效。

通过改变scrollTop 的值我们可以控制滚动条。在上面的例子中值设为0，是为了让页面滚动到最顶部。

上面的动画效果是在800ms内从页面底部滚动到页面的最顶部。

2.检查图片是否加载完毕

$(‘img’).load(function() {

console.log(‘image load successful’);

});

有时候你需要检查图片是否被完全加载以便与完成后继的脚本。上面的三句jQuery语句能够帮你完成这个任务。

3.自动修复破损图像

$(‘img’).error(function(){

$(this).attr(‘src’, ‘img/broken.png’);

});

我们偶尔会在某些页面中弄错一些图片的链接，这时要想一一的修复它们并不是一件容易的事情。使用上面的代码可以帮助你快速的解决这个问题。

即使你没有任何破损的链接，写上上面的语句也不会造成任何损失。

4.鼠标滑过时切换CLASS

$(‘.btn’).hover(function(){

$(this).addClass(‘hover’);

}, function(){

$(this).removeClass(‘hover’);

}

);

这个jQuery片段在用户用鼠标滑过链接元素时添加一个滑过样式，而在鼠标离开时，将滑过样式去掉。样式的控制需要你在CSS文件中编写。

5.使INPUT字段不可用

$(‘input[type=”submit”]’).attr(“disabled”, true);

有时候你可能会希望表单中的某个按钮或某个input字段不可用，直到用户触发某个条件，例如：点击了“我同意xxx协议。。。”。通过上面的代码可以使input字段不可用。要想input字段变为可用，需调用下面的代码：

$(‘input[type=”submit”]’).removeAttr(“disabled”);

6.阻止超链接跳转

$(‘a.no-link’).click(function(e){

e.preventDefault();

});

有时候我们不希望点击超链接后跳转到另一个页面或者重新加载页面。我们希望点击超链接会触发某些脚本的执行，这时，可以通过上面的jQuery代码片段来阻止浏览器的默认行为。

7.切换FADE/SLIDE效果

// Fade

$( “.btn” ).click(function() {

$( “.element” ).fadeToggle(“slow”);

});

// Toggle

$( “.btn” ).click(function() {

$( “.element” ).slideToggle(“slow”);

})

滑动和淡入淡出效果是我们使用得最多的jQuery动画效果。

8.简单的手风琴效果

// Close all Panels

$(‘#accordion’).find(‘.content’).hide();

// Accordion

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

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

next.slideToggle(‘fast’);

$(‘.content’).not(next).slideUp(‘fast’);

return false;

});

要使用这个脚本你所要做的事情是编写一个必要的html结构代码。

9.使两个DIV高度相同

$(‘.div’).css(‘min-height’, $(‘.main-div’).height());

有时候你希望两个div具有相同的高度和不同的内容，这个jQuery片段可以解决这个问题。它通过设置“min-height”来使div具有相同的高度。

10.无序列表隔行变色

$(‘li:odd’).css(‘background’, ‘#E8E8E8’);

通过这句代码你可以很容易的创建一个隔行变色的无序列表，你也可以将它移植到表格、div或其它元素上去。

未经允许不得转载：爱前端网 » web前端有用的十个JQuery代码片段