jquery常用的12个小功能

2020-05-22 17:08:14易采站长站整理

jquery12个常用功能极好的,快来围观!

返回顶部
使用JQuery的animate和scrollTop方法可以创建简单地返回顶部的动画:


// Back to top
$('a.top').click(function (e) {
e.preventDefault();
$(document.body).animate({scrollTop: 0}, 800);
});

HTML中得有一个按钮:


<!-- Create an anchor tag -->
<a class="top" href="#">Back to top</a>

可以改变scrollTop的值来定位滚动条的位置。

图片预加载
如果页面使用了很多不是最初加载便可见的图片,有必要进行预加载:


$.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 () {
$(this).prop('src', 'img/broken.png');
});

Hover状态的类切换
当用户的鼠标指针悬浮在一个可以点击的元素上时,你可以通过添加一个class改变它的视觉效果,鼠标指针离开该元素时,就移开刚刚添加的class:


$('.btn').hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});

一个更简单的方式是使用toggleClass:


$('.btn').hover(function () {
$(this).toggleClass('hover');
});

Note: CSS may be a faster solution in this case but it’s still worthwhile to know this.输入框的不可编辑
有时,你想要表单的提交按钮或者文本框变的不可编辑,直到用户完成某个特定的动作,通过修改input元素的disabled属性来实现:
$(‘input[type=”submit”]’).prop(‘disabled’, true);
再次调用prop方法将disabled值改为false,就可以更改元素状态:
$(‘input[type=”submit”]’).prop(‘disabled’, false);

停止链接加载
若你不想点击链接跳转到另一个页面或者重新加载页面,仅仅只想让它做点别的事情,如触发其它脚本,则需要阻止链接的默认行为: