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 利用show和hidden实现级联菜单示例代码
Aug 09 Javascript
jquery数组过滤筛选方法grep()简介
Jun 06 Javascript
Js实现自定义右键行为
Mar 26 Javascript
jQuery增加自定义函数的方法
Jul 18 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
Aug 07 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
Jan 06 Javascript
JavaScript使用键盘输入控制实现数字验证功能
Aug 19 Javascript
js点击任意区域弹出层消失实现代码
Dec 27 Javascript
原生JS实现逼真的图片3D旋转效果详解
Feb 16 Javascript
vue组件三大核心概念图文详解
May 30 Javascript
vue 实现单选框设置默认选中值
Nov 07 Javascript
解决vue v-for src 图片路径问题 404
Nov 12 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 图像处理类1
2009/06/15 PHP
PHPThumb PHP 图片缩略图库
2012/03/11 PHP
递归实现php数组转xml的代码分享
2015/05/14 PHP
php+Ajax无刷新验证用户名操作实例详解
2019/03/04 PHP
掌握PHP垃圾回收机制详解
2019/03/13 PHP
Javascript 获取LI里的内容
2008/12/17 Javascript
js中将字符串转换成json的三种方式
2011/01/12 Javascript
jQuery创建插件的代码分析
2011/04/14 Javascript
javascript使用数组的push方法完成快速排序
2014/09/15 Javascript
深入探密Javascript数组方法
2015/01/08 Javascript
JavaScript操作select元素和option的实例代码
2016/01/29 Javascript
JavaScript中数组添加值和访问值常见问题
2016/02/06 Javascript
JavaScript中的遍历详解(多种遍历)
2017/04/07 Javascript
js 用于检测类数组对象的函数方法
2017/05/02 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
2017/06/09 Javascript
详解webpack + react + react-router 如何实现懒加载
2017/11/20 Javascript
详解关于vue2.0工程发布上线操作步骤
2018/09/27 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
微信小程序商品详情页底部弹出框
2019/11/22 Javascript
python发腾讯微博代码分享
2014/01/10 Python
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
Python的CGIHTTPServer交互实现详解
2018/02/08 Python
Django框架登录加上验证码校验实现验证功能示例
2019/05/23 Python
Django搭建项目实战与避坑细节详解
2020/12/06 Python
Python中的流程控制详解
2021/02/18 Python
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
Java语言程序设计测试题改错题部分
2014/07/22 面试题
技校生自我鉴定范文
2013/09/26 职场文书
党的群众路线教育实践活动对照检查材料思想汇报(党员篇)
2014/09/25 职场文书
倡议书的格式写法
2015/04/28 职场文书
党员公开承诺书2016
2016/03/24 职场文书
2016年第104个国际护士节活动总结
2016/04/06 职场文书
2016年五一国际劳动节活动总结
2016/04/06 职场文书
2019年大学推荐信
2019/06/24 职场文书
演讲稿之开卷有益
2019/08/07 职场文书