jQuery常用功能小技巧

2017-05-15 本文已影响0人守心向暖

原文地址：http://www.cnblogs.com/whitewolf/p/4982425.html

回到顶部
利用jQuery里的animate和scrollTop方法，创建简单的滚动到顶部动画。
通过scrollTop的值来改变想要滚动到的位置。

<a class="top" href="#">回到顶部</a>
$('.top').click(function (e) {
    e.preventDefault();
    $('html, body').animate({scrollTop: 0}, 800); //在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');
});
// 检查特定图片是否加载完成使用带有id或者class的<img>标签代替。

自动修补破损图像
修复破损的图像链接，如果没有任何断开的链接，加入以下代码也不会有任何影响。

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

Hover切换class
当用户将鼠标悬停在页面上的元素时，改变其视觉效果。可以在悬停元素上添加一个class，移除悬停焦点时删除此class：

$('.btn').hover(function () {
  $(this).addClass('hover');
}, function () {
  $(this).removeClass('hover');
});
// 更简单的方式是实用toggleClass方法，仅需要添加必要的css：
$('.btn').hover(function () {
  $(this).toggleClass('hover');
});

禁用输入
有时需要禁用表单的提交按钮或者某个输入框直到用户执行了某个动作(如：检查“我已阅读条款”复选框)。

// 在输入框上设置disabled属性，当需要的时候启用该属性：
$('input[type="submit"]').prop('disabled', true);
// 启用设置：
$('input[type="submit"]').prop('disabled', false);

停止正在加载的链接
当不想链接到特定的网页或者重新载入页面或做一些其他的事情，如触发一些其他的脚本。这是防止违约行动的技巧。

$('a.no-link').click(function (e) {
    e.preventDefault();
});

toggle fade/slide
滑动和淡入淡出仅想在用户做某些点击事件的时候显示一个元素，这时候需要淡入淡出或者滑动方法，但是如果需要某个元素在第一次点击的时候出现，第二次点击的时候消失，代码如下：

// Fade
$('.btn').click(function () {
    $('.element').fadeToggle('slow');
});
// Toggle
$('.btn').click(function () {
    $('.element').slideToggle('slow');
});

简单的手风琴

// Close all panels
$('#accordion').find('.content').hide();
// Accordion
$('#accordion').find('.accordion-header').click(function () {
    var next = $(this).next();
    next.slideToggle('fast');
    $('.content').not(next).slideUp('fast');
    return false;
});

使两个div同等高度

// 两个div具有相同高度，以最小高度为底
$('.div').css('min-height', $('.main-div').height());
// 以最大高度为限
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());
});

在浏览器标签／新窗口打开外部链接
在新的浏览器标签或窗口中打开外部链接，并确保在同一个标签或窗口中打开的是同一个源的链接：
备注： window.location.origin 在IE10不工作

$('a[href^="http"]').attr('target', '_blank');
$('a[href^="//"]').attr('target', '_blank');
$('a[href^="' + window.location.origin + '"]').attr('target', '_self');

根据文本获取元素
通过jQuery中的contains()选择器，找到一个元素内的文本内容；如果文本不存在，则这个元素将被隐藏

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

可见变化的触发
当用户不再聚焦或者重新聚焦一个标签时触发js脚本：

$(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!');
      }
});

链式操作
jQuery允许通过链式操作来减轻反复查询DOM和创建多个jQuery对象的过程。

$('#elem').show();
$('#elem').html('bla');
$('#elem').otherStuff();
// 这代码可以通过链式大大的提高：
$('#elem')
  .show()
  .html('bla')
  .otherStuff();
// 另一个方法是在一个可变的元素缓存（$作为前置）：
var $elem = $('#elem');
$elem.hide();
$elem.html('bla');
$elem.otherStuff();
// 链式和jQuery缓存方法是最好的做法，更短、更快的代码。

jQuery常用功能小技巧

猜你喜欢

热点阅读