前端开发必知的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 相关文章推荐
网页的标准,IMG不支持onload标签怎么办
Jun 29 Javascript
javascript void(0)的妙用
Oct 21 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
Jan 17 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
Jun 10 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
Apr 16 Javascript
学习JavaScript设计模式之代理模式
Jan 12 Javascript
Vue.js每天必学之表单控件绑定
Sep 05 Javascript
node.js缺少mysql模块运行报错的解决方法
Nov 13 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
Nov 26 Javascript
解决vue 更改计算属性后select选中值不更改的问题
Mar 02 Javascript
vue移动端的左右滑动事件详解
Jun 17 Javascript
JavaScript嵌入百度地图API的最详细方法
Apr 16 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/01/10 PHP
php中error与exception的区别及应用
2014/07/28 PHP
php $_SESSION会员登录实例分享
2021/01/19 PHP
PHP7安装Redis扩展教程【Linux与Windows平台】
2016/09/30 PHP
解决laravel5中auth用户登录其他页面获取不到登录信息的问题
2019/10/08 PHP
关于恒等于(===)和非恒等于(!==)
2007/08/20 Javascript
JavaScript中实现块作用域的方法
2010/04/01 Javascript
用jquery实现下拉菜单效果的代码
2010/07/25 Javascript
JS 修改URL参数(实现代码)
2013/07/08 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
2014/07/04 Javascript
浅谈JavaScript数据类型及转换
2015/02/28 Javascript
javaScript中定义类或对象的五种方式总结
2016/12/04 Javascript
Vue.js学习笔记之修饰符详解
2017/07/25 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
2018/10/16 Javascript
js字符串倒序的实例代码
2018/11/30 Javascript
Vue 打包体积优化方案小结
2020/05/20 Javascript
Python3搜索及替换文件中文本的方法
2015/05/22 Python
Python运算符重载用法实例分析
2015/06/01 Python
pyqt5 禁止窗口最大化和禁止窗口拉伸的方法
2019/06/18 Python
python文字和unicode/ascll相互转换函数及简单加密解密实现代码
2019/08/12 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
Python 解析pymysql模块操作数据库的方法
2020/02/18 Python
Python如何通过百度翻译API实现翻译功能
2020/04/02 Python
如何在python中实现线性回归
2020/08/10 Python
python3:excel操作之读取数据并返回字典 + 写入的案例
2020/09/01 Python
如何通过python计算圆周率PI
2020/11/11 Python
整理HTML5中表单的常用属性及新属性
2016/02/19 HTML / CSS
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
Yahoo-PHP面试题1
2016/07/20 面试题
理工学院学生自我鉴定
2014/02/23 职场文书
民族团结好少年事迹材料
2014/08/19 职场文书
超市督导岗位职责
2015/04/10 职场文书
2015年度招聘工作总结
2015/05/28 职场文书
有关三国演义的读书笔记
2015/06/25 职场文书
小学四年级作文之人物作文
2019/11/06 职场文书
德劲DE1107指针试高灵敏度全波段收音机机评
2022/04/05 无线电