`

Jquery需要掌握的技巧

 
阅读更多

检查 jQuery 是否加载

在使用 jQuery 进行任何操作之前,你需要先确认它已经加载:

if (typeof jQuery == 'undefined') {
  console.log('jQuery hasn\'t loaded');
} else {
  console.log('jQuery has loaded');
}

返回顶部按钮

利用 jQuery 中的animatescrollTop方法,你无需插件就可以创建简单的 scroll up 效果:

// 返回顶部
$('a.top').click(function (e) {
  e.preventDefault();
  $(document.body).animate({scrollTop: 0}, 800);
});
<!-- 设置锚 -->
<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');

判断图片是否加载完成

在有些情况下,为了继续执行脚本,你需要检查图片是否已经完全加载:

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

同样,换用一个带有 id 或者 class 属性的&lt;img&gt;标签,你也可以检查特定图片是否加载完成。

自动修复失效图片

如果你在你的网站上发现了失效的图片链接,逐个去替换它们将会是个苦差。这段简单的代码可以很大程度地减轻痛苦:

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

即使你暂无任何失效的链接,添加这段代码也不会有任何损失。

鼠标悬停切换 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方法, 但是这一次把disabled值改为false

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

阻止链接加载

有时你不希望链接到指定页面或者重载当前页面,而是想让它们干些别的,例如触发其它脚本。这需要在阻止默认动作上做些文章:

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

缓存 jQuery 选择器

想想你在项目中一次又一次地写了多少相同的选择器吧。每个$('.element')都必须查询一次整个 DOM,不管它是否曾这样执行过。作为代替,我们只运行一次选择器,并把结果储存在一个变量中:

var blocks = $('#blocks').find('li');

现在你能在任何地方使用blocks变量而无需每次查询 DOM 了:

$('#hideBlocks').click(function () {
  blocks.fadeOut();
});

$('#showBlocks').click(function () {
  blocks.fadeIn();
});

缓存 jQuery 的选择器是种简单的性能提升。

切换淡出 / 滑动

淡出和滑动都是我们在 jQuery 中大量使用的效果。你可能只想在用户点击后展现某个元素,此时用fadeInslideDown方法就很完美。但是如果你希望这个元素在首次点击时出现,在再次点击时消失,这段代码就很有用了:

// 淡出
$('.btn').click(function () {
  $('.element').fadeToggle('slow');
});

// 切换
$('.btn').click(function () {
  $('.element').slideToggle('slow');
});

简单的手风琴效果

这是一个快速实现手风琴效果的简单方法:

// 关闭所有面板
$('#accordion').find('.content').hide();

// 手风琴效果
$('#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());

这个例子设置了min-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();

在 visibility 属性变化时触发

当用户的焦点离开或者重新回到某个标签页时,触发 Javasrcipt:

$(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 中用以简化和优化代码的最佳实践。

这里收集了一些简单的窍门,助你玩转 jQuery。

检查 jQuery 是否加载

在使用 jQuery 进行任何操作之前,你需要先确认它已经加载:

if (typeof jQuery == 'undefined') {
  console.log('jQuery hasn\'t loaded');
} else {
  console.log('jQuery has loaded');
}

返回顶部按钮

利用 jQuery 中的animatescrollTop方法,你无需插件就可以创建简单的 scroll up 效果:

// 返回顶部
$('a.top').click(function (e) {
  e.preventDefault();
  $(document.body).animate({scrollTop: 0}, 800);
});
<!-- 设置锚 -->
<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');

判断图片是否加载完成

在有些情况下,为了继续执行脚本,你需要检查图片是否已经完全加载:

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

即使你暂无任何失效的链接,添加这段代码也不会有任何损失。

鼠标悬停切换 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方法, 但是这一次把disabled值改为false

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

阻止链接加载

有时你不希望链接到指定页面或者重载当前页面,而是想让它们干些别的,例如触发其它脚本。这需要在阻止默认动作上做些文章:

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

缓存 jQuery 选择器

想想你在项目中一次又一次地写了多少相同的选择器吧。每个$('.element')都必须查询一次整个 DOM,不管它是否曾这样执行过。作为代替,我们只运行一次选择器,并把结果储存在一个变量中:

var blocks = $('#blocks').find('li');

现在你能在任何地方使用blocks变量而无需每次查询 DOM 了:

$('#hideBlocks').click(function () {
  blocks.fadeOut();
});

$('#showBlocks').click(function () {
  blocks.fadeIn();
});

缓存 jQuery 的选择器是种简单的性能提升。

切换淡出 / 滑动

淡出和滑动都是我们在 jQuery 中大量使用的效果。你可能只想在用户点击后展现某个元素,此时用fadeInslideDown方法就很完美。但是如果你希望这个元素在首次点击时出现,在再次点击时消失,这段代码就很有用了:

// 淡出
$('.btn').click(function () {
  $('.element').fadeToggle('slow');
});

// 切换
$('.btn').click(function () {
  $('.element').slideToggle('slow');
});

简单的手风琴效果

这是一个快速实现手风琴效果的简单方法:

// 关闭所有面板
$('#accordion').find('.content').hide();

// 手风琴效果
$('#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());

这个例子设置了min-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();

在 visibility 属性变化时触发

当用户的焦点离开或者重新回到某个标签页时,触发 Javasrcipt:

$(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 中用以简化和优化代码的最佳实践。

分享到:
评论

相关推荐

    jQuery常见开发技巧详细整理

    在jQuery的开发过程中,掌握一些常见技巧能显著提升开发效率和代码质量。下面是一些详细的jQuery开发技巧: 1. **引用页面元素**:jQuery通过`$()`选择器引用元素,支持ID、类名、元素类型以及层级关系和DOM或XPath...

    jquery使用技巧总结

    《jQuery使用技巧深度解析》 在Web开发领域,jQuery是一个广泛应用的...通过熟练掌握这些jQuery使用技巧,开发者不仅能提高工作效率,还能编写出更加优雅和高效的代码。不断探索和实践,是成为jQuery大师的关键。

    软件工程师-经典收藏50个jQueryMobile开发技巧集萃.docx

    《软件工程师-经典收藏50个jQueryMobile开发技巧集萃》文档汇集了众多关于jQuery Mobile的实用技巧,这些技巧对于软件工程师来说是构建高效、跨平台的移动网站和应用的宝贵资源。jQuery Mobile是一个强大的框架,它...

    jQuery技巧,比较经典的几种用法总结。

    jQuery 是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画和Ajax交互。本篇文章将深入探讨一些jQuery的经典技巧和用法。...了解并熟练掌握这些经典技巧,能让你在Web开发中更加游刃有余。

    Jquery技巧(必须掌握)

    在JavaScript的世界里,jQuery是一个非常流行且强大的库,它简化了许多DOM操作,事件处理,以及动画效果。在本文中,我们将深入探讨一些必备的jQuery技巧。...熟练掌握这些技巧,将使你的jQuery编程能力更上一层楼。

    jquery学习小技巧

    ### jQuery学习小技巧详解 #### 一、关于页面元素的引用 在网页开发过程中,能够高效地选择并操作页面上的元素是至关重要的。jQuery 提供了一种简洁且强大的方式来实现这一...掌握这些技巧将极大地提高网页开发效率。

    Jquery快速掌握教程

    本教程旨在帮助你系统性地掌握jQuery的使用技巧,让你能够灵活运用并举一反三,从而在实际项目中快速上手。 ### 1. jQuery基础 - **选择器**:jQuery提供了丰富的选择器,如ID选择器(#id),类选择器(.class),元素...

    jQuery常用经典技巧大放送

    ### jQuery常用经典技巧详解 #### 一、页面元素的引用 在使用jQuery的过程中,通过`$()`函数可以方便地...这些知识点涵盖了jQuery的基本使用方法、对象转换、集合处理等功能,旨在帮助读者快速掌握jQuery的核心技巧。

    JQ技巧jquery学习技巧

    jQuery,简称为JQ,是一种广泛应用于Web开发的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画设计和...通过上述技巧,初学者可以快速上手并掌握jQuery的基本操作,进一步探索更复杂的动态效果和交互功能。

    jQuery Mobile十大常用技巧

    在移动Web开发中,jQuery Mobile是一个非常流行的框架,它基于HTML5,允许开发者利用CSS和JavaScript轻松构建响应式的移动端界面。...掌握这些jQuery Mobile的常用技巧,将有助于提升移动Web应用的用户体验和开发效率。

    jQuery的常用技巧分享

    ### jQuery的常用技巧详解 #### 一、简介 jQuery 是一款快速、简洁的 JavaScript 库,因其体积小(压缩后仅有 21KB)而受到广泛欢迎。...通过掌握上述技巧,你可以更高效地利用 jQuery 完成各种前端开发任务。

    jQuery应用技巧大全

    熟练掌握这些选择器,可以精确地定位到我们需要操作的DOM元素,避免遍历整个DOM树,提高性能。同时,利用组合选择器(如$("div.class1.class2"))和后代选择器($("div &gt; p"))能更高效地定位元素。 二、DOM操作 ...

    jQuery常用技巧大放送

    jQuery,作为一个广泛使用的JavaScript库,极大地简化了网页的DOM操作,...熟练掌握上述技巧,可以使代码更加简洁高效,提升开发效率。在实际项目中,结合使用这些技巧,可以创造出功能强大、用户体验良好的Web应用。

    使用JQuery的常用技巧(追加)

    在JavaScript库中,jQuery以其简洁的API和强大的功能深受开发者喜爱。本文将深入探讨使用jQuery的常用技巧,...在学习和实践过程中,不断探索和掌握jQuery的更多技巧,将有助于提升开发技能,为项目带来更多的可能性。

    jquery使用手册与技巧

    《jQuery使用手册与技巧》是IT开发者们必备的...总的来说,这些资料将帮助读者深入理解jQuery的工作原理,掌握各种实用技巧,提升Web开发效率。通过学习和实践,开发者可以更加自如地构建动态、响应式的网页应用程序。

    50个最值得收藏的jQuery Mobile开发技巧

    在讨论有关jQuery Mobile开发技巧的系列知识点之前,需要明确,jQuery Mobile 是一个特别为移动设备设计的框架,它允许开发者使用HTML、CSS和JavaScript创建跨平台的移动应用。这一点的重要性在于开发者需要了解如何...

    15个Jquery 技巧

    ### 15个jQuery技巧深度解析 在前端开发领域,jQuery作为一款优秀的JavaScript库,以其简洁、高效的...总之,通过掌握和运用这些技巧,开发者能够显著提升基于jQuery构建的应用程序的性能,从而提供更流畅的用户体验。

Global site tag (gtag.js) - Google Analytics