jQuery实用的一些技巧

niuxiaowei111 发布于2019-08-19 17:57 / 2536人阅读

摘要：元素的大小设置可以在图片加载完成后计算。禁用输入有时你可能需要用表单的提交按钮或者某个输入框直到用户执行了某个动作比如检查我已阅读条款复选框。如果文本不存在，则这个元素将被隐藏可见变化的触发当用户不再聚焦或者重新聚焦一个标签时触发脚本转载

引子

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++) {
    $("").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!");
  }
});

转载：http://www.cnblogs.com

云服务器服务器托管 php实用的一些代码实用技巧 PHP实用技巧 js实用技巧

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79025.html

【JS实用技巧】利用冒泡机制，减少事件绑定，优化页面性能

摘要：如何通过一些技巧，达到减少事件绑定，优化页面性能的目的呢接下来介绍一下我个人对优化事件绑定的实践。这里直接给出最佳实践利用事件冒泡机制来为元素绑定事件。再加上由于创建太多的事件监听，也会对页面性能有影响。引言无论新手老手，在前端开发中，经常要为DOM元素绑定事件，以实现某些功能。如何通过一些JS技巧，达到减少事件绑定，优化页面性能的目的呢？接下来介绍一下我个人对优化事件绑定的实践。...

Jackwoo 2019-08-20 14:17 评论0 收藏0
CSS技巧 - 收藏集 - 掘金

摘要：笔者作为一位，将工作以来用到的各种优秀资料神器及框架整理在此，毕竟好记性不如烂键盘，此前端知识点大百科全书前端掘金，，不定期更新技巧前端掘金技巧，偶尔更新。计算数组的极值技巧使你的更加专业前端掘金一个帮你提升技巧的收藏集。 CSS 样式画各种图形 - 前端 - 掘金下面是一些我在 CSS 中经常用到的图案，还有一些是在css-tricks看到的。记录一下，以后会用到。会持续更新… 一、...

Jonathan Shieber 2019-08-29 12:33 评论0 收藏0
CSS技巧 - 收藏集 - 掘金

摘要：笔者作为一位，将工作以来用到的各种优秀资料神器及框架整理在此，毕竟好记性不如烂键盘，此前端知识点大百科全书前端掘金，，不定期更新技巧前端掘金技巧，偶尔更新。计算数组的极值技巧使你的更加专业前端掘金一个帮你提升技巧的收藏集。 CSS 样式画各种图形 - 前端 - 掘金下面是一些我在 CSS 中经常用到的图案，还有一些是在css-tricks看到的。记录一下，以后会用到。会持续更新… 一、...

SHERlocked93 2019-08-22 11:04 评论0 收藏0
CSS技巧

摘要：技巧使你的更加专业这是上关于技巧的一篇译文，另外你也可以在本项目看到原文。列举了一些很实用的技巧，比如给空内容的标签添加内容，逗号分隔列表等等。排序算法看源码，把它背下来吧排序算法的封装。主要帮助初学者更好的掌握排序算法的实现。成为专业程序员路上用到的各种优秀资料、神器及框架成为一名专业程序员的道路上，需要坚持练习、学习与积累，技术方面既要有一定的广度，更要有自己的深度。 Java...

DangoSky 2019-08-22 11:15 评论0 收藏0
CSS技巧

摘要：技巧使你的更加专业这是上关于技巧的一篇译文，另外你也可以在本项目看到原文。列举了一些很实用的技巧，比如给空内容的标签添加内容，逗号分隔列表等等。排序算法看源码，把它背下来吧排序算法的封装。主要帮助初学者更好的掌握排序算法的实现。成为专业程序员路上用到的各种优秀资料、神器及框架成为一名专业程序员的道路上，需要坚持练习、学习与积累，技术方面既要有一定的广度，更要有自己的深度。 Java...

zgbgx 2019-08-29 14:01 评论0 收藏0