jQuery常用的一些技巧汇总

时间:2020-05-15 人气:0

引子

jQuery的存在，让学习前端开发的人感到前端越来越容易入门了，用简单的几行代码就可以实现需求，但是，你真的会用jQuery么，当代码运行后无法看到自己预期的效果，是不是觉得jQuery出了问题，其实，问题还是出在了自己会不会用上面。下面列举一些开发中经常遇到的应用实例，发现一下另一个不同的jQuery世界。

回到顶部按钮

利用jQuery里的animate和scrollTop方法，你便不需要使用插件创建简单的滚动到顶部动画。

$('.top').click(function (e) {
 e.preventDefault();
 $('html, body').animate({scrollTop: 0}, 800);
});

通过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');

判断图片是否加载完

有时候你可能需要检查图像是否已经加载完成，以便于可以继续执行相应的js代码：

$('img').load(function () {
 console.log('image load successful');
});

曾经遇到过的使用场景：有些元素需要按图片的实际尺寸来设置其大小，以绝对布置方式放置。元素的大小设置可以在图片加载完成后计算。

自动修补破损图像

如果你碰巧发现在你的网站上发现破损的图像链接，一个个去替代他们是痛苦的。这个简单的代码可以节省很多的麻烦：

$('img').on('error', function () {
 if(!$(this).hasClass('broken-image')) {
 $(this).prop('src', 'img/broken.png').addClass('broken-image');
 }
});

即使你没有任何断开的链接，加入这代码也不会有任何影响。

禁用输入

有时你可能需要用表单的提交按钮或者某个输入框直到用户执行了某个动作（比如：检查“我已阅读条款”复选框）。在你的输入框上设置disabled属性，然后当你需要的时候启用该属性：

$('input[type="submit"]').prop('disabled', true);

你需要做的只是需要在输入框上再次运行prop方法，但设置的被禁用值是false：

$('input[type="submit"]').prop('disabled', false);

对地不了解prop函数的jQuery开发者来说，最常使用的是attr函数，可能开发很多程序都没有发现什么问题，但是，在开发例如checkbox、radio、select时，会发现使用attr无法让属性生效，以为是jQuery的bug，下面来说说attr和prop的使用建议:

在遇到要获取或设置checked,selected,readonly和disabled等属性时，用prop方法显然更好

使两个DIV同等高度

有时你会想要两个DIV有相同的高度，无论他们都有什么内容：

$('.div').css('min-height', $('.main-div').height());

这个例子设置了DIV的最小高度，这意味着它的高度只可以比这个设置的高度大而不能小。然而，一个更灵活的方法是循环的一组元素，并设置将最高元素的高度作为高度：

var $columns = $('.column');
var height = 0;
$columns.each(function () {
 if ($(this).height() > height) {
 height = $(this).height();
 }
});
$columns.height(height);

如果你想要所有的列有相同的高度：

var $rows = $('.same-height-columns');
$rows.each(function () {
 $(this).find('.column').height($(this).height());
});

根据文本获取元素

通过jQuery中的contains()选择器，你能找到一个元素内的文本内容。如果文本不存在，则这个元素将被隐藏：

var search = $('#search').val();
$('div:not(:contains("' + search + '"))').hide();

可见变化的触发

当用户不再聚焦或者重新聚焦一个标签时触发javascript脚本：

$(document).on('visibilitychange', function (e) {
 if (e.target.visibilityState === "visible") {
 console.log('Tab is now in view!');
 } else if (e.target.visibilityState === "hidden") {
 console.log('Tab is now hidden!');
 }
});

加载全部内容