WEB前端知识

首页 > 免费 > WEB前端知识

前端开发必知的15个jQuery小技巧(二)

作者:admin 时间:2016-11-25   点击:0 次

3、检查图像是否加载

有时为了继续脚本,你可能需要检查图像是否全部加载完毕:

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

console.log('image load successful');

});

你也可以用ID或类替换<img>标签来检查某个特定的图像是否被加载。

4、自动修复破坏的图像

逐个替换已经破坏的图像链接是非常痛苦的。不过,下面这段简单的代码可以帮助你:

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

if(!$(this).hasClass('broken-image')) {

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

}

});

即使没有任何断掉的链接,加上这一段代码也不会让你有任何损失。

5、悬停切换类

假设你希望当用户将鼠标悬停在可点击的元素上时,它会改变颜色。那么你可以在用户悬停的时候添加类到元素中,反之则删除类:

$('.btn').hover(function () {

$(this).addClass('hover');

}, function () {

$(this).removeClass('hover');

});

你只需要添加必要的CSS即可。更简单的方法是使用toggleClass 方法:

$('.btn').hover(function () {

$(this).toggleClass('hover');

});

注:可能在这种情况下,CSS这种解决方案更快,不过了解这个方法很有必要。

CQTV新媒体项目运营中心 . 简米炎龙互联网运营专家!

地址:重庆市江北区观音桥华新软件产业园5F
咨询:023-67122091 023-81803811
业务QQ:1003671285 技术QQ:164983921
E - mail:1003671285@qq.com

简单 快乐 共享 共赢

  • 10年专业互联网运营经验
  • 重庆最专业WEB APP建站队伍
  • 500强集团公司网站建设供应商
  • 营销型网站建设领先者
  • 2000家成功客户经验
  • 始终坚持技术和服务同样重要
查看PC版网站
渝ICP备17000029号 版权所有:简米炎龙