前端开发必知的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 相关文章推荐
jquery实现点击TreeView文本父节点展开/折叠子节点
Jan 10 Javascript
JS 实现点击a标签的时候让其背景更换
Oct 15 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 Javascript
readonly和disabled属性的区别
Jul 26 Javascript
深入学习jQuery Validate表单验证(二)
Jan 18 Javascript
前端设计师们最常用的JS代码汇总
Sep 25 Javascript
AngularJS的脏检查深入分析
Apr 22 Javascript
JavaScript实现三级联动菜单效果
Aug 16 Javascript
Vuex的初探与实战小结
Nov 26 Javascript
vue项目打包上传github并制作预览链接(pages)
Apr 19 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
Sep 19 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 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中session变量的销毁
2014/02/27 PHP
php保存任意网络图片到服务器的方法
2015/04/14 PHP
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
thinkPHP数据查询常用方法总结【select,find,getField,query】
2017/03/15 PHP
一个实用的php验证码类
2017/07/06 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
2019/10/16 PHP
IE6浏览器下resize事件被执行了多次解决方法
2012/12/11 Javascript
js中apply方法的使用详细解析
2013/11/04 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
2013/11/19 Javascript
Javascript基础教程之比较操作符
2015/01/18 Javascript
理解javascript中Map代替循环
2016/02/26 Javascript
Nodejs 获取时间加手机标识的32位标识实现代码
2017/03/07 NodeJs
JS实现的添加弹出层并完成锁屏操作示例
2017/04/07 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
2017/12/25 Javascript
基于jQuery.i18n实现web前端的国际化
2018/05/04 jQuery
JS文件中加载jquery.js的实例代码
2018/05/05 jQuery
微信小程序实现简易table表格
2020/06/19 Javascript
Vue路由前后端设计总结
2019/08/06 Javascript
Node.js从字符串生成文件流的实现方法
2019/08/18 Javascript
Python实现在matplotlib中两个坐标轴之间画一条直线光标的方法
2015/05/20 Python
21行Python代码实现拼写检查器
2016/01/25 Python
python+pygame简单画板实现代码实例
2017/12/13 Python
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
Python正则匹配判断手机号是否合法的方法
2020/12/09 Python
在notepad++中实现直接运行python代码
2019/12/18 Python
Python批量启动多线程代码实例
2020/02/18 Python
口头翻译求职人自荐信
2013/12/07 职场文书
会计专业求职信范文
2014/03/16 职场文书
安全责任书范本
2014/04/15 职场文书
关于拾金不昧的感谢信
2015/01/21 职场文书
画展观后感
2015/06/17 职场文书
企业年会祝酒词
2015/08/11 职场文书
Pytest中conftest.py的用法
2021/06/27 Python
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js
Python find()、rfind()方法及作用
2022/12/24 Python