初学者应该知道的jQuery的小技巧
沉沙 2018-07-18 来源 : 阅读 1204 评论 0

摘要:本篇jQuery教程探讨了一些初学者应该知道的jQuery的小技巧,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。

回到顶部的按钮

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

// Back to top
$('a.top').click(function (e) {
  e.preventDefault();
  $(document.body).animate({scrollTop: 0}, 800);
});

通过修改 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或者类选择器来判断某个特定的图片是否加载完成。

Fix Broken Images Automatically

在页面上如果发生某些图片加载失败是一个非常常见并且恶心的事情,如下的一小段代码可以在某种程度上解决这个问题:

$('img').on('error', function () {

  $(this).prop('src', 'img/broken.png');

});

即使没有发现任何的坏链的情况,也是建议将这段代码添加到页面中。

Toggle Classes on Hover

很多时候需要的响应是在用户悬浮在某个元素上时改变其的可见性或者状态,换言之,即是在用户将鼠标悬浮在某个元素上时修改其的类属性,而在用户停止悬浮时移除该类:

$('.btn').hover(function () {

  $(this).addClass('hover');

  }, function () {

    $(this).removeClass('hover');

  });

当然,更简单的就是利用 toggleClass 方法:

$('.btn').hover(function () {

  $(this).toggleClass('hover');

});

Note: CSS的hover伪类可能是更方便的做法,不过知晓这种用法也是值得的。

禁用输入框

很多情况下我们希望提交按钮能够在部分文本框未填入的情况下处于禁用状态直到用户执行了某个动作,此时我们就需要为这个按钮添加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种最常见的动画之一,很多时候我们希望能在用户点击某个元素之后将其渐隐渐出或者滑动出现:

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

});

在新的窗口打开外部链接

有时候需要控制在本页面打开同源链接,在新的页面种打开外部链接:

$('a[href^="http"]').attr('target','_blank');

$('a[href^="//"]').attr('target','_blank');

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

Note: window.location.origin 在IE10下无法工作. 这个修复 专门处理这个问题。

根据文本选择元素

通过使用 contains() 选择器可以根据内容搜索对应的元素,下述代码的作用就是在文本不存在的时候隐藏元素:

var search = $('#search').val();

$('div:not(:contains("'+search+'"))').hide();

可见性变化时候的触发

在某个Tab获得焦点或者失去焦点的时候:

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

 

本文由职坐标整理发布,更多相关内容,请关注职坐标WEB前端jQuery频道!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程