博客

你应该知道的 jQuery 小技巧

回到顶部的按钮

通过使用jQuery中的animatescrollTop 方法可以创建一个非常简易的带有平滑滚动的回到顶部的按钮:

// Back to top
$('a.top').click(function (e) {
  e.preventDefault();
  $(document.body).animate({scrollTop: 0}, 800);
});
<!-- Create an anchor tag -->
<a class="top" href="#">Back to top</a>

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

阅读全文

标准
博客

使用 jQuery 在新窗口打开外部链接

我们一般都希望在新窗口打开外部链接,这样用户就不需要离开网站就能访问外部链接,但是如果每个外部链接都手工加上新窗口打开的属性(target=”_blank”)的话,会让人非常抓狂。使用 jQuery,我们只需要几行代码就能在新窗口中打开外部链接。

1. 找到外部链接

首先我们需要找到所有的外部链接,在 $(document).ready() 函数添加如下代码:

$("a[href*='http://']:not([href*='"+location.hostname+"']),[href*='https://']:not([href*='"+location.hostname+"'])");

上面这段代码查找 href 属性是以 http:// 或者 https:// 开始的,并且不包含当前域名(location.hostname)的链接(a)标签。这样我们就不会获取任何相对路径或者绝对连接中含有当前域名的内部连接。

阅读全文

标准