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的仿flash的广告轮播代码
Nov 04 Javascript
window.location的重写及判断location是否被重写
Sep 04 Javascript
原生Js实现简易烟花爆炸效果的方法
Mar 20 Javascript
基于javascript代码实现通过点击图片显示原图片
Nov 29 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
Jan 23 Javascript
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
让bootstrap的carousel支持滑动滚屏的实现代码
Nov 27 Javascript
JavaScript实现创建自定义对象的常用方式总结
Jul 09 Javascript
Vue中使用clipboard实现复制功能
Sep 05 Javascript
基于Proxy的小程序状态管理实现
Jun 14 Javascript
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
深入分析jQuery.one() 函数
Jun 03 jQuery
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之第四天
2006/10/09 PHP
php遍历目录输出目录及其下的所有文件示例
2014/01/27 PHP
PHP实现生成唯一会员卡号
2015/08/24 PHP
php基于dom实现的图书xml格式数据示例
2017/02/03 PHP
用于自动添加Digg This!按钮的JavaScript
2006/12/23 Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
2010/07/17 Javascript
TextArea不支持maxlength的解决办法(jquery)
2011/09/13 Javascript
得到jQuery detach()后节点中的某个值实现代码
2013/02/05 Javascript
JavaScript实现的一个日期格式化函数分享
2014/12/06 Javascript
zepto.js中tap事件阻止冒泡的实现方法
2015/02/12 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
2016/02/15 Javascript
jQuery 调用WebService 实例讲解
2016/06/28 Javascript
纯JS实现可拖拽表单的简单实例
2016/09/02 Javascript
微信小程序如何获取手机验证码
2018/11/04 Javascript
如何从0开始用node写一个自己的命令行程序
2018/12/29 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
python从ftp下载数据保存实例
2013/11/20 Python
python抓取网页中的图片示例
2014/02/28 Python
Python实现多线程抓取妹子图
2015/08/08 Python
pandas apply 函数 实现多进程的示例讲解
2018/04/20 Python
python中将\\uxxxx转换为Unicode字符串的方法
2018/09/06 Python
简单了解django索引的相关知识
2019/07/17 Python
Pyinstaller 打包发布经验总结
2020/06/02 Python
Python中全局变量和局部变量的理解与区别
2021/02/07 Python
比驿:全球酒店比价网
2018/06/20 全球购物
Unineed中文官网:高端护肤美妆与时尚配饰,英国直邮
2020/07/23 全球购物
毕业自我鉴定总结
2014/03/24 职场文书
抗洪抢险事迹材料
2014/05/06 职场文书
新课培训心得体会
2014/09/03 职场文书
创卫工作总结2015
2015/04/22 职场文书
心灵点滴观后感
2015/06/02 职场文书
八年级语文教学反思
2016/03/03 职场文书
哪类餐饮行业,最适合在高校创业?
2019/08/19 职场文书
MySQL表类型 存储引擎 的选择
2021/11/11 MySQL
Springboot如何同时装配两个相同类型数据库
2021/11/17 Java/Android