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 相关文章推荐
Web层改进II-用xmlhttp 无声息提交复杂表单
Jan 22 Javascript
{}与function(){}选用空对象{}来存放keyValue
May 23 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
Aug 18 Javascript
Javascript中Array.prototype.map()详解
Oct 22 Javascript
JavaScript中的原始值和复杂值
Jan 07 Javascript
详解AngularJS中ng-src指令的使用
Sep 07 Javascript
总结js函数相关知识点
Feb 27 Javascript
JS复杂判断的更优雅写法代码详解
Nov 07 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
Feb 27 Javascript
微信小程序基于movable-view实现滑动删除效果
Jan 08 Javascript
JS实现放大镜效果
Sep 21 Javascript
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
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 in_array 函数使用说明与in_array需要注意的地方说明
2010/04/13 PHP
简单实现限定phpmyadmin访问ip的方法
2013/03/05 PHP
PHP PDO fetch 模式各种参数的输出结果一览
2015/01/07 PHP
AJAX PHP无刷新form表单提交的简单实现(推荐)
2016/09/09 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
jquery中动态效果小结
2010/12/16 Javascript
JQuery优缺点分析说明
2011/04/10 Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
2011/07/15 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
js 自制滚动条的小例子
2013/03/16 Javascript
有关javascript的性能优化 (repaint和reflow)
2013/04/12 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
利用Jquery队列实现根据输入数量显示的动画
2016/09/01 Javascript
angular.JS实现网页禁用调试、复制和剪切
2017/03/31 Javascript
Vue.js 十五分钟入门图文教程
2018/09/12 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
2019/01/24 Javascript
Angular2实现的秒表及改良版示例
2019/05/10 Javascript
微信小程序制作扭蛋机代码实例
2019/09/24 Javascript
Python操作MongoDB详解及实例
2017/05/18 Python
Python中easy_install 和 pip 的安装及使用
2017/06/05 Python
TensorFlow 实战之实现卷积神经网络的实例讲解
2018/02/26 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
Python urlopen()和urlretrieve()用法解析
2020/01/07 Python
Python3批量创建Crowd用户并分配组
2020/05/20 Python
AmazeUI 单选框和多选框的实现示例
2020/08/18 HTML / CSS
Osklen官方在线商店:巴西服装品牌
2019/04/25 全球购物
护理专科毕业生自荐书范文
2014/02/19 职场文书
企业宣传标语
2014/06/09 职场文书
俄语专业毕业生求职信
2014/07/12 职场文书
精神文明建设先进个人事迹材料
2014/12/24 职场文书
2015年师德师风承诺书
2015/01/22 职场文书
python pygame入门教程
2021/06/01 Python
Vue鼠标滚轮滚动切换路由效果的实现方法
2021/08/04 Vue.js
MySQL中order by的使用详情
2021/11/17 MySQL
Python+SeaTable实现计算两个日期间的工作日天数
2022/07/07 Python