3、檢查圖像是否加載
有時(shí)為了繼續(xù)腳本,你可能需要檢查圖像是否全部加載完畢:
$('img').load(function () {
console.log('image load successful');
});
你也可以用ID或類替換<img>標(biāo)簽來(lái)檢查某個(gè)特定的圖像是否被加載。
4、自動(dòng)修復(fù)破壞的圖像
逐個(gè)替換已經(jīng)破壞的圖像鏈接是非常痛苦的。不過(guò),下面這段簡(jiǎn)單的代碼可以幫助你:
$('img').on('error', function () {
if(!$(this).hasClass('broken-image')) {
$(this).prop('src', 'img/broken.png').addClass('broken-image');
}
});
即使沒(méi)有任何斷掉的鏈接,加上這一段代碼也不會(huì)讓你有任何損失。
5、懸停切換類
假設(shè)你希望當(dāng)用戶將鼠標(biāo)懸停在可點(diǎn)擊的元素上時(shí),它會(huì)改變顏色。那么你可以在用戶懸停的時(shí)候添加類到元素中,反之則刪除類:
$('.btn').hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});
你只需要添加必要的CSS即可。更簡(jiǎn)單的方法是使用toggleClass 方法:
$('.btn').hover(function () {
$(this).toggleClass('hover');
});
注:可能在這種情況下,CSS這種解決方案更快,不過(guò)了解這個(gè)方法很有必要。