Jquery技巧技巧(必须掌握必须掌握)
主要介绍了Jquery技巧(必须掌握)的相关资料,需要的朋友可以参考下
检查检查 jQuery 是否加载是否加载
在使用 jQuery 进行任何操作之前,你需要先确认它已经加载:
if (typeof jQuery == 'undefined') {
console.log('jQuery hasn\'t loaded');
} else {
console.log('jQuery has loaded');
}
返回顶部按钮返回顶部按钮
利用 jQuery 中的 animate 和 scrollTop 方法,你无需插件就可以创建简单的 scroll up 效果:
// 返回顶部
$('a.top').click(function (e) {
e.preventDefault();
$(document.body).animate({scrollTop: 0}, 800);
});
<!-- 设置锚 -->
<a class="top" href="#">Back to top</a>
调整 scrollTop 的值即可改变滚动着陆位置。你实际所做的是在 800 毫秒内不断设置文档主体的位置,直到它滚动到顶部。
预加载图片预加载图片
如果你的网页使用了大量并非立即可见的图片(例如悬停鼠标触发的图片),那么预加载这些图片就显得很有意义了:
$.preloadImages = function () {
for (var i = 0; i < arguments.length; i++) {
$('<img>').attr('src', arguments[i]);
}
};
$.preloadImages('img/hover-on.png', 'img/hover-off.png');
判断图片是否加载完成判断图片是否加载完成
在有些情况下,为了继续执行脚本,你需要检查图片是否已经完全加载:
$('img').load(function () {
console.log('image load successful');
});
同样,换用一个带有 id 或者 class 属性的 <img> 标签,你也可以检查特定图片是否加载完成。
自动修复失效图片自动修复失效图片
如果你在你的网站上发现了失效的图片链接,逐个去替换它们将会是个苦差。这段简单的代码可以很大程度地减轻痛苦:
$('img').on('error', function () {
if(!$(this).hasClass('broken-image')) {
$(this).prop('src', 'img/broken.png').addClass('broken-image');
}
});
即使你暂无任何失效的链接,添加这段代码也不会有任何损失。
鼠标悬停切换鼠标悬停切换 class
如果你希望在用户将鼠标悬停在某个可点击元素上时改变它的视觉效果,你可以在该元素被悬停时给它添加一个 class,当鼠
标不再悬停时,移除这个 class:
$('.btn').hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});
如果你还寻求更简单的途径,可以使用 toggleClass 方法,仅需添加必要的 CSS:
$('.btn').hover(function () {