jQuery常用的一些技巧汇总


Posted in Javascript onMarch 26, 2016

引子

jQuery的存在,让学习前端开发的人感到前端越来越容易入门了,用简单的几行代码就可以实现需求,但是,你真的会用jQuery么,当代码运行后无法看到自己预期的效果,是不是觉得jQuery出了问题,其实,问题还是出在了自己会不会用上面。下面列举一些开发中经常遇到的应用实例,发现一下另一个不同的jQuery世界。

回到顶部按钮

利用jQuery里的animate和scrollTop方法,你便不需要使用插件创建简单的滚动到顶部动画。

$('.top').click(function (e) {
 e.preventDefault();
 $('html, 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');

判断图片是否加载完

有时候你可能需要检查图像是否已经加载完成,以便于可以继续执行相应的js代码:

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

曾经遇到过的使用场景:有些元素需要按图片的实际尺寸来设置其大小,以绝对布置方式放置。元素的大小设置可以在图片加载完成后计算。

自动修补破损图像

如果你碰巧发现在你的网站上发现破损的图像链接,一个个去替代他们是痛苦的。这个简单的代码可以节省很多的麻烦:

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

即使你没有任何断开的链接,加入这代码也不会有任何影响。

禁用输入

有时你可能需要用表单的提交按钮或者某个输入框直到用户执行了某个动作(比如:检查“我已阅读条款”复选框)。在你的输入框上设置disabled属性,然后当你需要的时候启用该属性:

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

你需要做的只是需要在输入框上再次运行prop方法,但设置的被禁用值是false:

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

对地不了解prop函数的jQuery开发者来说,最常使用的是attr函数,可能开发很多程序都没有发现什么问题,但是,在开发例如checkbox、radio、select时,会发现使用attr无法让属性生效,以为是jQuery的bug,下面来说说attr和prop的使用建议:

在遇到要获取或设置checked,selected,readonly和disabled等属性时,用prop方法显然更好

使两个DIV同等高度

有时你会想要两个DIV有相同的高度,无论他们都有什么内容:

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

这个例子设置了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());
});

根据文本获取元素

通过jQuery中的contains()选择器,你能找到一个元素内的文本内容。如果文本不存在,则这个元素将被隐藏:

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

可见变化的触发

当用户不再聚焦或者重新聚焦一个标签时触发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!');
 }
});
Javascript 相关文章推荐
JQuery优缺点分析说明
Jun 09 Javascript
常见表单重复提交问题整理及解决方法
Nov 13 Javascript
JS函数重载的解决方案
May 13 Javascript
jQuery实现html表格动态添加新行的方法
May 28 Javascript
JavaScript动态生成二维码图片
Apr 20 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
Jun 12 Javascript
d3.js实现简单的网络拓扑图实例代码
Nov 06 Javascript
Vue.js学习之过滤器详解
Jan 22 Javascript
vue+element表格导出为Excel文件
Sep 26 Javascript
基于Vue CSR的微前端实现方案实践
May 27 Javascript
ES6 async、await的基本使用方法示例
Jun 06 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
Oct 18 Javascript
javascript拖拽应用实例(二)
Mar 25 #Javascript
几种经典排序算法的JS实现方法
Mar 25 #Javascript
javascript拖拽应用实例
Mar 25 #Javascript
JavaScript学习笔记之创建对象
Mar 25 #Javascript
JS实现的颜色实时渐变效果完整实例
Mar 25 #Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 #Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
Mar 25 #Javascript
You might like
php模板引擎技术简单实现
2016/03/15 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
javascript 写类方式之四
2009/07/05 Javascript
实现png图片和png背景透明(支持多浏览器)的方法
2009/09/08 Javascript
brook javascript框架介绍
2011/10/10 Javascript
解决jquery1.9不支持browser对象的问题
2013/11/13 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
2016/03/12 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
nodejs 图解express+supervisor+ejs的用法(推荐)
2017/09/08 NodeJs
vue2.0s中eventBus实现兄弟组件通信的示例代码
2017/10/25 Javascript
微信小程序项目实践之验证码倒计时功能
2018/07/18 Javascript
node.js爬虫框架node-crawler初体验
2020/10/29 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
[02:28]DOTA2亚洲邀请赛 LGD战队巡礼
2015/02/03 DOTA
使用python分析git log日志示例
2014/02/27 Python
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
python中Pycharm 输出中文或打印中文乱码现象的解决办法
2017/06/16 Python
Python 实现12306登录功能实例代码
2018/02/09 Python
Python3.5内置模块之shelve模块、xml模块、configparser模块、hashlib、hmac模块用法分析
2019/04/27 Python
python 含子图的gif生成时内存溢出的方法
2019/07/07 Python
Python模拟FTP文件服务器的操作方法
2020/02/18 Python
PyCharm安装PyQt5及其工具(Qt Designer、PyUIC、PyRcc)的步骤详解
2020/11/02 Python
美国折扣网站:jClub
2017/08/07 全球购物
俄罗斯建筑和装饰材料在线商店:Stroilandia
2020/07/25 全球购物
外企C语言笔试题
2013/11/10 面试题
Sql面试题
2013/03/20 面试题
大学生自我鉴定范文
2013/12/28 职场文书
英语教育专业自荐信
2014/05/29 职场文书
欢迎横幅标语
2014/06/17 职场文书
庆六一活动总结
2014/08/29 职场文书
企业贷款委托书格式
2014/09/12 职场文书
感恩教育主题班会
2015/08/12 职场文书
《牧场之国》教学反思
2016/02/22 职场文书
2019奶茶店创业计划书范本,值得你借鉴
2019/08/14 职场文书
Go 语言下基于Redis分布式锁的实现方式
2021/06/28 Golang
Django基础CBV装饰器和中间件
2022/03/22 Python