前端开发必知的15个jQuery小技巧


Posted in Javascript onJanuary 22, 2017

下面这些简单的小技巧能够帮助你玩转jQuery。

1、返回顶部按钮

通过使用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的一些错误行为。

2、预加载图像

如果你的网页要使用大量开始不可见的(例如,悬停的)图像,那么可以预加载这些图像:

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

3、检查图像是否加载

有时为了继续脚本,你可能需要检查图像是否全部加载完毕:

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

你也可以用ID或类替换<img>标签来检查某个特定的图像是否被加载。

4、自动修复破坏的图像

逐个替换已经破坏的图像链接是非常痛苦的。不过,下面这段简单的代码可以帮助你:

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

即使没有任何断掉的链接,加上这一段代码也不会让你有任何损失。

5、悬停切换类

假设你希望当用户将鼠标悬停在可点击的元素上时,它会改变颜色。那么你可以在用户悬停的时候添加类到元素中,反之则删除类:

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

你只需要添加必要的CSS即可。更简单的方法是使用toggleClass 方法:

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

注:可能在这种情况下,CSS这种解决方案更快,不过了解这个方法很有必要。

6、禁用输入字段

有时候,你可能想要禁用表格的提交按钮或它的某一项文字输入直到用户执行了特定操作(例如,勾选“我已阅读相关条款”复选框)。添加 disabled属性到你的输入就可以在你想要的时候才启用它:

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

然后你只需要运行输入的prop 方法就可以了,不过disabled 的值要设置为false:

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

7、停止加载链接

有时候,你既不需要链接到某个特定的网页,也不想要重新加载页面——你可能希望链接做点别的事情,例如说触发一些其他脚本。这就要在阻止默认动作上做文章了:

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

8、淡入/滑动切换

滑动和淡入都是我们用jQuery做动画的时候大量运用的东西。如果你只是想在用户点击之后展示一个元素的话,那么用fadeIn 和slideDown 方法就很完美。但是,如果你想要元素在第一次点击的时候出现,然后在第二次点击的时候消失的话,那么可以试试下面的代码:

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

9、简单的手风琴

这是一个可快速生成手风琴的简单方法:

// 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元素,这样它就可以运行工作了。

10、让两个div高度相同

有时候,你需要让两个div无论包含什么内容都拥有相同的高度:

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

设置 min-height,这意味着它可以比主div大但绝对不能比主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());
});

11、在新标签页/窗口打开外部链接

在一个新的浏览器tab或窗口中打开外部链接,并确保同一个来源的链接能在同一个tab或者窗口中打开:

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

注意:window.location.origin 在IE10中无效。修复的时候要小心这个问题。

12、通过文本查找元素

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

var search = $('#search').val();
$('div:not(:contains("' + search + '"))').hide();

13、在改变Visibility时触发

当用户不再关注某个tab,或重新聚焦原来的那个tab上时,触发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!');
}
});

14、AJAX调用错误处理

当Ajax调用返回404或500错误时,就执行错误处理程序。如果没有定义处理程序,其他的jQuery代码或会就此罢工。定义一个全局的Ajax错误处理程序:

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

15、链式插件调用

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中可以让代码变得更短和更快的代最佳做法。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
IE 缓存策略的BUG的解决方法
Jul 21 Javascript
js代码验证手机号码和电话号码是否合法
Jul 30 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
Jun 07 Javascript
jquery判断iPhone、Android设备类型
Sep 14 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
Feb 17 Javascript
js实现百度登录框鼠标拖拽效果
Mar 07 Javascript
vue引入jq插件的实例讲解
Sep 12 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
Dec 27 Javascript
node使用Mongoose类库实现简单的增删改查
Nov 08 Javascript
vue 使用 canvas 实现手写电子签名
Mar 06 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
Sep 16 Javascript
electron踩坑之dialog中的callback解决
Oct 06 Javascript
Vue.js学习之过滤器详解
Jan 22 #Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
Jan 22 #Javascript
Ionic 2 实现列表滑动删除按钮的方法
Jan 22 #Javascript
Vue.js学习之计算属性
Jan 22 #Javascript
ionic中列表项增加和删除的实现方法
Jan 22 #Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 #Javascript
jQuery学习之DOM节点的插入方法总结
Jan 22 #Javascript
You might like
PHP 设计模式之观察者模式介绍
2012/02/22 PHP
PHP strstr 函数判断字符串是否否存在的实例代码
2013/09/28 PHP
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
利用phpexcel对数据库数据的导入excel(excel筛选)、导出excel
2017/04/27 PHP
实现复选框全选/全不选切换
2006/12/23 Javascript
jquery 入门教程 [翻译] 推荐
2009/08/17 Javascript
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
2014/05/11 Javascript
jQuery获取选中内容及设置元素属性的方法
2014/07/09 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
JS加载器如何动态加载外部js文件
2016/05/26 Javascript
bootstrap modal+gridview实现弹出框效果
2017/08/15 Javascript
php中and 和 &amp;&amp;出坑指南
2018/07/13 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
2018/08/31 Javascript
vue子路由跳转实现tab选项卡
2019/07/24 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
基于vue+echarts数据可视化大屏展示的实现
2020/12/25 Vue.js
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python中处理unchecked未捕获异常实例
2015/01/17 Python
python实现爬虫统计学校BBS男女比例之数据处理(三)
2015/12/31 Python
Python实现的多进程和多线程功能示例
2018/05/29 Python
在双python下设置python3为默认的方法
2018/10/31 Python
使用Python实现毫秒级抢单功能
2019/06/06 Python
如何使用Flask-Migrate拓展数据库表结构
2019/07/24 Python
Python使用Turtle库绘制一棵西兰花
2019/11/23 Python
pycharm不能运行.py文件的解决方法
2020/02/12 Python
Python短信轰炸的代码
2020/03/25 Python
HTML5+JS实现俄罗斯方块原理及具体步骤
2013/11/29 HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
日本PLST在线商店:日本时尚杂志刊载的人气服装
2016/12/10 全球购物
俄罗斯购买剧院和演唱会门票网站:Parter.ru
2019/11/09 全球购物
英国家具、照明、家居用品网上商店:Wayfair.co.uk
2020/02/13 全球购物
2014年招生工作总结
2014/11/26 职场文书
交通事故和解协议书
2015/01/27 职场文书
民间借贷借条范本
2015/05/25 职场文书
2015年中学图书馆工作总结
2015/07/22 职场文书