(译)你应该知道的jQuery技巧

标签: 知道 jquery 技巧 | 发表时间:2015-11-20 18:54 | 作者:
出处:http://greengerong.github.io/

帮助提高你jQuery应用的简单小技巧。

  1. 回到顶部按钮
  2. 图片预加载
  3. 判断图片是否加载完
  4. 自动修补破损图像
  5. Hover切换class类
  6. 禁用输入
  7. 停止正在加载的链接
  8. toggle fade/slide
  9. 简单的手风琴
  10. 使两个DIV同等高度
  11. 在浏览器标签/新窗口打开外部链接
  12. 根据文本获取元素
  13. 可见变化的触发
  14. Ajax调用错误处理
  15. 链式操作

回到顶部按钮

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

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

通过scrollTop的值来改变你想要滚动到的位置。其实你就是做了:在接下来的800毫秒中让页面滚动,直到它滚动到文档的顶部。

备注:来看一些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');

判断图片是否加载完

有时候你可能需要检查图像是否已经加载完成,以便于可以继续执行相应的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');
});

备注:CSS在这种情况下使用是一个快速的解决方案,但要知道这点知识依旧是值得去了解下的。

禁用输入

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

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

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

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

停止正在加载的链接

有时你不想链接到特定的网页或者重新载入页面;你可能想让他们做一些其他事情,如触发一些其他的脚本。这是防止违约行动的技巧:

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

toggle fade/slide

滑动和淡入/淡出 是我们在jQuery中经常大量使用的动画。你可能仅仅想在用户做某些点击事件的时候显示一个元素,这时候需要淡入/淡出或者滑动方法。但是如果你需要那个元素在你第一次点击的时候出现,在第二次点击的时候消失,代码如下:

  // 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;
});

通过添加这个脚本,你需要做的则是必要的HTML操作在你的页面上。

使两个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());
});

在浏览器标签/新窗口打开外部链接

在新的浏览器标签或窗口中打开外部链接,并确保在同一个标签或窗口中打开的是同一个源的链接:

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

备注:window.location.origin 在IE10不工作。

根据文本获取元素

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

Ajax调用错误处理

当一个Ajax调用返回一个404或500的错误时,将执行该错误处理。如果该处理未定义,则其他jQuery代码便可能不会执行了。定义一个全局Ajax错误处理程序:

  $(document).ajaxError(function (e, xhr, settings, error) {
  console.log(error);
});

链式操作

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缓存方法是最好的做法,导致更短、更快的代码。

翻译:野兽

英文原文地址: https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know

相关 [知道 jquery 技巧] 推荐:

(译)你应该知道的jQuery技巧

- - 破狼 Blog
帮助提高你jQuery应用的简单小技巧. Hover切换class类. 在浏览器标签/新窗口打开外部链接. 利用jQuery里的animate和scrollTop方法,你便不需要使用插件创建简单的滚动到顶部动画. // Back to top $('.top').click(function (e) { e.preventDefault(); $('html, body').animate({scrollTop: 0}, 800); }); Back to top.

jQuery常用技巧

- - CSDN博客推荐文章
通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法. 2、jQuery对象与dom对象的转换. 只有jquery对象才能使用jquery定义的方法. 注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象.

一些实用的 jQuery 技巧

- - ITeye资讯频道
jQuery如今已经成为Web开发中最流行的JavaScript库,通过jQuery和大量的插件,你可以轻松实现各种绚丽的效果. 本文将为你介绍一些实用的技巧,希望可以帮助你更加高效地使用jQuery. Tip 1:使用最新版本. jQuery每一个新版本都会包含一些性能优化和bug修复,为了便于升级,你可以使用Google CDN服务托管的jQuery库.

10 个技巧助你写出卓越的jQuery插件

- - ITeye资讯频道
目前网络中存在大量能够实现各种功能的jQuery插件,有的插件表面上看很不错,但在实际使用过程中会出现很多问题. 而大多数插件只要再加入一点点额外的功能,就能从“优秀”变成“卓越”,并且有更广泛的用处. 本文针对jQuery插件的开发者列出了一些技巧,以帮助开发者写出更好的jQuery插件,并且这些技巧在插件的维护和扩展方面也有一定的作用.

快速开发 jQuery 插件的 10 大技巧

- - 开源中国社区最新新闻
在开发过很多 jQuery 插件以后,我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模式. 这样我就可以 copy & paste 大部分的代码结构,只要专注最主要的逻辑代码就行了. 使用相同的设计模式和架构也让修复bug或者二次开发更容易. 一套经过验证的架构可以保证我的插件不出大的问题,不论插件简单还是复杂.

8个超实用的jQuery技巧攻略

- - 开源软件 - ITeye博客
如果你想为用户节省网站信息,那么开发者可以使用这段代码——禁用右键单击功能. 2)使用jQuery设定文本大小. 使用这段代码,用户可根据需求重新设定文本尺寸(增加或减少). 使用这段代码会帮助用户在新窗口打开链接,为用户带来更好的用户体验. 使用这段代码帮助你更改样式列表. 此代码对于长时间点击单页面非常实用,你可以在重要关头点击“返回顶部”功能.

程序员都会的 35 个 jQuery 小技巧

- - 外刊IT评论
收集的35个 jQuery 小技巧/代码片段,可以帮你快速开发.. 注: 在版本jQuery 1.4中,$.support 替换掉了$.browser 变量. This piece of code will prevent the loading of all images, which can be useful if you have a site with lots of images..

GA小技巧:使用jQuery来方便的布置事件跟踪代码

- - 标点符
Google Analytics的事件跟踪是个神器,基本上你能想到什么他就能帮你做什么. 但是按照Google Analytics的帮助文章中方法去布置可能会让你觉得麻烦. 以下为我使用的小技巧分享给大家. 如果你需要跟踪某几个链接在页面上的点击数. 事先给需要记录的点击链接上添加一个类. 跟踪地址.

使用mac应该知道的技巧

- - CSDN博客推荐文章
1、使用Safari浏览网页的时候,如果你想把当前页面通过邮件发送给自己或别人,使用command+I,可以直接打开邮件并把当前网页附加到待发送的邮件中. 2、使用command+delete删除文件,彻底删除,使用shift+command+delete就会自动清空废纸篓. 3、想知道某个目录下各个文件和子目录各占多少空间,终端输入 du -sh *.

你可能不知道的 iPhone 技巧

- - 望月的博客
入了 iPhone 5C 之后,Google 了一番 iPhone 的相关技巧,发现许多奇技淫巧,才发现原以为很懂 iPhone 的我原来还是很无知,在这里将一些觉得有用的整理出来给大家,你知道几条呢. 不过,切记不要让你的那个 TA 看到最后一条. iPhone 本身的强应用. 这其实是一个广为流传的段子,放在前面开开胃吧.