关注jquery技巧提高jquery技能(前端开发必学)


Posted in Javascript onNovember 02, 2015

一个简单技巧的集合,帮你提升 jQuery 技能。

Matt Smith 发起的一个小项目,目前已有 14 个 小技巧。伯乐在线会持续跟进更新。

回到顶部按钮
预加载图片
检查图片是否加载完毕
自动修复损坏的图片
Hover 上的 Class 开关
禁用 input 字段
停止链接加载
淡入淡出/滑动开关
简单的折叠效果
将两个 Div 设为相同高度
在新窗口打开外部链接
找到文本元素
切换可视与隐藏的触发器

回到顶部按钮

通过使用 jQuery 中的 animate 和 scrollTop 方法,你无需插件便可创建一个简单地回到顶部动画:

JavaScript

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

JavaScript

<!-- Create an anchor tag -->
<a class="top" href="#">Back to top</a>

将 scrollTop 的值改为你想要 scrollbar 停止的地方。然后你要做的就是,设置在 800 毫秒内回到顶部。

预加载图片

如果你的页面使用了大量不能初始可见的图片(例如绑定在 hover 上),预加载它们是十分有用的:

JavaScript

$.preloadImages = function () {
 for (var i = 0; i < arguments.length; i++) {
  $('<img>').attr('src', arguments[i]);
 }
};
$.preloadImages('img/hover-on.png', 'img/hover-off.png');

检查图片是否加载完毕

有时你或许要检查图片是否完全加载完毕,才能在脚本中进行后续操作:

JavaScript

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

你也可以通过把 img 标签替换成 ID 或 class,来检查特定图片是否加载完成。

自动修复损坏的图片

如果你发现自己网站的图片链接挂了,一个一个替换很麻烦。这段简单的代码可以帮上大忙:

JavaScript

$('img').on('error', function () {
 $(this).prop('src', 'img/broken.png');
});

即使你没有任何损坏的链接,增加这段代码也不会有什么影响。

Hover 上的 Class 切换

如果用户的鼠标悬停在页面上某个可点击元素时,你想要改变这个元素的视觉表现。可以使用下面这段代码,当用户悬停时,为该元素增加一个 class;当用户鼠标离开后移除这个 class:

JavaScript

$('.btn').hover(function () {
 $(this).addClass('hover');
}, function () {
 $(this).removeClass('hover');
});

你仅需增加必须的 CSS。如果需要更简单的方式,还可以使用 toggleClass 方法:

JavaScript

$('.btn').hover(function () {
 $(this).toggleClass('hover');
});

注意:CSS 或许是这个例子更快速的解决方式,但大家仍然值得知道这一点。

禁用 input 字段

有时你也许想让表单的提交按钮或其文本输入框变得不可用,直到用户执行了一个特定行为(例如确认 “我已经阅读该条款” 的复选框)。增加 disabled attribute 到你的 input,就可以实现自己想要的效果:

JavaScript

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

当你想把 disabled 的值改为 false 时,仅需在该 input 上再运行一次 prop 方法。

JavaScript

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

停止链接加载

有时你不想链接跳转到某个页面或重加载该页面,而希望可以做一些其他事情,比如触发其他脚本。下面的代码是禁止默认行为的一个小诀窍:

JavaScript

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

淡入淡出/滑动开关

淡入淡出与滑动是我们经常使用 jQuery 做成的动画效果。或许你只是想在用户点击某物时展现一个元素,使用 fadeIn 和 slideDown 都很棒。但如果想让该元素在第一次点击时显现,第二次点击时消失,下面的代码可以很好地完成这个工作:

JavaScript

// Fade
$('.btn').click(function () {
 $('.element').fadeToggle('slow');
});
// Toggle
$('.btn').click(function () {
 $('.element').slideToggle('slow');
});

简单的手风琴效果

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

JavaScript

// 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 拥有同样高度,不管它们里面有什么内容:

JavaScript

$('.div').css('min-height', $('.main-div').height());

该例设置了 min-height,意味着它可以比主要 div 更大,但永远不能更小。但有一个更加灵活的方法是遍历一组元素的设置,然后将高度设为元素中的最高值:

JavaScript

var $columns = $('.column');
var height = 0;
$columns.each(function () {
 if ($(this).height() > height) {
  height = $(this).height();
 }
});
$columns.height(height);

