当前位置：Gxlcms > JavaScript > 15个jQuery小技巧分享

15个jQuery小技巧分享

时间：2021-07-01 10:21:17 帮助过：2人阅读

本文主要和大家分享15 个jQuery小技巧（干货）相关教程，具体实例代码请看下文，希望能帮助到大家。

1.返回顶部按钮

你可以利用animate和scrollTop来实现返回顶部的动画，而不需要使用其他插件。

?

code

1

2

3

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

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

});

改变scrollTop的值可以调整返回距离顶部的距离，而animate的第二个参数是执行返回动作需要的时间(单位：毫秒)。

2.预加载图片

如果你的页面中使用了很多不可见的图片（如：hover 显示），你可能需要预加载它们：

?

code

1

2

3

$.preloadImages =function(){for(var i =0; i < arguments.length; i++){

$('<img>').attr('src', arguments[i]);}};

$.preloadImages('img/hover1.png','img/hover2.png');

3.检查图片是否加载完成

有时候你需要确保图片完成加载完成以便执行后面的操作：

?

code

1

2

3

$('img').load(function(){

console.log('image load successful');

});

你可以把img替换为其他的ID或者class来检查指定图片是否加载完成。

4.自动修改破损图像

如果你碰巧在你的网站上发现了破碎的图像链接，你可以用一个不易被替换的图像来代替它们。添加这个简单的代码可以节省很多麻烦：

?

code

1

2

3

$('img').on('error',function(){

$(this).prop('src','img/broken.png');

});

即使你的网站没有破碎的图像链接，添加这段代码也没有任何害处。

5.鼠标悬停(hover)切换Class属性

假如当用户鼠标悬停在一个可点击的元素上时，你希望改变其效果，下面这段代码可以在其悬停在元素上时添加class属性，当用户鼠标离开时，则自动取消该class属性：

?

code

1

2

3

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！