如果你想让所有列都有相同高度:

JavaScript

var $rows = $('.same-height-columns');
$rows.each(function () {
 $(this).find('.column').height($(this).height());
});

在新标签/窗口打开站外链接
在一个新标签或者新窗口中打开外置链接,并确保站内链接会在相同的标签或窗口中打开:

JavaScript

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

注意:window.location.origin 在 IE 10 中不可用,该 issue 的修复方法。

通过文本找到元素

通过使用 jQuery 中的 contains() 选择器,你可以找到某个元素中的文本。如果文本不存在,该元素将会隐藏:

JavaScript

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

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

视觉改变触发
当用户焦点在另外一个标签上,或重新回到标签时,触发 JavaScript:

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 错误处理:

JavaScript

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

全能程序员交流QQ群290551701,群内程序员都是来自,百度、阿里、京东、小米、去哪儿、饿了吗、蓝港等高级程序员 ,拥有丰富的经验。加入我们,直线沟通技术大牛,最佳的学习环境,了解业内的一手的资讯。如果你想结实大牛,那 就加入进来,让大牛带你超神!

Javascript 相关文章推荐
jQuery的实现原理的模拟代码 -3 事件处理
Aug 03 Javascript
jQuery 自定义函数写法分享
Mar 30 Javascript
jquery Validation表单验证使用详解
Sep 12 Javascript
Javascript实现字数统计
Jul 03 Javascript
javascript实现网页字符定位的方法
Jul 14 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
Mar 06 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
Jun 21 Javascript
AngularJs expression详解及简单示例
Sep 01 Javascript
微信小程序文章详情页面实现代码
Sep 10 Javascript
小程序实现左滑删除功能
Oct 30 Javascript
VUE简单的定时器实时刷新的实现方法
Jan 20 Javascript
vue h5移动端禁止缩放代码
Oct 28 Javascript
18个非常棒的jQuery代码片段
Nov 02 #Javascript
js实现文件上传表单域美化特效
Nov 02 #Javascript
非常实用的12个jquery代码片段
Nov 02 #Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
Nov 02 #Javascript
jquery 表单验证之通过 class验证表单不为空
Nov 02 #Javascript
纯javascript移动优先的幻灯片效果
Nov 02 #Javascript
JS实现点击按钮获取页面高度的方法
Nov 02 #Javascript
You might like
初学者入门:细述PHP4的核心Zend
2006/09/05 PHP
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
jQuery Mobile + PHP实现文件上传
2014/12/12 PHP
PHP实现在线阅读PDF文件的方法
2015/06/23 PHP
php-redis中的sort排序函数总结
2015/07/08 PHP
PHP会话处理的10个函数
2015/08/11 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
关于PHP虚拟主机概念及如何选择稳定的PHP虚拟主机
2018/11/20 PHP
jquery提升性能最佳实践小结
2010/12/06 Javascript
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
2014/01/13 Javascript
用JS在浏览器中创建下载文件
2014/03/05 Javascript
js图片自动轮播代码分享(js图片轮播)
2014/05/06 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
JS制作简单的三级联动
2015/03/18 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
2016/01/28 Javascript
基于jQuery实现中英文切换导航条效果
2016/09/18 Javascript
微信公众号 客服接口的开发实例详解
2016/09/28 Javascript
Node.js成为Web应用开发最佳选择的原因
2018/02/05 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
2018/03/13 Javascript
JavaScript鼠标拖拽事件详解
2020/04/03 Javascript
Python常用列表数据结构小结
2014/08/06 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
Python应用实现处理excel数据过程解析
2020/06/19 Python
Python使用Opencv实现边缘检测以及轮廓检测的实现
2020/12/31 Python
CSS3实现鼠标悬停显示扩展内容
2016/08/24 HTML / CSS
html5 标签
2009/07/16 HTML / CSS
英国在线房屋中介网站:Yopa
2018/01/09 全球购物
英国家用电器购物网站:Hughes
2018/02/23 全球购物
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
大学生护理专业自荐信
2013/10/03 职场文书
手工社团活动方案
2014/02/17 职场文书
员工团队活动方案
2014/08/28 职场文书
2015年国庆晚会主持词
2015/07/01 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书